React-native-paper: Add customizable icon size for BottomNavigation

[peacechen]

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

[ferrannp]

@satya164 what do you think? Probably it will have some problems with the animations?

[peacechen]

Another related issue, but with the label text size. The container isn't quite big enough for text letters such as 'g' which extend below the baseline.

It would help to be able to configure the container size, icon size and label text size.

[satya164]

This should be automatic without having to specify size. PRs are welcome.

[peacechen]

@satya164 Are you referring to the icon size, or the tab bar size?

[satya164]

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

[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.

[magworkss]

Unfortunately, component is not customisable...

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[gauravmaini]

The issue still exists in MaterialBottomTabNavigator, the icon size is still hard coded to 24.
Here is the snippet from MaterialBottomTabView.tsx

    if (typeof options.tabBarIcon === 'string') {
      return (
        <MaterialCommunityIcons
          name={options.tabBarIcon}
          color={color}
          size={24}
          style={styles.icon}
        />
      );
    }