How do you make a bottom tab navigator in react native with a border radius and a background that is-CodePudding

tabbarnavigator

I want to create a tab bar navigator like the one in the image, but everything I've seen online does not accomplish this task. Any advice is appreciated

CodePudding user response：

You can build it custom using the tabBar property, which allows passing in a component to use for the entire tab bar:

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar

The docs above provide a good example of an entirely custom tab bar.

CodePudding user response：

I figured out a way to do it using this example example

I had to add a few extra lines (below) to make it look like the image

<Tab.Navigator
  screenOptions={{
     tabBarActiveBackgroundColor: "#ECECEB",
     tabBarInactiveBackgroundColor: "#ECECEB",
    tabBarActiveTintColor: "#B6A158",
    tabBarInactiveTintColor: "#6880D7",
    tabBarStyle: {
      backgroundColor: '#ECECEB',
      borderRadius: 16,
      overflow: 'hidden',
      bottom: 5,
      height: 64,
      borderTopColor: "#ECECEB",
      width: 333,
      position: "absolute",
      left: "10%",
      
    },
    tabBarItemStyle: {
      height: 54,
      backgroundColor: '#ECECEB',
      borderRadius: 16,
      top: 4,
      marginHorizontal: 3,
      borderTopColor: "#ECECEB",
      width: 117,
}
  }}
>