CODEWITHSUNDEEP
react-navigation
RavenMan
RavenMan

Reputation: 1933

How to remove tab navigator's bottom border (react-navigation)

In react navigation v5, when implementing a materialTopTabNavigator, how can I remove the bottom horizontal border separating the tab menu and individual tab pages?

I've tried borderWidth, borderBottomWidth, borderTopWidth in tabBarOptions.style to no avail.

Upvotes: 22

Views: 19549

Answers (6)

Yevhenii Shyshkin
Yevhenii Shyshkin

Reputation: 1

Add it to options in <Navigator.Screen "here">

options={{headerShadowVisible: false}}

Upvotes: -2

williamsi
williamsi

Reputation: 1606

For anyone using react navigator v6.x.

Add a theme on your NavigationContainer, and set YourTheme.colors.border to transparent.

App.js:

<NavigationContainer theme={YourTheme}>
 ...
</NavigationContainer>

theme.js

import { DefaultTheme } from '@react-navigation/native';

const YourTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    border: 'transparent',
  },
};

export default YourTheme;

Reference react navigation v6.x https://reactnavigation.org/docs/themes/#basic-usage

Upvotes: 0

Sambulo Senda
Sambulo Senda

Reputation: 1418

tabBarOptions: {
  style: {
            // Remove border top on both android & ios
            borderTopWidth: 0,
            borderTopColor: "transparent",
            
            elevation: 0,
            shadowColor : '#5bc4ff',
            shadowOpacity: 0,
            shadowOffset: {
              height: 0,
            },
            shadowRadius: 0,
  }
}

Upvotes: 2

Zanyar Jalal
Zanyar Jalal

Reputation: 1874

screenOptions={{
     tabBarStyle: {
              borderTopWidth: 0
        }
    }

Upvotes: 44

Sumit
Sumit

Reputation: 570

<Tab.Navigator
  tabBarOptions={{
    activeTintColor: "#fff",
    inactiveTintColor: "#fff",
    activeBackgroundColor: "#090D20",
    inactiveBackgroundColor: "#192665",
    style: {
      backgroundColor: "#192665",
      height: 60,
      borderTopColor: "red", //Change Like This
    },
  }}
>
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="ContactsScreen" component={ContactsScreen} />
</Tab.Navigator>[enter image description here][1]

Upvotes: 5

RavenMan
RavenMan

Reputation: 1933

The bottom line is not a border, but a shadow (on iOS) and elevation (on Android). So the fix is:

<Tab.Navigator
    tabBarOptions={{
        style: {
            elevation: 0,   // for Android
            shadowOffset: {
                width: 0, height: 0 // for iOS
            },
        }
    }}
>
// ...

In addition, on Android, when tapping the icon, an indicator line briefly appears at the bottom. Make that invisible by setting the elevation prop in indicatorStyle:

<Tab.Navigator
    tabBarOptions={{
        indicatorStyle: {
            width: 0, height: 0, elevation: 0,      
        }
>
// ...

Upvotes: 18

Related Questions