How can I hide specific tab bar item according to login status?

image
image

Hello.
I am going to use different tab bars according to login status.


getLoginStatus = async () => {
  console.log("11111111111111")
  const result = await AsyncStorage.getItem(MyConstants.ASYNC_PARAMS.login_info)
  global.login_info = JSON.parse(result);
  console.log("22222222222222222: " + global.login_info.user_id);
  return result;
}


console.log("000000000000000");
getLoginStatus()

console.log("success------------- : " + global.login_info.user_id)

bottomTab = null;
if (global.login_info == null) {
  bottomTab = createBottomTabNavigator({
    HomeStack,
    ProductStack,
    IngredientStack,
    LoginStack,
    MyListStack,
    // MyPageStack,
  }, {
      backBehavior: "history",
      tabBarOptions: {
        activeTintColor: "#a695fe"
      }
    });
} else {
  bottomTab = createBottomTabNavigator({
    HomeStack,
    ProductStack,
    IngredientStack,
    // LoginStack,
    MyListStack,
    MyPageStack,
  }, {
      backBehavior: "history",
      tabBarOptions: {
        activeTintColor: "#a695fe"
      }
    });
}

export default bottomTab

I tried this way but not working
The log looks below.


How can solve this problem?