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.
Top comments (0)