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?

So basically you want to give custom style to all of router flux header? — Wanda Ichsanul Isra, Sep 04 '17 at 07:30

Wanda Ichsanul Isra · Accepted Answer · 2018-02-13T03:13:51.233

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

score 6 · Answer 2 · answered Aug 15 '17 at 03:51

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.

How about that @farmcommand2, is it working on your project ? — Syauqi Rahmat Sugara, Aug 15 '17 at 15:38

score 6 · Answer 3 · answered Aug 15 '17 at 05:50

6

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.

answered Aug 15 '17 at 05:50

Vahid Boreiri

3,418
1
19
34

how to use a custom header component? I can hide the navbar but don't know how to inject a new header. – Christian Wolf Alves Hess Jun 24 '19 at 14:18
In a simple way, the header can be a part of each page. – Vahid Boreiri Jun 30 '19 at 14:46
@VahidBoreiri This is exactly what I want to do, but I don't understand how to make your own custom header. Is there any documentation on how to do this? – gkeenley Mar 30 '20 at 08:47
@gkeenley You can use your own component or some UI component package like https://react-native-elements.github.io/react-native-elements/docs/header.html or https://docs.nativebase.io/Components.html#textarea-textbox-headref – Vahid Boreiri Mar 30 '20 at 10:13

score 0 · Answer 4 · answered Aug 14 '19 at 14:34

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:

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:

score 0 · Answer 5 · answered Sep 10 '19 at 05:59

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,
  }}
/>

how to style react-native-router-flux?

5 Answers5