32

In My below code when I use useNavigation() then it gives an error like my quiestion How to use useNavigation, Please any one can solve this error... ERROR:Couldn't find a navigation object. Is your component inside a screen in a navigator? I followed code from here https://rnfirebase.io/messaging/notifications#handling-interaction

import React, {useState, useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createStackNavigator, HeaderTitle, } from "@react-navigation/stack";
const Stack = createStackNavigator();

function App(props) {
     const navigation = props.navigation
    //const navigation = useNavigation();
    const [initialRoute, setInitialRoute] = useState('Splash Screen');

    useEffect(() => {
        messaging().onMessage(remoteMessage => {
            navigation.navigate("Description Screen");
            console.log(props.navigation)
        });
    }, []);

    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName={initialRoute}
                headerMode="none"
                screenOptions={{
                    gestureEnabled: true,

                }}
            >

                <Stack.Screen name="Splash Screen" component={SplashScreen} />
                <Stack.Screen name="Description Screen" component={DescriptionScreen} />
            </Stack.Navigator>

        </NavigationContainer>

    );
}

export default App;
Jagdish Suryawanshi
  • 359
  • 1
  • 4
  • 13
  • Did you find any solution to this? I am stuck on the same problem. – Ankit Shah Jun 30 '21 at 13:27
  • 1
    always double check that `useNavigation` get imported from `"@react-navigation/native"` I faced this same error because I was importing it from `"@react-navigation/core"` – Guille Acosta Mar 22 '22 at 13:29
  • It is a bad pattern to try to use navigation object outside of NavigationContainer. NavigationContainer should be the only component to pass navigation object on all child components, just like Providers. Because the mechanism is handle by this component, therefore implement all logics inside of NavigationContainer instead. You can work around if App is simple, if not lot of future troubles awaiting. – KeitelDOG Feb 05 '23 at 00:04
  • Hey did you find any solution for it? I am also facing same problem – HaryanviDeveloper Apr 11 '23 at 09:56

1 Answers1

18

You can't access navigation because it's not ready yet. you can create Ref for your navigation then export it and use it where you want.

// App.js

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

`

Then you can use it by defining and exporting your method

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

any way you can use onReadycall back to say that your navigation is ready

// App.js

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef, isReadyRef } from './RootNavigation';

export default function App() {
  React.useEffect(() => {
    return () => {
      isReadyRef.current = false
    };
  }, []);

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        isReadyRef.current = true;
      }}
    >
      {/* ... */}
    </NavigationContainer>
  );
}
Idriss Sakhi
  • 267
  • 2
  • 5