How can I trigger navigation from actions file when using react-navigation v5 and redux inside my react-native app? Is there any preferable way on how to do this? When result is fulfilled I want to trigger the navigation to the next screen, but I can't use useNavigation(). Thanks.
2 Answers
Create a ref to the NavigationContainer
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './path/to/RootNavigation.js';
export default function App() {
return (
<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
);
}
Create a module RootNavigation.js to hold the ref
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
Now trigger navigation from any place using below:
import * as RootNavigation from './path/to/RootNavigation.js';
//...
RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });
Reference: https://reactnavigation.org/docs/navigating-without-navigation-prop/
2 Comments
cinemanja
Can I find somewhere version with typescript?
Sangeetha Krishna
I was also looking for the same solution. The answer helped me. Thank you (y)
Would this question help you? It seems that it was made by someone trying to accomplish a similar scenario to yours
