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 <Slider> into a <PanGestureHandler></PanGestureHandler> 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>