how to style react-native-router-flux?

Maybe you can following this reference, It may be your problem because it is not right to put the style because if you want to change header background color you can use navigationBarStyle not using sceneStylelike this :

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} sceneStyle={styles.routerScene}>
  <Schema .../>
  <Route .../>
</Router>

const styles = StyleSheet.create({
  navBar: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red', // changing navbar color
  },
  navTitle: {
    color: 'white', // changing navbar title color
  },
  routerScene: {
    paddingTop: Navigator.NavigationBar.Styles.General.NavBarHeight, // some navbar padding to avoid content overlap
  },
})

I hope this reference can help you.


You can hide the default header by using hideNavBar={true} and use your own header component to have a fully customizable header. In this way you can use the header component of a UI component package like native-base.


The sceneStyle props is used to styling all of your RNRF scene/screen, which is the content part of your screen (below of the header). If you want to give the custom style to all of your RNRF scene header, you have to use navigationBarStyle props in your RNRF Router component.

<Router navigationBarStyle={{ backgroundColor: '#81b71a' }}>
  <Scene key="root">
    <Scene key='login' component={LoginForm} title='Please Login :)' />
  </Scene>
</Router>

Below is one of the snapshot example if I use it.

enter image description here

Ref: https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md