How to use AsyncStorage in createBottomTabNavigator with React Navigation?

Question

I work with react-navigation v3 and I want to use AsyncStorage in createBottomTabNavigator for checking if user logged.

I save key to Stoage in LoginScreen:

await AsyncStorage.setItem('@MyStorage:isLogged', isLogged);

And I want to use AsyncStorage in my stack (TabStack):

const TabStack = createBottomTabNavigator(
  {
    Home: { screen: HomeScreen, },
    // I need isLogged key from AsyncStorage here!
    ...(false ? {
      Account: { screen: AccountScreen, }
    } : {
      Login: { screen: LoginScreen, }
    }),
  },
  {
    initialRouteName: 'Home',
  }
);

How I can do it?

My environment:

• react-native: 0.58.5
• react-navigation: 3.3.2

Answer 1

The solution is: create a new component AppTabBar and set this in tabBarComponent property

const TabStack = createBottomTabNavigator({
    Home: { screen: HomeScreen, },
    Account: { screen: AccountScreen, }
},
{
  initialRouteName: 'Home',
  tabBarComponent: AppTabBar, // Here
});

And AppTabBar component:

export default class AppTabBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLogged: '0',
    };
  }

  componentDidMount() {
    this._retrieveData();
  }

  _retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem('isLogged');
      if (value !== null) {
        this.setState({
          isLogged: value,
        });
      }
    } catch (error) {
      // Error retrieving data
    }
  };

  render() {
    const { navigation, appState } = this.props;
    const routes = navigation.state.routes;
    const { isLogged } = this.state;

    return (
      <View style={styles.container}>
        {routes.map((route, index) => {
          if (isLogged === '1' && route.routeName === 'Login') {
            return null;
          }

          if (isLogged === '0' && route.routeName === 'Account') {
            return null;
          }

          return (
            <View /> // here your tabbar component
          );
        })}
      </View>
    );
  }

  navigationHandler = name => {
    const { navigation } = this.props;
    navigation.navigate(name);
  };
}