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

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>
  );
}

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.