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',
},
});
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}}
/>
),
}
};
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With