'How to set Icon size in react-native-navigation bottom tab bar
I just start to learn RN, but the docs in https://reactnavigation.org/docs/tab-based-navigation/ did not show how to set a tabBarIcon's size, I tried to add an attribute in <Tab.Navigator> like the pic. If I manually set the size={38}, it works. However, if there is a better way to set like a global size which means I just need to change one var to set the whole icon size
Solution 1:[1]
<Tab.Navigator
initialRouteName="Home"
activeColor="#ff0071"
inactiveColor="#000"
barStyle={{backgroundColor: '#fff'}}
screenOptions={({route, navigation}) => ({
tabBarLabel: navigation.isFocused() ? route.name : '',
tabBarIcon: ({focused, color, size}) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'home' : 'home';
} else if (route.name === 'Favorite') {
iconName = focused ? 'heart' : 'heart-o';
} else if (route.name === 'Medium') {
iconName = focused ? 'heart' : 'heart-o';
} else if (route.name === 'Hard') {
iconName = focused ? 'cog' : 'cog';
}
return <Icon name={iconName} size={23} color={color} />;
},
})}>
The solution is based on React Navigation 5. In screenOptions you can specify the size of the icon in tabBarIcon property. Please refer the above code.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Aniket |