re render navigator screen in react navigation

Question

Hi I am using React Navigation (v:6) in my React Native app for navigation. I have a StackNavigator like the following.

const AppStackNavigator = createStackNavigator<AppStackParamList>();

export const AppStack = () => {
  const loggedIn = useSelector((state: AppState) => state.auth?.data?.accessToken ?? null);
  return (
    <AppStackNavigator.Navigator headerMode="none" mode="modal">
      {loggedIn && (
        <AppStackNavigator.Screen name={routes.OnboardingStack.MAIN_TABS} component={MainTabs} />
      )}
      <AppStackNavigator.Screen name={routes.appStack.MainStack} component={MainStack} />
    };

I am trying to have the MainTabs when the user has logged in. But when the user has logged in and navigated to the Home screen which is in the MainStack I don't see the MainTabs at the bottom. But If I reload the app from the debugger menu, I can see the MainTabs at the bottom of the screen.

I think React Navigation is using some sort of optimization to prevent re-render, Is there a way to forcefully re-render a stack in react navigation? Or any other solution?

re render navigator screen in react navigation

0 Answers0