CODEWITHSUNDEEP
react-nativereact-navigation
Nathan
Nathan

Reputation: 77

How to modify "selected tab" bottom border color on TopTabNavigator

I'm working on a react-native app using react-navigations createMaterialTopTabNavigator. I've read through the docs, but I cannot seem to find what props I need to modify to change the bottom border color of the active tab.

Does anyone have any advice?

active tab bottom border

FWIW here is my current Navigator code:

const TopTab = createMaterialTopTabNavigator()

function ProgressNavigator() {
  const themes = useThemes()

  return (
    <TopTab.Navigator
      screenOptions={{
        tabBarStyle: {
          backgroundColor: themes.lightBackground,
        },
        tabBarLabelStyle: {
          paddingTop: 10,
          fontSize: 14,
          fontWeight: "bold",
        },
        tabBarActiveTintColor: themes.secondary.color,
        tabBarInactiveTintColor: "#FFF",
      }}
    >
      <TopTab.Screen name="Table" component={ProgressTable} />
      <TopTab.Screen name="Chart" component={ProgressChart} />
    </TopTab.Navigator>
  )
}

Upvotes: 1

Views: 69

Answers (1)

user18309290
user18309290

Reputation: 8380

Use tabBarIndicatorStyle to style an indicator. Below example sets label (and possible icon) and indicator to red.

<Tab.Navigator
  screenOptions={{
    tabBarIndicatorStyle: {
      backgroundColor: 'red'
    },
    tabBarActiveTintColor: 'red',
  }}>
...
</Tab.Navigator>

Upvotes: 1

Related Questions