CODEWITHSUNDEEP
react-nativereact-reduxreact-navigationreact-redux-firebase
somnathbm
somnathbm

Reputation: 659

How to show indicator on all tabs by default in react navigation

I have tab based navigation in one of my react native component. I'm using React Navigation v1. React Navigation shows tab indicator only for the current active tab.

enter image description here

However, I want every tabs to show tab indicator (bottom border on tab) by default but with different colors of course. And when active, each tab will show slightly different shade of the color.

I have tried with React Navigation v1, v2, Native Base. Couldn't find a way around.

I want the tab bar exactly like this image.

enter image description here

In React Navigation, we have something like this :

TabNavigator(
  { 
    Tab1: { screen: Tab1Component },
    Tab2: { screen: Tab2Component }
  },
  {
    tabBarComponent: TabBarTop,
    tabBarPosition: 'top',
    tabBarOptions: {
      indicatorStyle: {
        borderBottomColor: '#6495ed',
        borderBottomWidth: 2
      }
    }
  }
)

But this adds the style to the entire tabs. I want some ability to be applied on each tab basis. Same with Native Base's tabBarUnderlineStyle.

Upvotes: 1

Views: 3217

Answers (1)

Selmi Karim
Selmi Karim

Reputation: 2245

You should use this props in your tabBarOptions inside TabNavigatorConfig

activeTintColor - Label and icon color of the active tab.

activeBackgroundColor - Background color of the active tab.

inactiveTintColor - Label and icon color of the inactive tab.

inactiveBackgroundColor - Background color of the inactive tab.

Upvotes: 1

Related Questions