Skip to main content
Version: 3.x

simultaneousWith

simultaneousWith allows gestures across different components to be recognized simultaneously. For example, you may want to have two nested views, both with tap gesture attached. Both of them require one tap, but tapping the inner one should also activate the gesture attached to the outer view:

export default function App() {
const innerTap = useTapGesture({
onDeactivate: (e) => {
if (!e.canceled) {
console.log('inner tap');
}
},
});

const outerTap = useTapGesture({
onDeactivate: (e) => {
if (!e.canceled) {
console.log('outer tap');
}
},
simultaneousWith: innerTap,
});

return (
<GestureHandlerRootView style={styles.container}>
<GestureDetector gesture={outerTap}>
<View style={styles.outer}>
<GestureDetector gesture={innerTap}>
<View style={styles.inner} />
</GestureDetector>
</View>
</GestureDetector>
</GestureHandlerRootView>
);
}