how to style react-native-router-flux?

Question

I am using react-native-router-flux 4.0.0-beta.17 for my learning project. I need to customize the header. for instance the background color, the title alignment, etc. I couldn't find a good document about it. One of them had something like

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

but it doesn't do anything.

Please give me some reference about good docs and also if possible, some information about how to style the router. where can I find a comprehensive document?

Answer 1

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.

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