how to style react-native-router-flux?

user_7411107 0
Viewed 15699

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?

react-native-router-flux react-native
5 Answers

sceneStyle prop in Router is a style applied to all scenes, which is completely optional.

<Router sceneStyle={{ backgroundColor: '#81b71a' }}>
  <Stack key="root">
    <Scene key='sample page' component={Sample} title='Sample Page'/>
  </Stack>
</Router>

This will give result like this:

enter image description here

you can use navigationBarStyle props in Router as mentioned above by @wlisrausr

<Router navigationBarStyle={{ backgroundColor: '#81b71a' }}>
      <Stack key="root">
        <Scene key='sample page' component={Sample} title='Sample Page'/>
      </Stack>
    </Router>

which will give result:

navigationBarStyle

user_47367990

Easy Way To channge Header Bar Text Style in : react-native-router-flux

<Scene key="myJobs"
  title={'My Listings'}
  iconName="myJobs"
  hideNavBar={false}
  component={MyJobs}
  titleStyle={{
    color: '#ffffff',
    fontSize: 22,
    fontFamily: FontFamilyBold,
    fontWeight: '700',
    justifyContent: 'center',
    marginLeft: 30,
  }}
/>

user_90064130
Related