React Native 5 navigation param

Question

I was following the documentation for navigation

I made 2 pages first page login page with a login button that send param username to next page which is homepage

export default function LoginScreen({navigation}) {
    const [username,setUsername] = useState('loginwithusername')
    const [password,setPassword] = useState('')

    function Login(){
        navigation.navigate('HomeScreen', {
                itemId: 86,
                 otherParam: username,
        });
    } 

and this is on second page, the homepage there is this button that suppose to get param but following the documentation i got errors

export default function HomeScreen({ route, navigation }) {

    function button01(){
        console.log(navigation)
        console.log(route)
    }

so i just write those first, and what I got from console.log(route) is

Object {
  "key": "Home-Xb5s",
  "name": "Home",
  "params": undefined,
}

how do i suppose to get params from it ?

and this is the stack navigation component

export default function App() {


function onPressLogo(){
    alert('Vae')
}

  return (
<SafeAreaProvider>
        <Provider store = {store}>
          <AppearanceProvider>
           <NavigationContainer theme={scheme === 'dark' ? DefaultTheme : DefaultTheme}>
              <Stack.Navigator initialRouteName='Tab1Screen'
                screenOptions={{
                  headerShown: true,
                  headerLeft: null
                }}
              >
                <Stack.Screen name="LoginScreen" component={LoginScreen} 
                  options={{
                    headerTitle:(props)=>(
                    <TouchableHighlight onPress={() => onPressLogo()}>
                    <Image
                      style={{ width:Dimensions.get('window').width/5 , height:Dimensions.get('window').height, }}
                      source={require('./assets/images/vae200.png')}
                      resizeMode='contain'
                    />
                    </TouchableHighlight>
                    ),
                    headerTitleStyle: { flex: 1, textAlign: 'center' },
                    headerStyle: {
                        backgroundColor: Theme.colorTopTab.color,
                    },
                    headerTintColor: '#fff',
                  }}
                />

                <Stack.Screen name="HomeScreen" component={BottomTabNavigator1}
                  options={{
                    headerTitle:(props)=>(
                    <Image
                      style={{ width:Dimensions.get('window').width/5, height:Dimensions.get('window').height, }}
                      source={require('./assets/images/vae200.png')}
                      resizeMode='contain'
                    />
                    ),
                    headerTitleStyle: { flex: 1, textAlign: 'center' },
                    headerStyle: {
                    backgroundColor: Theme.colorTopTab.color,
                    },
                    headerTintColor: '#fff',
                  }}
                />
              </Stack.Navigator>
            </NavigationContainer>
          </AppearanceProvider>
        </Provider>
    <StatusBar />
</SafeAreaProvider>
  );
}




function BottomTabNavigator1() {
  return (
    <Tabs.Navigator
        tabBarOptions={
            {
                activeTintColor: Theme.iconColorBottomTab.color,
                inactiveTintColor: "red",
                activeBackgroundColor : Theme.activeColorBottomTab.color
            }
        }
        apperance={
            {
                whenInactiveShow : "both"
            }
        }
    >

        <Tabs.Screen name="Home" component={HomeScreen}
        options={
            {
                tabBarIcon: ({ focused, color, size }) => (
                    <Icon
                        name="home"
                        size={Theme.fontBottomTab.fontSize}
                        focused={focused}
                        color={Theme.iconColorBottomTab.color}
                    />
                )

            }
        }/>
        <Tabs.Screen name="default0" component={DefaultScreen}
        options={
            {
                tabBarIcon: ({ focused, color, size }) => (
                    <AntDesign
                        name="bars"
                        size={Theme.fontBottomTab.fontSize}
                        focused={focused}
                        color={Theme.iconColorBottomTab.color}
                    />
                )
            }
        }/>
        <Tabs.Screen name="default1" component={DefaultScreen1}
        options={
            {
                tabBarIcon: ({ focused, color, size }) => (
                    <AntDesign
                      name="barschart"
                      size={Theme.fontBottomTab.fontSize}
                      focused={focused}
                      color={Theme.iconColorBottomTab.color}
                    />
                )
            }
        }/>
    </Tabs.Navigator>
  )
}

Answer 1

please create a new file named navigator and here how you can use the Tab navigator with the Stack navigator:

const HomeStack = createStackNavigator();
const AnotherStack = createStackNavigator();

const HomeStackNavigator = ({ navigation }) => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="LoginScreen"
        component={LoginScreen}
      />
      <HomeStack.Screen
        name="HomeScreen"
        component={HomeScreen}
      />
    </HomeStack.Navigator>
  );
};

const AnotherStackNavigator = ({ navigation }) => {
  return (
    <AnotherStack.Navigator>
      <AnotherStack.Screen
        name="AnotherScreen"
        component={AnotherScreen}
      />
    </AnotherStack.Navigator>
  );
};

and here is the Tab Navigator

const Tab = createMaterialBottomTabNavigator();

const MainTabScreen = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="HomeStackNavigator"
        component={HomeStackNavigator}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcon name="home" color={color} size={26} />
          ),
        }}
      />
     <Tab.Screen
        name="AnotherStack"
        component={AnotherStackNavigator}
        options={{
          tabBarLabel: 'Another Tab',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcon name="home" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

and then we need to export the tab nav to use it under Navigation Container in the main js file:

export default function mainNav() {
  return <MainTabScreen />;
}

now you can navigate from screen to another using the screen name when you are in the tab screen and if you want to navigate to another tab screen you should use this way to navigate:

navigation.navigate('HomeStackNavigator',
{
        screen: 'HomeScreen',
        params: { id: 123},
      });

and if you are in same tab screen use the same way you did:

navigation.navigate('HomeScreen', 
    {id: 123} //this is the params
);

you can access the params using:

route.params?.id // "?" is to check if the params is undefined to avoid throwing an error

hope this will help you 🙏

Answer 2

As you are using nested navigators, you can get the params bu using dangerouslyGetParent.

You need to use it as many times as the navigator which will receive the params is nested deep.

navigation.dangerouslyGetParent().getParam('your_param')