React Native Navigation with Redux Toolkit

Question

Mavens,

I am using Redux Toolkit v @reduxjs/toolkit": "^1.4.0" in my React Native v "react-native": "0.63.1" with "@react-navigation/native": "^5.1.5" as Navigation Library

I have a Stack Navigator with the below two screens lets say

1. Login
2. Forgot Password.

Login is the default screen that has a link to Forgot Password Screen.

This seems to be working fine.

In my Forgot Password screens, let's say, I am doing an API call, and based on the response of the API I need to show a toast message and stay on the Forgot Password Page or Show/Don't Show the toast message but navigate back to the Login Page.

Both my Login and Forgot Password Screen are functional Components.

To keep it simple, here is the extract of my Forgot Password Screen. When the dispatch is fired the API is called (redux-thunk) and the response of the API is stored in my Slice. I am trying to understand how do I show/don't show the toaster on Forgot Password Screen and then navigate/don't Navigate from this screen.

As the Navigation is based on Stack Navigator, for now, irrespective of the response it navigates away to the Login Screen because of my Root Navigation logic

 <NavigationContainer>
      {loggedIn ? <MainTabNavigator /> : <AuthNavigator />}
    </NavigationContainer>

Forgot Password Screen:

<Formik
  initialValues={{ email: "" }}
  onSubmit={(values) => {
    dispatch(forgotPassword(values.email));
  }}
>
  {(props) => (
    <View>
      <View style={styles.section_Email}>
        <Input label="Email" value={props.values.email} />
      </View>
      <View style={{ flexDirection: "row" }}>
        <Button caption="Send Email" onPress={props.handleSubmit} />
      </View>
    </View>
  )}
</Formik>

Answer 1

You can make a ToastContainer component and then

<ToastContainer>
  <NavigationContainer>
    { loggedIn ? <MainTabNavigator /> : <AuthNavigator /> }
  </NavigationContainer>
</ToastContainer>

pull this loggedIn from redux-store (via useSelector) and trigger the toast from forgotPasssword reducer and also update the loggedIn accordingly.