CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Orhiiy
Orhiiy

Reputation: 91

React Navigation how to hide tabbar top-border on a individual screen

It is easy to hide the border on every Screen by doing the following code on Navigator level

<Tab.Navigator
   tabBarOptions={{
      style: {
         borderTopWidth: 0,
      },
   }}
>

But how to hide the border on a single Screen? I've already tried the following but it has no effect

React.useLayoutEffect(() => {
   navigation.setOptions({
      tabBarOptions: {
         style: {
            borderTopWidth: 0,
         },
      },
   });
}, [navigation]);

Upvotes: 0

Views: 1278

Answers (2)

Ishara Dilshan
Ishara Dilshan

Reputation: 151

@react-navigation^v6.x you need to add tabBarStyle: { borderTopWidth: 0, elevation: 0} in the screenOptions prop to hide top border in bottom tab bar for both ios and android.

For example:

<Tab.Navigator
      screenOptions={{
        tabBarStyle: {
          borderTopWidth: 0,
          elevation: 0,
        },
      }}>
</Tab.Navigator>

Upvotes: 1

Jignesh Mayani
Jignesh Mayani

Reputation: 7193

If we would like to make changes from the child component then we have to access the parent component navigation props.

Have a try with the below code which might help you:

React.useLayoutEffect(() => {
   navigation.dangerouslyGetParent().setOptions({
      tabBarOptions: {
         style: {
            borderTopWidth: 0,
         },
      },
   });
}, [navigation]);

Upvotes: 0

Related Questions