Updated: May 2, 2022
Navigation plays an important role in mobile applications and the React Navigation library does an awesome job in providing a completely customizable interface for utilizing different navigation patterns to React Native apps.
Having the liberty to customize tab bars with React Navigation, one customizable option available (depending on the UI design of an app) is to remove the border from the Tab bar.
Here is an example of the border that is the default when the React Navigation Bottom Tabs library is utilized to create a tab bar.
For the demonstration purpose, I am using an Expo project created using the expo-cli command-line tool. To create a similar new Expo project, you can execute the command and choose the tabs option.
expo init yourProjectName
# when prompted, choose the tabs option
# in managed workflow
This expo project comes with a default bottom tab navigator whose configuration can be found in the file navigation/BottomTabNavigator.tsx.
Customize the TabBar
The Bottom Tab Bar React Navigation library gives an object called screenOptions to customize a tab bar. This object contains props that can be used to apply custom styles and one of the generic property it has is called tabBarStyle. This property is commonly used to change the styles of the tab bar, for example, by applying the backgroundColor styles’ property.
To remove the border, add the screenOptions prop and inside it, add a tabBarStyle property called borderTopWidth with a value 0.
<BottomTab.Navigator
initialRouteName='TabOne'
screenOptions={{
// ...
tabBarStyle: {
borderTopWidth: 0
}
}}
>
Here is the output:
Do note that this property can also be used to increase the width of the top border.
Removing shadow on Android Device
After applying this tabBarStyle property, the width of the top border is removed from an Android device. However, there is a shadow at the top border of the tab bar that remains.
To remove this shadow, set the elevation to 0:
tabBarStyle: {
borderTopWidth: 0,
elevation: 0
}
