CODEWITHSUNDEEP
react-native
user13283233
user13283233

Reputation:

Get rid of border for Top Tab (react-navigation)

I am using react-navigation, and when I use top-tab and stack, I get this border. enter image description here

How Do I remove this? My code looks something like this

const ShoutoutTopTab = createMaterialTopTabNavigator();

const ShoutoutTopTabScreen = () => {
  return (<ShoutoutTopTab.Navigator
    tabBarOptions={{
      indicatorStyle: {backgroundColor:'#4A6159'},
      tabStyle: {}
    }} >
    <ShoutoutTopTab.Screen name="GLOBAL" component={GlobalShoutout}/>
    <ShoutoutTopTab.Screen name="COUNTRY" component={CountryShoutout}/>
  </ShoutoutTopTab.Navigator>)
}

Upvotes: 3

Views: 1084

Answers (4)

Matt Yoon
Matt Yoon

Reputation: 446

What looks like a bottom border is actually a shadow.

tabBarOptions = {{
  style: {
  shadowOpacity: 0,
  elevation: 0,
  }
}}

This works for both IOS and Android. Tested on 5.3.15.

Upvotes: 0

Chaipat
Chaipat

Reputation: 21

For anyone who still has the issue, Try:

(tested in material-top-tabs 5.3.14)

tabBarOptions = {{
  style: {
  shadowOpacity: 0
  }
}}

Upvotes: 2

Ankush Rishi
Ankush Rishi

Reputation: 3150

You can do it this way: 

headerStyle: {
    borderBottomWidth: 0,
}

Upvotes: 0

Rajan
Rajan

Reputation: 1568

Try this

tabBarOptions = {{
  indicatorStyle: { backgroundColor: '#4A6159' },
  tabStyle: {
    borderBottomWidth: 0
  }
}} >

Upvotes: 0

Related Questions