How to remove bottom tab bar border in React Navigation

Published on Jan 17, 2021

2 min read


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.

2 initialRouteName='TabOne'
3 screenOptions={{
4 // ...
5 tabBarStyle: {
6 borderTopWidth: 0
7 }
8 }}

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:

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


Source code available at GitHub

More Posts

Browse all posts

Aman Mittal author

I'm a software developer and a technical writer. In this blog, I write about Technical writing, Node.js, React Native and Expo.

Currently, working at Expo. Previously, I've worked as a Developer Advocate at Draftbit, and Senior Content Developer at Vercel.

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