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.