React-native-slider: Slider behaving differently on tap in IOS smartphones

[vinithreddy3]

Environment :

RN - 0.61.5
Slider - 2.0.8
iPhone X - 13.3.1 & iPhone 6s ios 12.x

Description :

Slider behaving differently in IOS devices on tap. In iPhone X&6s upon tap sometimes onSlidingStart and onSlidingComplete are being emitted but with wrong value (beginning value of Slider) and onValueChange isn't being emitted, and sometimes all properties are being emitted properly.

In android devices and ipad slider is working fine but above behaviour is observed in ios smartphones

Reproducible Demo -

Perform touch on ios devices (light touch/normal touch etc)

[miriamaryz]

I'm facing the same issue on the iOS phones, slider v 2.0.8. The event is emitted on touch slider line with latest known value, not the current one.

On the Android phones it works fine.

[loiclouvet]

@miriamaryz Did you solve this issue ?

[CapitanRedBeard]

Yeah it seems like on iOS, if you just tap (not slide) then onSlidingComplete gets called but not with the tapped value, it instead gets called with the initial value. Probably because the slider is relying on an initial slide to occur

[Sharcoux]

Could you check that you don't have this issue with @Sharcoux/slider ? Basically, it is the web version of this repo generalized for React-Native

[peterkuiper]

If you are using https://github.com/ds300/patch-package, you can try this patch:

diff --git a/node_modules/@react-native-community/slider/ios/RNCSlider.m b/node_modules/@react-native-community/slider/ios/RNCSlider.m
index c06a672..2240f3a 100644
--- a/node_modules/@react-native-community/slider/ios/RNCSlider.m
+++ b/node_modules/@react-native-community/slider/ios/RNCSlider.m
@@ -124,7 +124,18 @@ - (void)setInverted:(BOOL)inverted

 - (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
 {
-    return YES;
+  if (@available(iOS 12.0, *)) {
+    CGFloat width = self.frame.size.width;
+    CGPoint tapPoint = [touch locationInView:self];
+    float fraction = tapPoint.x / width;
+    float newValue = (self.maximumValue - self.minimumValue) * fraction + self.minimumValue;
+
+    if (newValue != self.value) {
+      self.value = newValue;
+    }
+  }
+
+  return YES;
 }

 @end

For more discussion, check out https://stackoverflow.com/questions/22717167/how-to-enable-tap-and-slide-in-a-uislider. It is not perfect, so if anyone has a better idea, please let me know!