CODEWITHSUNDEEP
react-nativereact-navigation
Cedriga
Cedriga

Reputation: 4156

How to make the Indicator line of tabbar on Top not in Bottom

I'm using to React-Native. After searching everywhere, I still don't know how to make the Indicator line of bottom tab on top or in bottom. Is it possible or not ?

I already tried indicatorStyle but it doesn't work. Does anyone have an idea or suggestion ?

const MyTabNavi = createBottomTabNavigator(
    {
      ...
    },
    {
        tabBarOptions: {
            ....
            indicatorStyle: {
                paddingBottom: 300,
                backgroundColor: '#46ff46',
                height: 50,
            }
        }
    }

Upvotes: 1

Views: 1578

Answers (1)

Kevin Eduard Piske
Kevin Eduard Piske

Reputation: 145

The indicatorStyle exists only in TopTabNavigator. See docs below:

Top tabBarOptions: https://reactnavigation.org/docs/material-top-tab-navigator#tabbaroptions

Bottom tabBarOptions: https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaroptions

In the TopTabNavigator, the indicator line is displayed for default. Currently has a bug in React Navigation... When set the tabStyle backgroundColor, the indicator line disappears. See issue below: https://github.com/react-navigation/react-navigation/issues/8012

Upvotes: 2

Related Questions