React-native-router-flux: Setting status bar component for all scenes

[sadika9]

Is it possible to set Status Bar for all scenes?

Version

• react-native-router-flux v3.35.0
• react-native v0.33.0

[alexcurtis]

Yeah. I just add it at the root level (same as <Router/>).

<View style={styles.application}>
  <StatusBar barStyle="default"/>
  <Router/>
</View>

[sadika9]

@alexcurtis I've already tried it. When I wrap Router with a View it does not render at all (white screen)

[coreyphillips]

@sadika9 you're not going to want to wrap <Router/>. Notice in @alexcurtis' example the StatusBar component is self-closing <StatusBar barStyle="default"/>

To expand on the previous example, you will want something similar to this:

<View style={styles.application}>
    <StatusBar />
    <Router>
        <Scene key="root">
        <Scene
            key="firstComponent"
            component={FirstComponent}
            title="First Component"
            initial={true}
        />
        <Scene
            key="secondComponent"
            component={SecondComponent}
            title="Second Component"
        />
    </Scene>
    </Router>
</View>

[sadika9]

@alexcurtis @coreyphillips Thank you

[nonameolsson]

Thanks, very nice!

But when I use Redux and wrap my Router in a Provider I get an error. I'm not sure if it has to do with react-native-router-flux or Redux. What do you think?

      <View>
        <StatusBar
          backgroundColor='#303F9F'
          barStyle='light-content'
        />
        <Provider store={store}>
          <Router />
        </Provider>
      </View>

[coreyphillips]

@nonameolsson The error does not appear to be related to react-native-router-flux or redux. The error appears to be reporting that one of your variables is undefined in the App component. Based on the code snippet you provided I would check that the store variable is indeed defined. If it is, I would check other variables you may have in that component. Finding that rogue variable should fix your error.

Also, to add to my previous comment, you may need to add a flex: 1 style to the <View> wrapper (Ex. <View style={{ flex: 1 }}>) for it to properly render to the view.

[QiquWong]

@sadika9 I also encountered this issue about white screen, how do you solve it?

[sadika9]

I did what alexcurtis & coreyphillips said