AsyncStorage access in Material Top Tab Navigator React Native

109 views Asked by At

I want to the change user profile pic, when user log into the system. User avator in left side corner in the Material Tab navigator. When user log in to the system I store the image url in AsyncStorage as profilePic.

I want to access AsyncStorage and get the profile pic here.

 <Image
            source={{
              uri:
                'https://cdn.apparelconnects.com/users_2_a34456c8-6d69-4b80-98f2-d184ff9f504d_img.png',
            }}

I try to many ways. but I can not do this. Here I attached my code. Anyone know the access AsyncStorage here, please help me..

const TabNavigator = createMaterialTopTabNavigator(
  {
    Profile: {
      screen: Logout,
      navigationOptions: {
        title: 'Home',
        tabBarIcon: ({tintColor}) => (
          <Image
            source={{
              uri:
                'https://cdn.apparelconnects.com/users_2_a34456c8-6d69-4b80-98f2-d184ff9f504d_img.png',
            }}
            style={{
              width: tabBarConfiguration.icon_size,
              height: tabBarConfiguration.icon_size,
              borderRadius: 40 / 2,
              overflow: 'hidden',
              borderWidth: tintColor == colors.orange ? 2 : 0,
              borderColor: tintColor,
            }}
          />
        ),
      },
    },
    Home: {
      screen: Home,
      navigationOptions: {
        title: 'Home',
        tabBarIcon: ({tintColor}) => (
          <Image
            source={require('../asserts/images/home_icon.png')}
            style={{
              width: tabBarConfiguration.icon_size,
              height: tabBarConfiguration.icon_size,
              tintColor: tintColor,
            }}
          />
        ),
      },
    },

  {
    initialRouteName: 'Home',
    activeColor: '#f0edf6',
    inactiveColor: '#3e2465',
    barStyle: {backgroundColor: '#694fad'},
    tabBarPosition: 'top',
    swipeEnabled: true,
    lazy: true,
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      activeTintColor: colors.orange,
      inactiveTintColor: '#a1a1a1',
      style: {
        backgroundColor: '#ffffff',
        height: hp('10%'),
      },
      labelStyle: {
        textAlign: 'center',
        fontWeight: 'bold',
      },
      indicatorStyle: {
        backgroundColor: 'transparent',
      },
    },
    defaultNavigationOptions: ({navigation}) => ({
      tabBarOnPress: ({navigation, defaultHandler}) => {
        if (
          navigation.state.routeName === 'Profile' ||
          navigation.state.routeName === 'More'
        ) {
          return null;
        }
        defaultHandler();
      },
    }),
  },
);

export default createAppContainer(TabNavigator);
0

There are 0 answers