Conflict with PanGestureHandler

[Hristijan95]

Environment

System:
OS: macOS 10.15.5
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 249.04 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.4.0 - /usr/local/bin/node
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 23, 28, 29
Build Tools: 28.0.3, 29.0.3
System Images: android-30 | Google Play Intel x86 Atom
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

Description

When I wrap the into a it conflicts somehow and it doesn't slide. You can change the value by clicking on the slider line, but you can slide it because the PanGestureHandler steals the drag event. I am not sure if this is a bug, or just a solvable case, but I was not able to solve it.

Reproducible Demo

To reproduce it it's pretty simple, here's the code structure:

<PanGestureHandler onGestureEvent={onPanGestureEvent} onHandlerStateChange={onPanStateChange}> <Animated.View> <Slider/> </Animated.View> </PanGestureHandler>

[jamesehly]

I had a similar issue with the slider inside of a DraggableFlatlist item (https://github.com/computerjazz/react-native-draggable-flatlist). I set the activationDistance to 10 and that fixed the issue. DraggableFlatlist uses the PanGestureHandler and sets the activateOffsetX or activateOffsetY to the activationDistance, so you might try setting those values to something greater than zero to get the slider to activate before the PanGestureHandler does.

Here is an example that works for me:

<PanGestureHandler onGestureEvent={onPanGestureEvent} activeOffsetX={30}>
     <Animated.View>
        <Slider />
    </Animated.View>
</PanGestureHandler>