Augment the hitSlop or prevent parent gesture listener to react around slider

[zabojad]

I'm using a slider within a swiper and it's quite hard to slide the slider without triggering the swiper.

How could I improve that situation ?

Is there some kind of hitSlop prop equivalent on the slider?

If not, how could I workaround this problem?

[zabojad]

Note that it is actually a problem on Android, not on iOS...

[zabojad]

Does anyone have a solution? I'm still looking for it...

[BartoszKlonowski]

@zabojad Can you provide a minimal example or a part of your code?
I will take a look into that.

[zabojad]

hey @BartoszKlonowski ! Thanks for taking the time to help me.

Here is a reproducer : https://snack.expo.dev/5jW86cV70

I've not included the react-native-swiper dependency because it is actually just a ScrollView...

So let me recap the issue : when nested in an horizontal ScrollView, there is no way to give the priority to the react-native-slider instance for touch events... This happens only on Android. It's fine on iOS.

[BartoszKlonowski]

@zabojad That is a good example, thank you!
As I can see it is possible to reach the slider with a touch event, but dragging is captured by a parent.
Let me take some time to dig in and I will come back to you.

[zabojad]

Hej @BartoszKlonowski ! Did you find anything regarding this issue, by any chance?

[zabojad]

I've opened another issue in RN issue tracker.

[BartoszKlonowski]

@zabojad Sorry for a delay, but yes, I found that this behavior is caused by a native layout structure and is typical for a native Android solutions.
I also found some code samples that would need to be applied to this library, but we will need to spend some time to implement this.

You created an issue in RN repository - let's see if someone will provide you with a decent solution or at least workaround, but in the worst case let's accept if the issue will be closed as the responsibility for this feature is most probably on our side.

[zabojad]

@BartoszKlonowski thank you for your answer. I just checked out the Android sources of this module. Can you please describe what should be done exactly?

[zabojad]

@BartoszKlonowski sorry to ask you again, but I could probably help on this topic if you describe me what has to be done...

[BartoszKlonowski]

@zabojad I was trying to find a way that would not require manipulating the ScrollView from a SeekBar, because from my research it turns out that what needs to be done is to block or revert a progress of ScrollView each time the SeekBar is changed.
But the thing is that I can't find a way to access the parent ScrollView from a native implementation of SeekBar View Manager - that's the case.

[zabojad]

But the thing is that I can't find a way to access the parent ScrollView from a native implementation of SeekBar View Manager - that's the case.

@BartoszKlonowski Could we somehow pass the slider a ref to the scrollview from js?

[zabojad]

@BartoszKlonowski sorry to disturb you again, could you share the details of what you've found out so that I could try to continue searching for a solution?

[BartoszKlonowski]

@zabojad I'm back, sorry.
I believe that this SO answer described the best what should be done.
I think that we should somehow force the View to use this requestDisallowInterceptTouchEvent.

[tushar-singhal]

was anyone able to fix this ? I am facing the same issue

[ykvarts]

Solution that works for me, added this as a slider prop
onResponderGrant={() => true}

[blazk0]

@ykvarts solution didn't work for me :/

[blazk0]

In my case, the parent is PanGestureHandler which was overriding the Slider gesture.
Giving a minDist={20} to it fixed it for me

[kien-nt0306]

@ykvarts solution didn't work for me :/

Solution that works for me, added this as a slider prop onResponderGrant={() => true}

thank you it works fine for me now

[za-rakib]

In my case, the parent is PanGestureHandler which was overriding the Slider gesture. Giving a minDist={20} to it fixed it for me

Thank you so much for your solution —it worked perfectly for me!