Navigation bar not visible when using drawer menu

[Manuel83]

Version

"react-native-drawer": "^2.3.0",
"react-native-router-flux": "^3.36.0",
"react-native": "0.36.0",

I try to add a Drawer menu to my app. I took the code from the documentation. If I add the NavigationDrawer component to the wrapping scene element the navigation bar isn't displayed.

Any idea what's wrong in my code?

export default class App extends Component {
  render() {
    return (
        <View style={{ flex: 1 }}>
            <StatusBar
              backgroundColor="#ffffff00"
              barStyle="light-content"
              translucent
            />
            <Provider store={store}>
            <RouterWithRedux>
              <Scene key="drawer" open={true} >
                <Scene key="main" initial={true} component={Main} title="My APP"/>
                <Scene key="page1" component={Page1} title="Page 1"/>
              </Scene>
              </RouterWithRedux>
            </Provider>
          </View>
    )
  }
}

Drawer Navigation Code

export default class NavigationDrawer extends Component {
    constructor(props){
        super(props);
    }

    render(){
         const state = this.props.navigationState;
         const children = state.children;
         return (
             <Drawer
                 ref="navigation"
                 open={state.open}
                 onOpen={()=>Actions.refresh({key:state.key, open: true})}
                 onClose={()=>Actions.refresh({key:state.key, open: false})}
                 type="displace"
                 content={<SideMenu />}
                 tapToClose={true}
                 openDrawerOffset={0.2}
                 panCloseMask={0.2}
                 negotiatePan={true}
                 tweenHandler={(ratio) => ({
                  main: { opacity:Math.max(0.54,1-ratio) }
             })}>
                 <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
             </Drawer>
         );
     }

}

If I remove the DrawerNavigation form the first scene element the navigation bar is displayed again.

[Manuel83]

I figured out that I have to wrap my sub scences with a "empty" scene. (...)
With this tiny thing of boilerplate code it's working now.

export default class App extends Component {
  render() {
    return (
        <View style={{ flex: 1 }}>
            <StatusBar
              backgroundColor="#ffffff00"
              barStyle="light-content"
              translucent
            />
            <Provider store={store}>
            <RouterWithRedux getSceneStyle={getSceneStyle}>
              <Scene key="drawer" component={NavigationDrawer}>
              <Scene key="wrapper">
                <Scene key="main" initial={true} component={Main} title="My APP"/>
                <Scene key="page1" component={Main} title="Page 2"/>
                </Scene>
              </Scene>
              </RouterWithRedux>
            </Provider>
          </View>
    )
  }
}

In general it's document because the example is using tabs in the sub views. My sub view is not using tabs. I think it's valuable if the documentation would contain this small hint.

https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md#drawer-side-menu-integration

[xhou]

I got the issue today and used your solution to resolve. Thank you.

[preetampatil3d]

hello @Manuel83 , can you please share sample code for above.