Add customizable icon size for BottomNavigation

Current behaviour

Icons are fixed at size 24 in BottomNavigation.

Expected behaviour

Add a prop to support custom icon sizes.

Code sample

I’m using react-navigation-material-bottom-tabs which in turn uses this library. If I specify icon sizes greater than 24, the labels render in the center of the icon instead of below (see screenshot below).

let iconSize = sizes.h2;
let iconContainerStyle = [s.aic, {width: iconSize, height: iconSize}];

this.tabNav = createMaterialBottomTabNavigator(
  {
    Docs: { screen: Docs,
      navigationOptions: {
        tabBarLabel: 'Docs',
        tabBarIcon: ({ tintColor }) => (<View style={iconContainerStyle}><Icon style={[{color: tintColor}]} size={iconSize} name={'document'}/></View>),
        gesturesEnabled: false,
      }
    },
    Add: { screen: Add/>,
      navigationOptions: {
        tabBarLabel: 'Add',
        tabBarIcon: ({ tintColor }) => (<View style={iconContainerStyle}><Icon style={[{color: tintColor}]} size={iconSize} name={'add'}/></View>),
        gesturesEnabled: false,
      }
    },
    Search: { screen: Add/>,
      navigationOptions: {
        tabBarLabel: 'Search',
        tabBarIcon: ({ tintColor }) => (<View style={iconContainerStyle}><Icon style={[{color: tintColor}]} size={iconSize} name={'search'}/></View>),
        gesturesEnabled: false,
      }
    },
    Profile: { screen: Profile,
      navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor }) => (<View style={iconContainerStyle}><Icon style={[{color: tintColor}]} size={iconSize} name={'user'}/></View>),
        gesturesEnabled: false,
      }
    },
  },
  {
    initialRouteName: 'Manifest',
    stateName: props.name,
    activeTintColor: lightColors.primaryButtonFontColor,
    inactiveTintColor: lightColors.secondaryColor,
    barStyle: [navBackground, s.h4],
  }
);

Screenshots (if applicable)

What have you tried

Different icon sizes. Only renders properly if icon size is 24, the fixed size set in BottomNavigation.js. https://github.com/callstack/react-native-paper/blob/master/src/components/BottomNavigation.js#L895

Your Environment

software	version
ios or android	ios and android
react-native	0.55
react-native-paper	1.11.0
node	6
npm or yarn	4.5

[peacechen]

As explained in the OP, the icon size is fixed at 24: https://github.com/callstack/react-native-paper/blob/master/src/components/BottomNavigation.js#L895

The label and labelContainer styles use fixed sizes as well. Looks like the labelContainer size is too small and truncates letters that extend below the baseline.

The labelContainer should not have a fixed height. It will size automatically to the font size.

It would be great if the icon size and label font size were configurable via props.

[satya164]

If you have a bigger icon and label size, everything should automatically adapt to that size. Shouldn’t be hard to implement.