Icons/Images do not display with TabBarBottom in React Native - react-native

Question

I've pretty much taken the sample code from the TabNavigator documentation and the icon's/images simply don't appear on iOS or Android. Even the label override doesn't seem to take effect. What am I doing wrong?
Here's the link to the docs I've been using:
https://reactnavigation.org/docs/navigators/tab
Here's my code:
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Not displayed',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});

Answer 1

Alright, I finally figured it out after wanting to slam my face into the keyboard.
The title and tab bar icon is actually a different structure to what's inside the docs.
const MyApp = TabNavigator({
Displayed: {
screen: MyHomeScreen,
navigationOptions: {
title: 'Favorites',
tabBar: {
icon: ({tintColor}) => (<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>)
},
},
},
...
or
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBar: {
icon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
),
}
};
...

Answer 2

As for react-navigation-tabs v2.6.2 is it now as described in the doc.
To update the old example, you have to replace tabBar: { icon: ... } by tabBarIcon: ...
e.g.
class MyHomeScreen extends React.Component {
static navigationOptions = {
title: 'Foo Bar',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={{width: 26, height: 26, tintColor: tintColor}}
/>
)
};

Answer 3

I was searching for answers in stack overflow while answer was in documentation itself. For using images as icon in react-native bottom tab. This is according to current React Navigation 4.x.
const tabNavigator = createBottomTabNavigator({
Style: HomeScreen,
Location: LocationScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
if (routeName === 'Style') {
return <Image
source={require('./screens/assets/notifications.png')}
style={{ height: 25, width: 25, tintColor: tintColor }}
/>;
} else if (routeName === 'Location') {
return <Image
source={require('./screens/assets/location.png')}
style={{ height: 35, width: 35, tintColor: tintColor }}
/>;
}
},
}),
tabBarOptions: {
activeTintColor: 'tomato', //For changing tint colors
inactiveTintColor: 'gray',
},
}
),
You can find additional info here.

Answer 4

Got the same problem, but this solution didn't worked for me. Invalid Key 'tabBar' defined in navigation options...
Edit:
Got it working when I removed the tabBarOptions from my tab navigator.
instead used the activeTintColor and inactiveTintColor as the props of TabBarBottom.