react native - How to Change or Remove Ripple Effect on Tab Bar Items in Expo Router's Tabs Component? - Stack Overflow

I am using expo-router and the Tabs component in my React Native project. I have customized the tab bar icons, including a LinearGradient background for the center tab. However, I noticed that when I press a tab, the default ripple effect (or press feedback) is applied. I want to either change its color or remove it entirely.

I tried using headerPressColor and headerPressOpacity, but they do not seem to affect the tab bar items.

  <Tabs
  initialRouteName="Dashboard"
  screenOptions={{
    tabBarShowLabel: true,
    headerPressColor: "red",
    headerPressOpacity: 0,
    headerShown: false,
    tabBarStyle: styles.tabBarStyle,
  }}
>
  <Tabs.Screen
    name="Dashboard"
    options={{
      tabBarIcon: ({ focused }) => (
        <LinearGradient
          colors={["#00A4E4", "#1EB0E9"]}
          start={{ x: 0.5, y: 0 }}
          end={{ x: 0.5, y: 1 }}
          style={styles.gradientIcon}
        >
          <Image source={icons.Home1} resizeMode="contain" style={styles.mainIcon} />
        </LinearGradient>
      ),
      tabBarLabel: () => null,
    }}
  />
</Tabs>

I am using expo-router and the Tabs component in my React Native project. I have customized the tab bar icons, including a LinearGradient background for the center tab. However, I noticed that when I press a tab, the default ripple effect (or press feedback) is applied. I want to either change its color or remove it entirely.

I tried using headerPressColor and headerPressOpacity, but they do not seem to affect the tab bar items.

  <Tabs
  initialRouteName="Dashboard"
  screenOptions={{
    tabBarShowLabel: true,
    headerPressColor: "red",
    headerPressOpacity: 0,
    headerShown: false,
    tabBarStyle: styles.tabBarStyle,
  }}
>
  <Tabs.Screen
    name="Dashboard"
    options={{
      tabBarIcon: ({ focused }) => (
        <LinearGradient
          colors={["#00A4E4", "#1EB0E9"]}
          start={{ x: 0.5, y: 0 }}
          end={{ x: 0.5, y: 1 }}
          style={styles.gradientIcon}
        >
          <Image source={icons.Home1} resizeMode="contain" style={styles.mainIcon} />
        </LinearGradient>
      ),
      tabBarLabel: () => null,
    }}
  />
</Tabs>

• react-native
• expo
• react-navigation-bottom-tab
• expo-router

Share Improve this question Follow edited Feb 4 at 6:53 Drew Reese 204k1818 gold badges245245 silver badges273273 bronze badges asked Feb 4 at 6:44 Izaz AhmadIzaz Ahmad 4366 bronze badges 1

• You can try following option to customise according to your need , - To remove the ripple effect, use TouchableOpacity with activeOpacity={1}. - To change the ripple colour, use TouchableRipple from react-native-paper. - Use tabBarStyle to further customise the tab bar's appearance. - Use Platform to apply changes only on specific platforms (e.g., Android). – nazmul Commented Feb 4 at 7:10

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

I think you are right to use headerPressColor

But, if i remember correctly you need to add this: headerPressColor: 'transparent'.

to either Tabs - screenOptions prop or Tabs.Screen - options prop

If you want to completely remove the ripple effect, you can customize tabBarButtons in the Tabs screenOptions.

Create your own Pressable component and add android_ripple={ null }.

For better understanding, when Expo is first installed, HapticTab.tsx is created under the components folder. When you add android_ripple={ null }, you'll see that the effect is removed.