React native navigation showing both stacks while condition is used

Question

I have two stack navigators for my app. Only one should show up, based of the isLoggedIn condition. However, both show when isLoggedIn = true . But when I set the condition to false , it only shows app. I simply dont get it.

export default function App() {
 const isLoggedIn = true;
 return (
  <NavigationContainer>
      <Stack.Navigator>
          {isLoggedIn === true ? (
          <Stack.Screen name="Auth" component={AuthStackNavigator} />
          ) : (
          <Stack.Screen name="App" component={AppBottomTabNavigator} />
          )}
      </Stack.Navigator>
  </NavigationContainer>
);
}

When isLoggedIn is set to true

When isLoggedIn is set to false

Answer 1

Could you try this.

export default function App() {
 const isLoggedIn = true;
 return (
  <NavigationContainer>
      <Stack.Navigator>
          {isLoggedIn === true  && <Stack.Screen name="Auth" component={AuthStackNavigator} />}
         {isLoggedIn === false && <Stack.Screen name="App" component={AppBottomTabNavigator} />}
      </Stack.Navigator>
  </NavigationContainer>
);
}