How to load custom tab icon in createBottomTabNavigator() in react-native

Question

I am using TabNavigator in StackNavigator, i am able to pass props to TabNavigator from StackNavigator , which has four tabs.

one of the tab which is named profile, has image icon, loading from URL. i can show image from URL whenever i come from Login or Splash screen. but the problem is once user change profile picture, i can't update the profile icon in profile tab.

here is my code:

This is Main StackNavigator:

import { createStackNavigator } from 'react-navigation';
import Landing from '../screens/onboarding/Landing';
import PhoneLogin from '../screens/onboarding/PhoneLogin';
import EnterCode from '../screens/onboarding/EnterCode';
import Home from './HomeTaBNavigator';


export default createStackNavigator({

Landing: {
    screen: Landing,
    navigationOptions: { header: null, }
},
PhoneLogin: {
    screen: PhoneLogin,
    navigationOptions: { header: null }
},
EnterCode: {
    screen: EnterCode,
    navigationOptions: { header: null }
},
Home: {
    screen: Home,
    navigationOptions: { header: null }
},

});

This is TabNavigator:

import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { createBottomTabNavigator, TabBarBottom } from 'react-navigation';
import Feed from '../screens/home/Feed';
// import Notification from '../screens/home/Notification';
import Notification from './NotificationNavigator';
// import Profile from '../screens/home/Profile';
import Profile from './ProfileNavigator';
// import Search from '../screens/home/Search';
import Search from './SearchNavigator';
import { Colors } from '../theme';
import ImageProgress from 'react-native-image-progress';

const styles = StyleSheet.create({

  iconProfileImg: {
    overflow: 'hidden',
    borderRadius: 12,
    width: 24,
    height: 24,
    resizeMode: 'contain',
    alignItems: "flex-start",
    justifyContent: 'flex-start',
  },
  imageContainer: {
    borderRadius: 12,
    overflow: 'hidden',
    width: 24,
    height: 24,
    alignContent: 'flex-start',
    justifyContent: 'flex-start',
  },


});

export default createBottomTabNavigator({
  Feed: {
    screen: Feed,
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused, tintColor }) => {
        let url = navigation.getParam('userProfileImageUrl');
        console.log('userProfileImage in Home BottomTabBar: ', url);

        return (focused ? <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_1_active.png')} /> : <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_1.png')} />)
      }
    })
  },
  Search: {
    screen: Search,
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused, tintColor }) => {
        let url = navigation.getParam('userProfileImageUrl');
        console.log('userProfileImage in Search BottomTabBar: ', url);

        return (focused ? <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_2_active.png')} /> : <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_2.png')} />)
      }
    })
  },
  Notification: {
    screen: Notification,
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused, tintColor }) => {
        let url = navigation.getParam('userProfileImageUrl');
        console.log('userProfileImage in Notification BottomTabBar: ', url);
        return (focused ? <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_3_active.png')} /> : <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_3.png')} />)
      }
    })
  },
  Profile: {
    screen: Profile,
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused, tintColor }) => {
        let url = navigation.getParam('userProfileImageUrl');
        console.log('userProfileImage in Profile BottomTabBar: ', url);
        return (
          <View style={{ marginTop: -8 }}>
            <View style={styles.imageContainer}>
              <ImageProgress
                style={styles.iconProfileImg}
                source={{ uri: url }}
                renderError={(error) => {
                  console.log('error load image: ', error)
                  return (
                    <Image
                      style={styles.iconProfileImg}
                      source={require('Frenemys/src/assets/additional_icons/profile_fallback.jpg')}
                    />
                  )
                }}
              />
            </View>
          </View>
        )
      }

    }),
  },
}, {
    tabBarOptions: {
      activeTintColor: Colors.app_green,
      inactiveTintColor: Colors.inactive_tab_black,
      showLabel: false,
      style: {
        backgroundColor: Colors.white,
      },
    },

    tabStyle: {
      width: 100,
      //backgroundColor: 'green',
    },
    // tabBarComponent: props => <TabBar navigation={props.navigation}/>,
    lazy: true,
    initialRouteName: 'Feed',
  });

Now when i change profile picture in EditProfile.js which is child component of Profile Stack Navigator, Now how can i update icon in profile tab??

EditProfile: i am saving user data in AsyncStorage.

 saveUser = async (fromImageUpload, responseData) => {
    try {
      const data = fromImageUpload ? responseData.data.profile : responseData.data;
      console.log('get user: ' + JSON.stringify(data));
      await AsyncStorage.setItem(AsyncKeyss.USER, JSON.stringify(data));
      return data;

    } catch (e) {
      // saving error
      console.log(e);
    }
  }

I am able to update profile icon in profile tab whenever i come from Login screen, as i told above.

 navigation.navigate(NavigationKeys.Home, { userProfileImageUrl: userImage });

Answer 1

The same way you get a param like let url = navigation.getParam('userProfileImageUrl'); you can just set the param (update the value) when you change the profile picture.

Just call

navigation.setParams({userProfileImageUrl: newUserProfileImageUrl })

With the new image url and it will be updated.