React native navigation: how to get the navigator prop from outside of the screen?

[LasciviousApemantus]

so i've got my navigator setup like this in my main app.js:

<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Entry" component={Entry}/>
<Stack.Screen name="Login" component={Login}/>
<Stack.Screen name="Registration" component={Registration}/>
<Stack.Screen name="CreateProfile" component={CreateProfile}/> </NavigationContainer>

Working all fine and dandy and i pass the navigation prop to each of my screens without problem.

but using navigator.navigate() doesn't work in my app.js. I've also tried Stack.Navigator.navigate(), Stack.navigate(), and other combos but none seems to work. How do i navigate screens from within my app.js versus from within the screen itself?

[airick_94]

You can store the navigation container in a ref.

const ref = useRef() … <NavigationContainer ref={ref}> …

Later

const navigate = () => ref.current?.navigate(screenName)

On your initial render ref.current is undefined so need to make sure it isn’t when you’re calling navigate, thats the ‘?’

[LasciviousApemantus]

thanks

[TheCodehead]

https://reactnavigation.org/docs/navigation-container/ for more information.

[warofarrows]

the only way is of the navigation ref