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

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

Thanks in advance.


Viewing all articles
Browse latest Browse all 30215

Trending Articles



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