Drawer not covering header in react-navigation - reactjs

Question

Hi friends I am scratching my head with react-navigation from last 2 days, I tried many things(documentation doesn't seems that clear for a beginner), so right now I am facing few problem that seems little complex to me and hence I seek advice and help to proceed further.following are the cases/problem/scenario I seek help for -
react-navigation does not cover the header and statusbar, I wanted to achieve something like gmail but I ended up with like this
I used following code blocks to reach to this point
import React, {Component} from 'react';
import { AppRegistry, View, BackAndroid, StatusBar,} from 'react-native';
import {
NavigationActions,
addNavigationHelpers,
StackNavigator,
DrawerNavigator
} from 'react-navigation';
import LandingScreen from 'src/screens/landingScreen';
import Login from 'src/screens/login'
import SignUp from 'src/screens/signUp'
import ForgotPassword from 'src/screens/forgotPassword'
import Dashboard from 'src/screens/dashboard'
import UserProfile from 'src/screens/userProfile'
export const Drawer = DrawerNavigator({
Dashboard:{
path:'/',
screen:Dashboard,
},
UserProfile:{
path:'/'
screen:UserProfile
},
}, {
initialRouteName: 'Dashboard',
contentOptions: {
activeTintColor: '#e91e63',
},
headerMode: 'screen',
});
const routesConfig = {
Landing:{screen:LandingScreen},
Login: { screen: Login },
SignUp: { screen: SignUp },
ForgotPassword: { screen: ForgotPassword },
Drawer:{screen:Drawer}
};
export const AppNavigator = StackNavigator(routesConfig, {
initialRouteName: 'Drawer'
});
AppRegistry.registerComponent('Riduk', () => AppNavigator);
Other problem is how should I add 2 drawers in my app at the same screen

Answer 1

Here is a simplified example:
const FooStackNavigator = StackNavigator({
Foo: {
screen: FooScreen,
navigationOptions: {
title: 'Foo',
}
},
});
const BarStackNavigator = StackNavigator({...});
const MyDrawerNavigator = DrawerNavigator({
FooStack: {
screen: FooStackNavigator,
navigationOptions: {
drawer: () => ({
label: 'Foo',
})
},
},
BarStack: {
screen: BarStackNavigator,
navigationOptions: {
drawer: () => ({
label: 'Bar',
})
},
}
});
const AppNavigator = StackNavigator({
Drawer: { screen: MyDrawerNavigator },
}, {
headerMode: 'none',
});

Answer 2

There is an issue for Header in DrawerNavigator.
But you can fix by using StackNavigator inside DrawerNavigator
export const Drawer = DrawerNavigator({
Dashboard:{
path:'/',
screen: StackNavigator( { Screen1: {
screen: Dashboard
}})
},
UserProfile:{
path:'/',
screen: StackNavigator( { Screen1: {
screen: UserProfile
}})
},
}});
Then set headerMode: 'none' to root StackNavigator
export const AppNavigator = StackNavigator(routesConfig, {
headerMode: 'none'
});
Here, AppNavigator is root StackNavigator and routesConfig has above DrawerNavigator and other screens.

Answer 3

Is this the issue you're trying to resolve?
https://blog.callstack.io/android-drawer-statusbar-done-right-for-react-native-7e85f01fc099

Answer 4

As per my knowledge, you have to do 2 things:
1. Put drawer control at the top of navigation stack.
2. Set translucent propery of StatusBar
<StatusBar
translucent
backgroundColor="rgba(0, 0, 0, 0.24)"
animated
/>
{ Platform.OS === 'android' && Platform.Version >= 20 ?
<View
style={{
height: 24,
backgroundColor: "#512DA8",
}}
/>
: null }
Kindly let me know if it does work.

Answer 5

DrawerNavigator must over on StackNavigator, this is my way to fix this:
const navStack = StackNavigator({
Home: { screen: Main, },
Example01: { screen: Example01, },
Example02: { screen: Example02, },
});
const navDrawer = DrawerNavigator({
Home: {
screen: navStack, // Drawer over on StackNavigator
navigationOptions: {
drawerLabel: 'Home',
header: null,
}
},
Example03: {
screen: Example03,
navigationOptions: {
drawerLabel: 'Example03',
}
},
},
{
headerMode: 'none',
headerVisible: false,
navigationOptions: {
header: null
}
});
Hope this helps.