7

I am upgrading React Navigation library from 4.xx to 5 via https://reactnavigation.org/docs/en/upgrading-from-4.x.html and https://reactnavigation.org/docs/en/compatibility.html.

I am getting error:

NavigationDebug Error:  Error: The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. You can ensure that all navigators have mounted after the callback to 'useEffect' is called in your root component. See https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html#handling-initialization for more details.
    at dispatch (BaseNavigationContainer.tsx:202)
    at Object.acc.<computed> [as navigate] (BaseNavigationContainer.tsx:245)
    at Object.navigate (NavigationService.ts:20)
    at SplashScreen.redirectUser (splash-screen.tsx:234)
    at SplashScreen.proxiedMethod (createPrototypeProxy.js:44)
    at _callee2$ (splash-screen.tsx:298)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)

while creating NavigationService (https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html).

index.js

let Init = ((props) => {

    enableScreens();

    React.useEffect(() => {
        isMountedRef.current = true;

        return () => isMountedRef.current = false;
    }, [])

    return (
        <NavigationContainer ref={navigationServiceRef}>
            <Provider {...stores}>
                    <App {...props}/>
            </Provider>
        </NavigationContainer>
    );
})

AppRegistry.registerComponent(appName, () => Init);

NavigationService

import { NavigationActions, StackActions } from '@react-navigation/compat';

import React from 'react';

export const isMountedRef = React.createRef();

export const navigationServiceRef = React.createRef();

export function navigate(name, params) {
    if (isMountedRef.current && navigationServiceRef.current) {
        console.log("Navigation Should happen")
        try {
            navigationServiceRef.current.navigate("App", params);
        }catch(e){
            console.log("NavigationDebug Error: ", e)
        }
    } else {

    }
}

export default {
    navigate
};
1
  • "... while creating NavigationService" - are you sure that is when the error happens? Did your console log show "Navigation Should happen"? Commented Nov 20, 2020 at 22:57

3 Answers 3

1

"... while creating NavigationService" - are you sure that is when the error happens? Did your console log show "Navigation Should happen"?

Perhaps elsewhere you have a "navigate" call, that is executed before the logic shown above.

In your link - navigating without nav prop it suggests:

"import the RootNavigation" and "RootNavigation.navigate(...)"

That is, anywhere that "navigate" might be called before navigator is ready, replace navigate with RootNavigation.navigate. (Where RootNavigation is your module that contains the code shown in question. See link for further details.)

0

import :

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

then const Stack = createNativeStackNavigator();

<NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Homepage" component={Homepage}
            options={{
          title: 'Homepage',
          headerStyle: {
            backgroundColor: '#75C2F6',
          },
          headerTintColor: 'white',
        }} />

      <Stack.Screen name="Page_name_here" component={Page2}
        options={{
          title: 'Page_name_here',
          headerStyle: {
            backgroundColor: '#75C2F6',
          },
          headerTintColor: 'white',
        }} />
    </Stack.Navigator>
  </NavigationContainer>

Note : You can only wrap NavigationContainer with TailwindProvider and any custom Component. If you will wrap it will scrollView , then it will not work.

-2

For who is getting this error in a jest test. That's what I did...

const { getByTestId } = render(
        <NavigationContainer ref={navigationRef}>
          <ComponentHere {...props} />
        </NavigationContainer>
    );

const yourTextID = getByTestId('yourTextID');

setTimeout(() => {
      fireEvent.press(yourTextID);
}, 1000);
1
  • 2
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented May 26, 2022 at 6:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.