React native navigation custom tabbar icon - react-native

Question

Is this possible to have custom component ( Button or what ever ) instead of simple icon in tab bar?
I need to set my tab bar icon dynamically like this
this.props.navigator.setTabButton({
tabIndex: 0,
icon: <Icon name="heart" size={28} /> <--- not appear
});
OR we can use only icons? Any solutions?

Answer 1

Yes, it is possible. I am sharing my solution as code below:
const renderNav = (routeName, focused) => {
return (
<View style={{
flex: 1,
width: 90,
justifyContent: 'center',
alignItems: 'center',
borderTopColor: StylesGeneric.COLORS.primary,
borderTopWidth: focused ? 4 : 0,
}}>
<Text
style={[StylesGeneric.STYLES.footerText]}>
{routeName}
</Text>
</View>
);
};
const customTabs = ({navigation}) => ({
tabBarIcon: ({focused}) => {
const {routeName} = navigation.state;
if (routeName === 'Home') {
return renderNav('Home', focused);
} else if (routeName === 'Profile') {
return renderNav('Profile', focused);
} else if (routeName === 'ProfileOther') {
return renderNav('ProfileOther', focused);
}
},
});
const nav = createBottomTabNavigator(
{
Home: {
screen: Home,
},
Profile: {
screen: Profile,
},
ProfileOther: {
screen: ProfileOther,
},
},
{
defaultNavigationOptions: customTabs,
animationEnabled: true,
swipeEnabled: true,
tabBarPosition: 'bottom',
initialRouteName: 'Home',
tabBarOptions: {
showLabel: false,
style: {
borderTopColor: 'transparent',
backgroundColor: StylesGeneric.COLORS.white,
height: StylesGeneric.FOOTER_HEIGHT,
},
},
},
);
const AppContainer = createAppContainer(nav);