Question 34533 in React native Question posted in
The official React Native documentation can be found here.

How do you make a bottom tab navigator in react native with a border radius and a background that is contained? (like the image)

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search