I am building an application using react native and using @react-navigation/bottom-tabs for navigation. But I want to remove the highlight feedback (Check the image) when we tap on the label to navigate to other screens. How to do that?

React native version: 0.76.6 @react-navigation/bottom-tabs version: 7.2.0 OS I am testing on: Android 15

Thanks in advance.

enter image description here

I tried searching for forums, github issues and gone through docs but nothing worked.

I am building an application using react native and using @react-navigation/bottom-tabs for navigation. But I want to remove the highlight feedback (Check the image) when we tap on the label to navigate to other screens. How to do that?

React native version: 0.76.6 @react-navigation/bottom-tabs version: 7.2.0 OS I am testing on: Android 15

Thanks in advance.

enter image description here

I tried searching for forums, github issues and gone through docs but nothing worked.

• react-native
• react-native-navigation

1 Answer 1

You need to create CustomeCompoent and use Pressable component from react native set android_ripple prop to null to disable the ripple effect on Android.

const CustomTabBarButton = ({ children, onPress }) => (
  <Pressable
    onPress={onPress}
    android_ripple={null} // Disables the ripple effect on Android
    style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
  >
    {children}
  </Pressable>
);

and your TAB Stack

    const MyTab =()=>{
        <Tab.Navigator>
           <Tab.Screen 
           name="Home"
           component={HomeScreen}
           options={{
            tabBarButton: (props) => <CustomTabBarButton {...props} />,
          }}
           />
            {/* your other screen*/}
        <Tab.Navigator>
     
    }

Hope it's working fine