How to set Icon size in react-native-navigation bottom tab bar

user_13000324 0
Viewed 5679

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

Code

react-native-navigation react-native
1 Answers
 <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.

user_70517070
Related