Double stack navigation headers

My app is showing 2 headers. I want only one header the tutorial I was following worked fine but not for me. the tutor was using react navigation v5, I am using v6. here’s the code that might wanna see. I have 3 screens 1 stack having two screens and the other having one. please help me fix it.

import * as React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./Screens/homeScreen";
import Archived from "./Screens/archived";
import NotesDetails from "./Screens/notesDetails";

const StackHome = createNativeStackNavigator();
const StackArchived = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

const HomeScreenStack = ({ navigation }) => {
  return (
    <StackHome.Navigator>
      <StackHome.Screen name="Home" component={HomeScreen} />
      <StackHome.Screen name="NotesDetails" component={NotesDetails} />
    </StackHome.Navigator>
  );
};

const ArchivedScreenStack = ({ navigation }) => {
  return (
    <StackArchived.Navigator>
      <StackArchived.Screen name="Home" component={Archived} />
    </StackArchived.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreenStack} />
        <Drawer.Screen name="NotesDetails" component={ArchivedScreenStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Answer

Stack navigators are able to take options (as props) that determine their behavior. You can use the headerShown prop to hide the header for a given stack navigator.

https://reactnavigation.org/docs/stack-navigator/#headershown

const HomeScreenStack = ({ navigation }) => {
  return (
    <StackHome.Navigator
      screenOptions={{ headerShown: false }}
    >
      <StackHome.Screen name="Home" component={HomeScreen} />
      <StackHome.Screen name="NotesDetails" component={NotesDetails} />
    </StackHome.Navigator>
  );
};

Advertisement

Answer