Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29516

React native navigation drawer is not covering header in my application

$
0
0

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>         );};

Please check the reference image here, I want left menu starts from header instead of below from header

For me the combination of both stack and drawer screens.Thanks in advance.


Viewing all articles
Browse latest Browse all 29516

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>