Search code examples
cssreactjsreact-nativereact-navigationreact-native-paper

Alignment Issue with tabBarLabel and Icon in react-navigation-material-bottom-tabs

I am using createMaterialBottomTabNavigator from React Navigation for one of my project. If i use tabBarIcon and tabBarLabel together icon is overlapping with text. Need help to fix the issue. Here's what i tried - 

const MainNavigator = createMaterialBottomTabNavigator({
  Offers: {
    screen: OffersNavigator,
    navigationOptions:{
      tabBarIcon: (
        {focused}) => {
          return <IconButton icon="tag" style={{marginBottom: 5}} color={focused ? '#2E98FF' : '#000'} size={20}/>
      },
      tabBarLabel: 'Offers',
    },
  },
  Search: SearchNavigator,
  Settings: SettingsNavigator,
});

Bottom Tab Navigator

Solution

  • Margin Icon like this. It will work perfectly.

    <IconButton icon="tag" style={{marginTop: -3}} color={focused ? '#2E98FF' : '#000'} size={20}/>