Search code examples
react-nativereact-native-router-flux

React Native + react-native-router-flux: hideNavBar makes all components disappear

In React Native using react-native-router-flux, when I try to hide the nav bar all the components disappear. Here is my code : 

<Router>
   <Stack key="root" >
      <Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
      <Scene key="signup" component={Signup} title="Signup" />
   </Stack>
</Router>

I tried other alternative solutions but still have the same problem. enter image description here

Here is how it looks without using the hideNavBar property. enter image description here

Solution

  • after looking through your snack, i realise that the parent <View /> component under App.js seem to be causing the issue without any error flags. by removing it, the components have reappeared. i would suggest that you add the css styling to each Scene separately, which would also give you granular control. or you probably have to rework your components in order to have a base styling theme. this is the updated snack.

    enter image description here

    using ^4.2.0 of react-native-router-flux, i am able to replicate your above example without any issue of components disappearing upon setting hideNavBar prop to true. as i do not have the code to your components, i am using a basic View with a Button for navigating between the stack's scenes.

    i have included a snack here so that you can take a look and see what went wrong. :)