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

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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

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

} }