How to use useNavigation() Hook in Redux actions React Native - react-native

Question

I want to navigate user from my redux actions. For example when they
click on login, they navigate from action
.
Two ways i have tried.
1.pass navigation prop from component to action. (it works fine.)
2. use useNavigation() hook in redux actions. (it is not working. (Hooks can only be called inside of the body of a function component)).
Here is my code
action.js
export const registerUser = (data) => {
const navigation = useNavigation()
return async dispatch => {
dispatch(authLoading());
try {
const res = await axios.post(
`${BASE_URL}/mobilesignup`,
data,
{
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
},
);
console.log(res);
dispatch(registerSuccess(res));
navigation.navigate('dashboard')
} catch (err) {
dispatch(authFailed(err));
}
};
};
This code is not working
Error (Hooks can only be called inside of the body of a function
component)
Can anybody help me how can i use useNavigation() in redux actions ?
Thanks

Answer 1

You will have to use the Navigation ref which is there for purposes like calling from the reducer
The idea is to create a navigation.js and set the reference of navigation container and use it.
Code would be like below. (A sample from documentation)
//App.js
import { NavigationContainer } from '#react-navigation/native';
import { navigationRef } from './RootNavigation';
export default function App() {
return (
<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
);
}
// RootNavigation.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
You can simply import the navigation js anywhere and call navigate
Documentation
https://reactnavigation.org/docs/navigating-without-navigation-prop/#handling-initialization

Answer 2

According to the documentation of react-navigation v6.x
Define your rootNavigation module as followed:
// RootNavigation.ts
import { createNavigationContainerRef } from "#react-navigation/native";
const navigationRef = createNavigationContainerRef();
export class RootNavigation {
static navigate(name: string, params: any = {}) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
static get ref():any {
return navigationRef;
}
}
Pass the reference to NavigationContainer located at the root of your App.
// App.js
import { NavigationContainer } from '#react-navigation/native';
import { navigationRef } from './RootNavigation';
export default function App() {
return (
<NavigationContainer ref={RootNavigation.ref}>{/* ... */}</NavigationContainer>
);
}
Then simply use it at an action creator
// any js module
// ...
RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });