native-stack of react-navigation 6 does not find a route object

Question

Under "react-navigation/stack" of react-navigation 6, It did well working all of function like useRoute, useNavigation..etc

But, I changed stack navigation to react-navigation/native-stack from react-navigation/stack.

native-stack does not found a route object in "GroupHeaders component"

Below my code.

1. Root navigation

import { createNativeStackNavigator, NativeStackHeaderProps } from "@react-navigation/native-stack";

const RootNavigation = createNativeStackNavigator();
    <NavigationContainer>
        <RootNavigation.Navigator>
          <RootNavigation.Screen
            name="Main-root"
            component={TabNavigation}
            options={{ headerShown: false }}
          />
        
          <RootNavigation.Screen
            name="PostDetail-root"
            component={PostDetailContainer}
            options={{ header: () => <GroupHeaders /> }}. // ***** HERE
          />
         // ...other screen...

2. Tab navigation

      <Tab.Navigator
        initialRouteName="home-tab"
        //...
        >
        <Tab.Screen
          name="home-tab"
          component={HomeNavigation}
          options={{
            headerShown: false,
            tabBarLabel: "Home",
            //...
          }}
        />

3. GroupHeaders component

const GroupHeaders = ({}) => {
  const route = useRoute(); //**** HERE, RN occurs error message of "~not find a route object~~" 
  // ... other code

Answer 1

you can use option paramter

reference document.

<RootNavigation.Screen
    name="PostDetail-root"
    component={PostDetailContainer}
    options={({ route }) => ({
    tabBarLabel: (props) => <GroupHeaders route={route} {...props}  />,
  })}/> // ***** HERE
/>

• use

  function GroupHeaders({route}) {
    console.log("route1",route);
    return (
        <Text>{route.name}</Text>
    )
  }