software-mansion / software-mansion/react-native-gesture-handler

requireExternalGestureToFail is not able to block a ScrollView

Open
#3,266 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Platform: iOS Repro provided
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
  1. Drag the ScrollView
  2. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.