DEV Community

Cover image for React Native PressableHighlight
Nyasha (Nash) Nziramasanga
Nyasha (Nash) Nziramasanga

Posted on

React Native PressableHighlight

What if you want to use something similar to TouchableHighlight on both iOS and Android with a ripple effect? Using the Pressable component is not enough, so we can create a PressableHighlight component that handles both a background highlight change for iOS and a ripple effect for android.

You can find the code on this snack

PressableHighlight onPress event

Requirements:

  • For iOS a background highlight onPress
  • For Android a ripple effect

PressableHighlight Component

export default function PressableHighlight(props) {
  return (
    <Pressable
      android_ripple={{
        color: '#676B5F',
      }}
      style={({ pressed }) => [
        Platform.select({
          ios: {
            backgroundColor: pressed ? 'rgba(0,0,0,0.1)' : 'transparent',
          },
        }),
        props.style,
      ]}>
      {props.children}
    </Pressable>
  );
}
Enter fullscreen mode Exit fullscreen mode

The android_ripple takes an object which accepts the ripple color, the onPress event can be used to change the backgroundColor which in this case is a black color with an opacity of 10% when pressed and transparent when inactive.

Top comments (0)