how to style react-native-router-flux?

react-native react-native-router-flux
farmcommand2 picture farmcommand2 · Aug 15, 2017 · Viewed 15k times · Source

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

Wanda Ichsanul Isra picture Wanda Ichsanul Isra · Sep 4, 2017

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

Related questions

How to pass values to other component in React-Native-Router-Flux?

My code is: ... <Router> <Scene key="com1" component={Com1} initial/> <Scene key="com2" component={Com2}/> </Router> ... com1.js ... onPress={Actions.com2} I changed com1 to com2. But I need to pass values …

Read More
React Native <ListItem onPress={...}> - why is this function executing?

I'm just starting to wrap my head around React Native and am using Redux for management of state, the NativeBase library for my UI components and react-native-router-flux is handling navigation between views. Currently I'm building a basic list that is …

Read More
React Native JSON.stringify cannot serialize cyclical structures

We're building a RN app (RN0.37), and we're running into an issue where when the app is run, we get a "TypeError: JSON.stringify cannot serialize cyclic structures". Nothing of relevance has changed on the API responses, and the issues …

Read More