software-mansion / software-mansion/react-native-gesture-handler
requireExternalGestureToFail is not able to block a ScrollView
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.8k
- Forks
- 1.1k
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 50
Description
Description
According to the docs, requireExternalGestureToFail is like the inverse of blocksExternalGesture.
However, I can't actually get requireExternalGestureToFail to do anything useful with a native gesture.
In particular, I want to block ScrollView if my Pan is being recognized.
The docs lead me to believe that this code would work:
import {View} from 'react-native'
import {
Gesture,
GestureDetector,
GestureHandlerRootView,
ScrollView,
} from 'react-native-gesture-handler'
export default function App() {
const pan = Gesture.Pan()
.onBegin(() => {
'worklet'
console.log('begin')
})
.onUpdate(() => {
'worklet'
console.log('update')
})
.onEnd(() => {
'worklet'
console.log('end')
})
.onFinalize(() => {
'worklet'
console.log('finalize')
})
return (
<GestureHandlerRootView>
<GestureDetector gesture={pan}>
<View style={{flex: 1, backgroundColor: 'blue'}}>
<ScrollViewExample pan={pan} />
</View>
</GestureDetector>
</GestureHandlerRootView>
)
}
function ScrollViewExample({pan}) {
const native = Gesture.Native().requireExternalGestureToFail(pan)
return (
<GestureDetector gesture={native}>
<ScrollView
horizontal
pagingEnabled
style={{
flex: 1,
backgroundColor: 'yellow',
}}>
<View
style={{
width: 200,
height: '100%',
backgroundColor: 'green',
}}
/>
<View
style={{
width: 200,
height: '100%',
backgroundColor: 'purple',
}}
/>
</ScrollView>
</GestureDetector>
)
}
But it doesn't do anything. The ScrollView is still in control of the gesture.
Steps to reproduce
- Drag the ScrollView
- The ScrollView gets dragged, but it should have been blocked by the Pan
https://github.com/user-attachments/assets/5950c53a-0f46-4060-83ac-6f414b87fe59
Snack or a link to a repository
https://snack.expo.dev/k1-MTyYfvD3wQNk3sr_je
Gesture Handler version
2.20.2
React Native version
0.76.3
Platforms
iOS
JavaScript runtime
Hermes
Workflow
Expo bare workflow
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
Real device
Device model
No response
Acknowledgements
Yes
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the iOS behavior in the linked Snack with Gesture.Native().requireExternalGestureToFail(pan), using the reported React Native 0.76.3 and gesture-handler 2.20.2 setup. Trace the native gesture interaction behind this entry point and verify that the ScrollView is blocked while the Pan is recognized.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100