Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

blocksExternalGesture with Gesture.Native() does not block a ScrollView #3267

Closed
gaearon opened this issue Dec 7, 2024 · 1 comment
Closed
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided

Comments

@gaearon
Copy link

gaearon commented Dec 7, 2024

Description

The docs led me to believe that this code would block the ScrollView.

import {View} from 'react-native'
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
  ScrollView,
} from 'react-native-gesture-handler'

export default function App() {
  const native = Gesture.Native()
  const pan = Gesture.Pan()
    .blocksExternalGesture(native)
    .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 native={native} />
        </View>
      </GestureDetector>
    </GestureHandlerRootView>
  )
}

function ScrollViewExample({native}) {
  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>
  )
}

However, it doesn't do anything. The ScrollView is pannable despite my Pan gesture blocking it.

If this is not how the library is supposed to be used, there need be clearer docs and/or warnings. I have no idea what I'm doing wrong here. Very similar code almost works with a ref, and the types say a Gesture and a Ref here are interchangeable.

Steps to reproduce

  1. Drag the scrollview around
  2. It shouldn't be draggable! But it is :(
why_is_this_scrollview_pannable_pls.mov

Snack or a link to a repository

https://snack.expo.dev/__gbUHQOmsdvXY1U4SPmo

Gesture Handler version

2.20.2

React Native version

0.76.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

No response

Acknowledgements

Yes

@github-actions github-actions bot added Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided labels Dec 7, 2024
@j-piasecki
Copy link
Member

The docs led me to believe that this code would block the ScrollView.

That's the same issue as the #3266. If you replace ScrollView from RNGH with the one from react-native it will work.

See #3266 (comment) for more details.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided
Projects
None yet
Development

No branches or pull requests

2 participants