React Native - Drawer Navigation неправильно отображает маршруты для аутентификации. Вместо этого визуализирует строки внутри навигационной панели

Question

Я пытаюсь настроить аутентификацию для своего собственного собственного реагирующего приложения, я следовал учебнику Реагировать на навигационные потоки , и он работает для маршрутизации, но при входе или выходе пользователя маршруты отображаются как "AuthStack "AdminStack" и т. Д.

Вот снимок экрана:

Изображение проблемы

Это обычно происходит, когда пользователи входят в систему / выходят из системы и открывают навигациюочень быстро.

Вот мой AppStack:

constructor() {
    super();
    this._bootstrapAsync();
  }
  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const loggedin = await AsyncStorage.getItem('loggedin')
    const userLogged = await AsyncStorage.getItem('user');
    if (loggedin) {
      const user = JSON.parse(userLogged)
      const admin = user.auth_lvl > 0 ? true : false
      if (admin) {
        this.props.navigation.navigate('AdminStack');
      } else{
        this.props.navigation.navigate('UserStack');
        return
      }
    }else {
      this.props.navigation.navigate('AuthStack');

Вот мой ящик. Опции:

const AuthStack = createDrawerNavigator(
  {
    Login: Login,
    Register: Register,
    Home: Home,
    Products: Products,
    Product: Product,
  },
drawerOptions
)
const UserStack = createDrawerNavigator(
  {
    Home: Home,
    Products: Products,
    Product: Product,
    Orders: Orders,
  },
drawerOptions
)
const AdminStack = createDrawerNavigator(
  {
    Home: Home,
    Products: Products,
    Product: Product,
    Orders: Orders,
    AddProduct,
    ModifyProduct
  },
drawerOptions
)
const RootStack = createDrawerNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    AuthStack: AuthStack,
    UserStack: UserStack,
    AdminStack: AdminStack
  },
drawerOptions
);
export default createAppContainer(RootStack);

Мой логин:

 axios
      .post("mywebsite.com/api/signin", {
        email,
        password,
        api_token: 12345
      })
      .then(async res => {
        setLoading(false);
        const validUser = res.data;
        if (validUser !== "invalid") {
          await setLogged(true);
          await AsyncStorage.setItem('loggedin', 'true')
          await setAuthUser(validUser);
          console.log('validuser', validUser);
         save(res.data);
          return;
        }
        setMessage("Invalid Credentials");

Мой выход:

  logout = async () => {
    try {
      await AsyncStorage.clear();
      await setLogged(false);
      await setAuthUser(null)
      nav("AuthStack");
    } catch (err) {
      alert(err);
    }
  };

После закрытия панели навигации строки исчезают и отображаются обычные маршруты. Это известная проблема? Как мне исправить это? Как я могу предотвратить отображение маршрутов, пока не будет решена аутентификация? Спасибо заранее!