0

I tried using the Badge from https://github.com/xotahal/react-native-material-ui, but the element doesn't properly fit into the bottom navigation: enter image description here

Here's the code from AppNavigator.js:

import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { Badge, Icon, Avatar } from "react-native-material-ui";

export const SignedIn = createMaterialBottomTabNavigator(
  {
    MeetingsScreen: {
      screen: MeetingsScreen,
      navigationOptions: {
        tabBarLabel: "Заседания",
        tabBarIcon: ({ focused }) => (
          <Badge text="3">
            <TabBarIcon
              focused={focused}
              name={
                Platform.OS === "ios"
                  ? `ios-people${focused ? "" : "-outline"}`
                  : "md-people"
              }
            />
          </Badge>
        )
      }
    },
...

I tried wrapping the TabBarIcon itself into the badge, but it didn't help. How to set up this element properly? Or is there a better library for that?

Darkhan
  • 2,888
  • 5
  • 20
  • 30
  • Have you tried messing with `overflow` properties on the `TabBarIcon` or containing components? – jlucier Nov 02 '18 at 03:56

1 Answers1

1

Create a custom tab bar icon component that wraps the tab bar icon inside a view of greater width and height of the icon and make sure the badge is within the view perimeter. See diagram below:enter image description here

a6547484
  • 81
  • 1
  • 7