How to use different icons for each tab with createBottomTabNavigator?
Yes, you can:
class HomeComponent extends Component {
static navigationOptions = {
tabBarIcon: ({ focused, tintColor }) => {
const iconName = `ios-information-circle${focused ? '' : '-outline'}`;
return <Ionicons name={iconName} size={25} color={tintColor} />;
},
};
// ...
}
Or:
const tabs = createBottomTabNavigator({
Home: {
screen: HomeComponent,
path: '/',
navigationOptions: {
tabBarIcon: ({ focused, tintColor }) => {
const iconName = `ios-information-circle${focused ? '' : '-outline'}`;
return <Ionicons name={iconName} size={25} color={tintColor} />;
},
},
},
// ...
});