CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-router-flux
user3259472
user3259472

Reputation:

React Native: How to set background color for the whole app and individual scene in react-native-router-flux?

In React Native using react-native-router-flux, How can I set the background color for the whole app and also individual scene as well?

Here is my current set up:

const RouterWithRedux = connect()(Router)
const store = configureStore()

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Scene key='root'>
            <Scene initial={true} key='login' component={Login} title='Login Page'/>
            <Scene key='register' component={Register} title='Register'/>
          </Scene>
        </RouterWithRedux>
      </Provider>
    )
  }
}

Thank you

Upvotes: 1

Views: 5400

Answers (1)

rclai
rclai

Reputation: 1890

In the API documentation, you can use sceneStyle or getSceneStyle on both Router and Scene (only getSceneStyle for Router though).

EDIT

In the Router you can only use getSceneStyle and you must pass a function:

// ..
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
  const style = {
    backgroundColor: 'blue',
  };
  return style;
};
// ..
<Router getSceneStyle={getSceneStyle} {...otherProps}>
// ..

For your Scenes you can just pass an object or StyleSheet object to sceneStyle or use getSceneStyle (making sure you pass a function like above):

<Scene
  key="my-scene"
  component={MyScene}
  sceneStyle={{
    backgroundColor: 'red',
  }}
  title="My Scene"  />

This will override the blue background.

Upvotes: 3

Related Questions