I am new to react native development, but i have some requirement with react navigation drawer. I want to display the navigation drawer from top of the screen but it is display below from toolbar. It is a combination of both Stack and Drawer screens. Following is my code in App.js
function App() { SplashScreen.hide() return (<NavigationContainer> {/* headerMode='float' */}<Stack.Navigator initialRouteName='Login'><Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} /> {/* <Stack.Screen name="Home" component={HomeScreen} /> */}<Stack.Screen name="DrawerScreens" component={DrawerScreens} options={({ navigation, route }) => ({ title: "Home", headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'}, headerLeft: props => <NavigationDrawerStructure navObj={navigation} />, })} /><Stack.Screen name="Dashboard" component={Dashboard} options={({ route }) => ({headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'}})} /></Stack.Navigator></NavigationContainer>
DrawerScreens function is like following..
function DrawerScreens({ route, navigation }) { // console.log("param:"+route.params.token) return ( //drawerContent={props=>CustomDrawerContent(props)} // <SafeAreaProvider><Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="float"> {/* <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}> */} {/* options={{ drawerLabel: 'Updates' }} */}<Drawer.Screen name="LandingScreen" component={LandingScreen} initialParams={{ token: route.params.token }}/> );}
CustomDrawer function contains list of the menu items which is dynamic and NestedMenuView is taking care of that..
function CustomDrawerContent(props) { return (<SafeAreaView style={{flex: 1}} forceInset={{ top: "always" }}><NestedMenuView navObj={props.navigation} /></SafeAreaView> );};
For me the combination of both stack and drawer screens.Thanks in advance.