Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Couldn't find a navigation object. Is your component inside a screen in a navigator?

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;
like image 212
Jagdish Suryawanshi Avatar asked Jan 04 '21 12:01

Jagdish Suryawanshi


People also ask

Can we nest a stack navigator inside a tab navigator?

Stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack. Stack navigators nested inside each screen of tab navigator - The tab bar is always visible. Usually pressing the tab again also pops the stack to top.

Why could not find a navigation object in a component?

Couldn’t find a navigation object. Is your component inside a screen in a navigator? This happens because the useNavigation hook needs to retrieve the navigation prop from a parent Screen component, and you’re most likely rendering the component in isolation.

Why is my component inside a screen in a navigator?

Is your component inside a screen in a navigator? This happens because the useNavigation hook needs to retrieve the navigation prop from a parent Screen component, and you’re most likely rendering the component in isolation. This leads to a test failure since the hook is not able to retrieve the navigation prop.

Why is my navigation hook not working?

Couldn’t find a navigation object. Is your component inside a screen in a navigator? This happens because the useNavigation hook needs to retrieve the navigation prop from a parent Screen component, and you’re most likely rendering the component in isolation. This leads to a test failure since the hook is not able to retrieve the navigation prop.

Why does the usenavigation hook fail to retrieve the navigation prop?

This happens because the useNavigation hook needs to retrieve the navigation prop from a parent Screen component, and you’re most likely rendering the component in isolation. This leads to a test failure since the hook is not able to retrieve the navigation prop. Don’t worry. There are a handful of ways to handle this.


1 Answers

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>
  );
}
like image 144
Idriss Sakhi Avatar answered Sep 18 '22 16:09

Idriss Sakhi