'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

Code



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