Issue with TouchableOpacity not registering onPress for Rive component in React Native (iOS)
'm trying to use the Rive component inside a TouchableOpacity in my React Native app, but the onPress event doesn't seem to trigger when I wrap the Rive component inside TouchableOpacity. This issue is specifically happening on iOS.
Here is the code I'm working with:
<TouchableOpacity
activeOpacity={0.6}
onPress={() => {
if (game?.turn !== userInfo?.gamerTag) {
handlePressOut();
return;
}
if (item.id === selectedCard?.id) {
handlePressOut();
} else {
setSelectedCard(item);
}
}}
style={[
{
width: 63,
height: 98,
},
]}
>
<Rive
ref={frontRef}
url=""
artboardName="Front AB"
stateMachineName="Front SM"
autoplay={false}
style={[{ width: 63, height: 98 }]}
fit={Fit.Cover}
/>
</TouchableOpacity>
I think it's that Rive is blocking the pointer events. I would recommend just blocking pointerEvents to the Rive element.