How to remove bottom tab bar border in React Navigation

Published on Jan 17, 2021

2 min read

EXPO

Updated: May 2, 2022

cover_image

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.

ss1

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.

1<BottomTab.Navigator
2 initialRouteName='TabOne'
3 screenOptions={{
4 // ...
5 tabBarStyle: {
6 borderTopWidth: 0
7 }
8 }}
9>

Here is the output:

ss2

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.

ss3

To remove this shadow, set the elevation to 0:

1tabBarStyle: {
2 borderTopWidth: 0,
3 elevation: 0
4}

ss4

Source code available at GitHub

Share this article on Twitter


More Posts

Browse all posts

Join 1300+ devs & subscribe to my newsletter!

NEWSLETTER

🔗 Subscribe on Revue

AMAN MITTAL author

Software Developer and Technical Writer since 2017. Loves learning and writing about Node.js, React, React Native & Expo. Previously, a Developer Advocate at Draftbit.


Copyright ©  2019-2022 Aman Mittal · All Rights Reserved.