Question 34775 in React native Question posted in
The official React Native documentation can be found here.

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

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?

Tags:

3

Answers


  1. 0

    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>
);
    Login or Signup to reply.
  2. 0

    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);
    Login or Signup to reply.
  3. 0

    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} />,
  })}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search