React native Question posted in
The official React Native documentation can be found here.

React native – How to remove ripple effect in <Tab.Navigator React-Native

Im currently creating a tab navigator for an app, but everytime I press on one of my <Tab.Screen there is a ripple effect which I want to remove.

<Tab.Navigator
    screenOptions={{
        headerShown: false,
        tabBarStyle: styles.tabBar,
        tabBarShowLabel: false,
    }}
>
</Tab.Navigator>

Thats my line for the Tab.Navigator

If anyone can help it would be great

I tried using ColorPress: Transparent but it doesn’t seem to exist in screenOptions
I also tried using headerPressOpacity and headerPressColor but they dont work either

Finally I tried tabbarPressColor and it doesnt seem to exist or work either

I just want to remove the ripple effect thats it, I dont want to customize it or anything just remove it.

Tags:

2

Answers


  1. 0

    I think you may have to change the button that is rendered by the navigator, not the navigator options. The ripple effect itself, seen on Android, is usually due to TouchableNativeFeedback which you would want to avoid. Rendering your own touchableOpacity should remove the effect.

        <Tab.Navigator
      screenOptions={{
        tabBarButton: (props) => <TouchableOpacity {...props} activeOpacity={1}/>,
      }}
    >
    </Tab.Navigator>

    https://reactnavigation.org/docs/bottom-tab-navigator/#tabbarbutton

    Login or Signup to reply.
  2. 0

    Another solution is similar to Inshal answer but implemented with the Pressable component (It can be useful to avoid Typescript types compatibility):

    <Tab.Navigator
  screenOptions={{
    tabBarButton: (props) => <Pressable {...props} android_ripple={{ color: 'transparent' }} />
  }}
>
</Tab.Navigator>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search