Проблема выравнивания с tabBarLabel и значком в реагирующих навигационных материалах нижних вкладках

Question

Я использую createMaterialBottomTabNavigator из React Navigation для одного из моих проектов. Если я использую tabBarIcon и tabBarLabel вместе значок перекрывается с текстом. Нужна помощь, чтобы решить проблему. Вот что я попробовал -

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,
});

Answer 1

Margin Icon, как это. Это будет работать отлично.

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