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

React native – Error: Couldn't find a navigation object. Is your component inside NavigationContainer? (how to use useNavigation inside Navigation container)

I am writing a react-native MERN chat app and I am adding a profile page so the user can edit or add his data.the
I want to access this page by a button and using useNavigation but I got the error ehich I mentioned in the title
NOTE: the button is inside the Navigation Container
My Code:

import React from 'react';
import storage from './storage';
import { useNavigation } from '@react-navigation/native'
import { NavigationContainer, Screen } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { LogBox, ActivityIndicator, Button, TouchableOpacity, View } from 'react-native';
import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
import Icon from 'react-native-vector-icons/Entypo';
import ProfileScreen from './Profile.Screen';
//rest of the imports...

const Stack = createNativeStackNavigator();

export default function App() {
  const [savedData, setSavedData] = React.useState(null)
  const [fetching, setFetching] = React.useState(false)
  const [receiver, setReceiver] = React.useState(null)
  const [visible, setVisible] = React.useState(false);

  const navigation = useNavigation();

  //rest of the code...

  return (
    <ThemeProvider>
      <NavigationContainer>
        <Stack.Navigator>
          {isSignedIn && <>
            <Stack.Screen name="Home" component={ChatList} initialParams={params} options={() =>    ({
              title: "myApp", headerRight:
                () => (
                  <View style={{ marginRight: 3 }}>
                    <Menu
                      visible={visible}
                      anchor={
                        <Icon
                          name="dots-three-vertical"
                          size={20}
                          color="black"
                          onPress={() => setVisible(true)}
                        />
                      }
                      onRequestClose={() => setVisible(false)}
                    >
                      <MenuItem onPress={navigation.navigate('Profile')}>My Profile</MenuItem> {/* this is the line*/}
                      <MenuItem onPress={changeTheme}>Change Theme</MenuItem>
                      <MenuItem onPress={() => handleLogout(user)}>Log Out</MenuItem>
                    </Menu>
                  </View>
                )
            })} />
            <Stack.Screen name="Chat" component={Chat} initialParams={params} options={() => ({ title: receiver })} />
            <Stack.Screen name="Users" component={UsersScreen} initialParams={params} />
            <Stack.Screen name="Profile" component={ProfileScreen} initialParams={params} options={{ title: 'My Profile' }} />
          </>}

          {!isSignedIn && <>
            <Stack.Screen name="SignIn" component={SignInScreen} initialParams={{ onSignIn }} options={() => ({ title: "myApp" })} />
            <Stack.Screen name="ForgotPassword" component={ForgetPassword} />
          </>}


        </Stack.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  )

}

I tried removing the quotations (I saw it as a solution in some place)(Instead of
navigation.navigate('Profile')
I used
navigation.navigate(Profile)
and I tried to remove the onPress function and still got the error based on
const navigation = useNavigation()
and I tried importing useNavigation beside NavigationContainer but nothing worked

I know this would’ve worked if there is no menu how can I do this with the menu
(NOTE: I know that it should’ve been wrapped by navigationContainer but I don’t know how)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up putting the menu in another component and import it to options. I am sharing because I found that this is the easiest way to solve this problem. Now the stack looks like this:

    enter image description here

    and this is the HeaderRight component return function:

    enter image description here


  2. 0

    Seems you have missed the line

    const Stack = createNativeStackNavigator();

    also no need of
    const navigation = useNavigation();

    you can get it inside Options callback

    <Stack.Screen name="Home" component={ChatList} initialParams={params} options={(navigation) => ({ title: "myApp", headerRight: // rest of your code

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search