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
};
"Navigation Should happen"
?