TypeError: undefined is not an object (evaluating 'navigation.replace') in react native

Question

I am using bottom tab navigator for my app in which I have used stack navigation for each tab. I have one notification icon on header on click of that I navigate to notification page. The notification page has that global header too in which on click of app logo it will go back to home page.

The header code works fine everywhere but when I click on logo on notification page it throws error of "TypeError: undefined is not an object (evaluating 'navigation.replace')"

And I find on logo.js file when I am on notification page the navigation object is blank otherwise any other screen I am getting notification object.

I have used same code for all the files but getting error only on this screen. Please help.

 <BottomTab.Screen
          name="Notifications"
          component={TabSixNavigator}
          options={{
            tabBarButton: () => (
              <View style={{ width: 0, height: 0 }}></View>
            ),
          }}
        />

       //Stack for Notification

        const TabSixStack = createStackNavigator<TabSixParamList>();

       function TabSixNavigator() {

      return (
         <TabSixStack.Navigator
          screenOptions={({navigation}) => ({
          headerStyle: { backgroundColor:  Colors.light.topBarColor },
          headerRight: () => (
      <GlobalHeader
        navigation={navigation} />
    ),

    headerLeft: () => (
      <GlobalLogo navigation={navigation} />
    ),
  })}
>

 <TabSixStack.Screen
    name="Home"
    component={Home}
    options={({navigation}) => ({
      title: null,
      headerShown: true,
      headerBackTitleVisible: false,
      headerTitleAlign: "center",    
      headerLeft: () => (
        <GlobalLogo navigation={navigation} />
      ),
    })}
  />


  <TabSixStack.Screen
    name="Notifications"
    component={Notifications}
    options={({navigation})=> ({
      title: null,
      headerShown: true,
      headerBackTitleVisible: false,
      headerTitleAlign: "center",    
      
    })}
  />



</TabSixStack.Navigator>
 );
 }

  //GLobalLogo.js

   export default function GlobalLogo({ navigation }) {

       <TouchableOpacity onPress={() => navigation.replace("Home")}>
      <Image source={require("../assets/images/fence.png")} alt="" />
    </TouchableOpacity>

    }

Answer 1

you will not receive navigation object from headerLeft or any other header configuration of react-navigation. There are 2 ways u can achieve this: first one is to write in line component like this:

        headerTitle: () => <Text>Register</Text>,
        headerRight: () => <Button title="Test" onPress={() => navigation.navigate('Home')} />,
        headerLeft: () => <Button title="back home" onPress={() => navigation.goBack()} />,

the second one is to use useNavigation hook of react-navigation if you have to make a separate header component. Also, this hook is introduced in React Navigation 5x.