React Navigation: The 'navigation' object hasn't been initialized yet

Question

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
};

Answer 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.)