CODEWITHSUNDEEP
react-native
Dalitso kaputa
Dalitso kaputa

Reputation: 35

Dismissing the Drawer header when trying to show only the stack navigation header in react native

//am building a react native app, i have used both drawer navigation and stack navigation. The problem am having is that, both the drawer and stack navigation are providing their own headers. as a result its showing two headers in every screen, but i want to show only one in specific screens. How can i dismiss Drawer header where i only need the stack navigation header ??

                                      MainStack.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

//The pages to navigate between in stack
        
import {Home} from "../components/Home";
import {Notes} from "../components/Notes";

//Default Title holders
        
import * as DefaultTitle from "../components/DefaultTitles";

//Creating navigation constant 
        
const Stack = createStackNavigator();

export function MainStack(){
    return(
            <Stack.Navigator>
                <Stack.Screen
                    name={DefaultTitle.HomeTitle}
                    component={Home} 

      //Here i only need drawer header, so i have successfuly dismissed the stack header 

        options={{headerTitleAlign: "center", headerShown: false,}} />
            
                <Stack.Screen name="Notes" component={Notes} />
            </Stack.Navigator>
    );
}


                           DrawerStack.js

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";

//imported pages
import {MainStack} from "./MainStack";
import {AboutStack} from "./AboutStack";

//Default holders
import * as DefaultTitle from "../components/DefaultTitles";

//Creating navigation constant
const Drawer = createDrawerNavigator();

export default function DrawerStack(){
    return(    
        <Drawer.Navigator >
            <Drawer.Screen name="Home" component={MainStack}/>
            <Drawer.Screen name="About" component={AboutStack} />
        </Drawer.Navigator> 
    )
}

                          App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

//imported Main Route
import DrawerStack from "./navigationRoutes/DrawerStack";

export default function App() {
  return (
     <NavigationContainer>
        <DrawerStack />
     </NavigationContainer>
  );
}

Upvotes: 3

Views: 1405

Answers (1)

danw0001
danw0001

Reputation: 93

You can remove the headers from the drawer navigator by adding the following prop to the <Drawer.Screen /> component:

<Drawer.Screen options={{headerShown: false}} />

This will remove the header from the drawer screens inside the drawer navigator, and leave you with the stack navigator headers as you requested!

Edit: Even better, if you want to remove them from all screens completely, you can use the screenOptions prop on the navigator like so:

<Drawer.Navigator screenOptions={{headerShown: false}} />

This will remove all screen headers that are inside of the Drawer.Navigator parent!

Upvotes: 3

Related Questions