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

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

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,      
        }
>
// ...

<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]

tabBarOptions: { style: { // Remove border top on both android & ios borderTopWidth: 0, borderTopColor: "transparent",

        elevation: 0,
        shadowColor : '#5bc4ff',
        shadowOpacity: 0,
        shadowOffset: {
          height: 0,
        },
        shadowRadius: 0,

} }