CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-bottom-tab
Muhammad Ashfaq
Muhammad Ashfaq

Reputation: 2531

Change bottom bar container color of react navigation tabs in react native

I am trying to add border radius to bottom bar but with this i want to change container color from default to purple.

how can i do that ?

What i have done so far

enter image description here

What i want

enter image description here

Code: 

tabBarOptions: {
      activeTintColor: colors.primary,
      inactiveTintColor: colors.black,
      showLabel: false,
      style: {
        borderWidth: 0.5,
        borderBottomWidth: 1,
        backgroundColor: 'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        borderColor: colors.lightGrayText,
      },
    },

Anyone can help ?

thanks

Upvotes: 6

Views: 4257

Answers (2)

Huy Nguyễn
Huy Nguyễn

Reputation: 27

If you have nested bottom tab into stack you should change color in stack screen , like code bellow

<Stack.Screen
    options={{
      headerShown: false,
      cardStyle: {
        backgroundColor: "white",
      },
    }}
    name={mainStack.homeTab}
    component={HomeTabs}
  />

Upvotes: 1

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

You have to add a position absolute which will make the tabbar stay inside the border

tabBarOptions={{
          activeTintColor: 'red',
          inactiveTintColor: 'black',
          showLabel: false,
          style: {
            borderWidth: 0.5,
            borderBottomWidth: 1,
            backgroundColor: 'red',
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20,
            borderColor: 'grey',
            position: 'absolute'
          },
        }}>

Reference https://github.com/react-navigation/react-navigation/issues/5928

Upvotes: 13

Related Questions