Passing parameter to bottom tab component in react native navigation 6-CodePudding

i have code like below

   const Project = ({ navigation, route }) => {
      const id = route.params.itemId;
        return (
        <Stack.Navigator >
          <Stack.Screen
            name="ProjectMain"
            component={TopNav}
            initialParams={{ id: id }}
          />
        </Stack.Navigator>
      );
    };

Now how do i pass initialParams to my component TopNav

my TopNav is like below

const TopNav = (props) => {
  console.log(props);
  console.log(props.route);

   return (
    <>
     //my tab screens
    </>
  );
};

I am not able to get the params here , its always undefined ,how do i pass something to my TopNav component , thank you

CodePudding user response：

This looks correct to me.

Can you double check that id (line 2 in Project) is not undefined?

What is the output of props.route? It should be an object with key, name, params, and path

Can you try using:

const TopNav = () => {
  const route = useRoute()
  console.log(route);

   return (
    <>
     //my tab screens
    </>
  );
};

CodePudding user response：

Use options.

<Stack.Screen
   name="ProjectMain"
   component={TopNav}
   options={{
      id: 'Awesome app',
    }}
/>