Pass navigation in props to menu element in React Native and React Navigation

usercVE5 0
Viewed 72

I'm adding a menu to every screen navigation header, so created a menu function that needs the navigation object to navigate to different screens based on the menu item tapped. But the navigation.navigate from props is undefined.

export default function GeneralMenu(props) {
    const [showMenu, setShowMenu] = useState(false);

  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <MaterialCommunityIcons
              name="menu"
              size={30}
              style={{ color: 'white' }}
            />
          </TouchableOpacity>
        }>
        <Menu.Item onPress={() => { console.log(props.navigation)}} title="Screen1" />
        <Menu.Item onPress={() => {props.navigation.navigate('Screen1', {})}} title="Screen1" />
      </Menu>
    </View>
  );

Then I use it like this:

return (
    <Provider>    
        <NavigationContainer>
          
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={HomeComponent}
              options={{ title: 'Home',
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerStyle: {
                  backgroundColor: 'red'
                },
                headerRight: (navigation) => <GeneralMenu navigation={navigation} />,
              }}
            />
            ... 
            ...
        </NavigationContainer>
    </Provider>
);

The console.log() when first menu item is tapped shows:

Object {
  "canGoBack": false,
  "tintColor": "#fff",
}

As you see there is no navigate property. Please, any idea what I'm doing wrong?

react-navigation react-native reactjs javascript
3 Answers

To get navigation.navigate() you would wanna use the function syntax of options, which receives an object that contains navigation, like so:

<Stack.Screen
  name="Home"
  component={HomeComponent}
  options={({ navigation }) => ({
    title: "Home",
    headerTitleAlign: "center",
    headerTintColor: "#fff",
    headerStyle: {
      backgroundColor: "red",
    },
    headerRight: () => <GeneralMenu navigation={navigation} />,
  })}
/>
yousoumar0

its happen because u shadowing name props, it should be

<Menu.Item onPress={() => { console.log(props.navigation)}} title="Screen1" />

<Menu.Item onPress={() => {props.navigation.navigate('Screen1', {})}} title="Screen1" />

Also

header right doesn't have navigation props It should be like this

return (
    <Provider>    
        <NavigationContainer>
          
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={HomeComponent}
              options={(navigation) => {
return { title: 'Home',
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerStyle: {
                  backgroundColor: 'red'
                },
                headerRight: () => <GeneralMenu navigation={navigation} />,
              }
}}
            />
            ... 
            ...
        </NavigationContainer>
    </Provider>
);
TimoDevs0

I'm not sure why you are passing navigation through props. But for react-navigation to navigate to other screens (even from the components that are not screen themselves), you don't need to pass them through props.

You can basically access navigation object itself by using useNavigation hook like this:

const navigation = useNavigation();

and then wherever you need to use it, you can use it normally like:

navigation.navigate(Screen name goes here);
userektt0
Related