I’m new to react native and got problem with Stack Navigator (I think) after trying to make some authenticated routes.

Here is my App.tsx:

const App = () => {
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
};

AppNavigator.tsx:

const AppNavigator = () => {
  const { isAuthenticated } = useSelector((state) => state.auth);

  React.useEffect(() => {
    store.dispatch(loadUser());
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      {isAuthenticated === false ? (
        <NavigationContainer>
          <Header />
          <Authenticated />
          <BottomNavigationBar />
        </NavigationContainer>
      ) : (
        <NavigationContainer>
          <Header />
          <Main />
          <BottomNavigationBar />
        </NavigationContainer>
      )}
    </SafeAreaView>
  );
};

Authenticated.tsx

const Authenticated = () => {
  const Stack = createNativeStackNavigator();

  return (
    <Stack.Navigator
      initialRouteName="MainPage"
      screenOptions={{
        headerTitle: '',
        headerStyle: { backgroundColor: '#f7f7f7' },
      }}
    >
      <Stack.Screen
        name="MainPage"
        component={MainPage}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Signup" component={Signup} />
      <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
      <Stack.Screen name="Search" component={SearchResult} />
    </Stack.Navigator>
  );
};

Main.tsx:

const Main = () => {
  const Stack = createNativeStackNavigator();

  return (
    <Stack.Navigator
      initialRouteName="MainPage"
      screenOptions={{
        headerTitle: '',
        headerStyle: { backgroundColor: '#f7f7f7' },
      }}
    >
      <Stack.Screen
        name="MainPage"
        component={MainPage}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen name="UserProfile" component={UserProfileScreen} />
      <Stack.Screen name="Cart" component={Cart} />
      <Stack.Screen name="ChangePassword" component={ChangePassword} />
      <Stack.Screen name="Checkout" component={Checkout1} />
      <Stack.Screen name="Shipping" component={Shipping} />
      <Stack.Screen
        name="PaymentSuccess"
        component={PaymentSuccess}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="StripePayment"
        component={StripePayment}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen name="EditProfile" component={EditProfile} />
      <Stack.Screen
        name="OrderScreen"
        component={OrderScreen}
        options={{ detachPreviousScreen: false }}
      />
      <Stack.Screen
        name="OrderDetails"
        component={OrderDetails}
        options={{ detachPreviousScreen: false, freezeOnBlur: false }}
      />
      <Stack.Screen name="Product" component={Product} />
      <Stack.Screen name="Signup" component={Signup} />
      <Stack.Screen name="Search" component={SearchResult} />
    </Stack.Navigator>
  );
};

export default Main;

And my loadUser reducer:

export const authReducer = (state = { user: {} }, action) => {
  switch (action.type) {
    case LOGIN_REQUEST:
    case REGISTER_REQUEST:
    case LOAD_USER_REQUEST:
      return {
        loading: true,
        isAuthenticated: false,
      };

    case LOGIN_SUCCESS:
    case REGISTER_SUCCESS:
    case LOAD_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        isAuthenticated: true,
        user: action.payload,
      };

    case LOAD_USER_FAILED:
      return {
        loading: false,
        isAuthenticated: false,
        user: null,
        error: action.payload,
      };

    case LOGIN_FAILED:
    case REGISTER_FAILED:
      return {
        ...state,
        loading: false,
        isAuthenticated: false,
        user: null,
        error: action.payload,
      };

    case LOGOUT_SUCCESS:
      return {
        loading: false,
        isAuthenticated: false,
        user: null,
      };

    case LOGOUT_FAILED:
      return {
        ...state,
        error: action.payload,
      };

    case CLEAR_ERRORS:
      return {
        ...state,
        loading: false,
        error: null,
      };

    default:
      return {
        ...state,
        loading: false,
      };
  }
};

I think it involves in the state but isAuthenticated is the way I know to logged in or not. Can you guys explain to me.

I’m super thank to your helps. I’m still a learner. Thank a lot for your supports.