I am trying to create a full screen touchable view that gets its onPress triggered but also passes the touch down to the view behind it. In the example below, I'd like to have the onPress function get called when the user scrolls on the scrollview. I'm able to get the scrollview to respond with pointerEvents="none" on the Pressable, but doing that makes the onPress not get triggered. Is there any way to get both of these working together?
const styles = StyleSheet.create({
containingTouchable: {
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
backgroundColor: 'rgba(100,100,100,0.3)',
},
});
const Component = () => {
<Pressable
style={styles.containingTouchable}
onPress={() => {
console.warn('pressed me');
}}
>
<View></View>
</Pressable>
<ScrollView> ... </ScrollView>
}
I would solve this using react-native-gesture-handler. Instead of Pressable, use TapGestureHandler. And import ScrollView from react-native-gesture-handler.
Rngh provides a prop called simultaneousHandlers so you can listen to multiple touch event at once.
So you could do something like this:
const tapGestureHandlerRef = useRef(null);
<TapGestureHandler
ref={tapGestureHandlerRef}
onActivated={handleOnPress}
onHandlerStateChange={handleOnPress}
>
<ScrollView
simultaneousHandlers={tapGestureHandlerRef}
>
{content}
</ScrollView>
</TapGestureHandler
>
Both onActivated and onHandlerStateChange can trigger an onPress event, but they behave differently. Take a look at the docs to see what fits your use case the best: https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh