React Navigation V5 + Redux Saga: How can I navigate from the Saga?

Question

Issue:

React Navigation V5 + Redux Saga: How can I navigate from the Saga? I've tried using CommonActions.navigate(), but that's not working. Am I missing something here?

I want to do all of the navigating through the saga incase something goes wrong in the saga, the user is not navigated to the screen.

React Navigation V5 Docs: CommonActions

Saga.js (Not Working):

// React Navigation: Sign Up
yield CommonActions.navigate('Sign Up');

Saga.js (Also Not Working):

// React Navigation: Sign Up
yield CommonActions.navigate({ name: 'Sign Up' });

AuthNavigator.js

// Auth Navigator
export const AuthNavigator = () => {
  return (
    <AuthStack.Navigator initialRouteName="Login">
      <AuthStack.Screen
        name="Login"
        component={Login}
        options={{
          headerShown: false,
        }}
      />

      <AuthStack.Screen
        name="Sign Up"
        component={SignUp}
        options={{
          headerShown: false,
        }}
      />

      <AuthStack.Screen
        name="Sign Up Confirm"
        component={SignUpConfirm}
        options={{
          headerShown: false,
        }}
      />

      <AuthStack.Screen
        name="Forgot Password"
        component={ForgotPassword}
        options={{
          headerShown: true,
          title: '',
        }}
      />

      <AuthStack.Screen
        name="Terms & Conditions"
        component={TermsAndConditions}
        options={{
          headerShown: false,
        }}
      />
    </AuthStack.Navigator>
  );
};

Answer 1

you can use react-native Navigation-Service from saga.

https://reactnavigation.org/docs/navigating-without-navigation-prop/