How to load custom tab icon in createBottomTabNavigator() in react-native - 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.