React-native-navigation: Global navigatorStyle, even with resetTo()?

Created on 13 Jul 2017 · 2Comments · Source: wix/react-native-navigation

It looks like whenever I use this.props.navigator.resetTo({ screen: 'NewScreen' }), it resets other options, including navigatorStyle. Is there a way to set a global default navigatorStyle in a single screen app, that is reuseable/preserved even when I call resetTo? Right now the only way I know of setting a navigatorStyle is for each screen (even a single screen app). It feels like moving through the navigation should not affect styling by default.

Source

tmaly1980

Most helpful comment

OK For the interim, I have a higher order component that lets me pass additional parameters to the screen, and also merges with a global style. I've then made sure to wrap the component registration. This is my screens.js:

import styles from './Styles/WixNavigationStyles'

// Wrap with HOC, share screen components
function screenWrapper (WrappedComponent, model) {
  let wrapperClass = class extends React.Component {
    static navigatorStyle = { // Shared styling for all screens
      ...styles.screen,
      statusBarHidden: true
    }
    render () {
      return <WrappedComponent {...this.props} model={model} />
    }
  }
  // MERGE styles
  if (WrappedComponent.navigatorStyle) {
    wrapperClass.navigatorStyle = Object.assign(wrapperClass.navigatorStyle, WrappedComponent.navigatorStyle)
  }
  return wrapperClass
}

export function registerScreens (store, Provider) {
  Navigation.registerComponent('DealsScreen', () => screenWrapper(ListingsScreen, 'deals'), store, Provider)
}

tmaly1980 on 13 Jul 2017

👍5

All 2 comments

import styles from './Styles/WixNavigationStyles'

// Wrap with HOC, share screen components
function screenWrapper (WrappedComponent, model) {
  let wrapperClass = class extends React.Component {
    static navigatorStyle = { // Shared styling for all screens
      ...styles.screen,
      statusBarHidden: true
    }
    render () {
      return <WrappedComponent {...this.props} model={model} />
    }
  }
  // MERGE styles
  if (WrappedComponent.navigatorStyle) {
    wrapperClass.navigatorStyle = Object.assign(wrapperClass.navigatorStyle, WrappedComponent.navigatorStyle)
  }
  return wrapperClass
}

export function registerScreens (store, Provider) {
  Navigation.registerComponent('DealsScreen', () => screenWrapper(ListingsScreen, 'deals'), store, Provider)
}

tmaly1980 on 13 Jul 2017

👍5

Hey @tmaly1980
As of today, you can define a theme for the entire app using appStyle, but that's only implemented on Android.
V2 will support appStyle for both platforms.