Add tapToSeek prop, fix unintentional scrolling, call onValueChanged when tapping (#233)

* Fixes on iOS for #156, #212 and maybe #147.

Fix problem on iOS where slider was unintentionally reacting to scrolling as slider taps (#156). Removing beginTrackingWithTouch which may help us play nicer with gesture responders (#147). Tapping now calls onValueChanged (#212).

* Added "tapToSeek" property for iOS (#211).

Added property to optionally enable tapToSeek on iOS (#211). Chose to leave default behaviour for Android and Windows as most complaints seem to be about disabling this on iOS.

* Fixed a prettier error and added tapToSeek prop top test result snapshots.

Author: smallsaucepan

README.md

@@ -82,6 +82,7 @@ Check out the [example project](example) for more examples.
 - [`testID`](#testid)
 - [`value`](#value)
 - [`inverted`](#inverted)
+- [`tapToSeek`](#tapToSeek)
 - [`vertical`](#vertical)
 - [`thumbTintColor`](#thumbtintcolor)
 - [`maximumTrackImage`](#maximumtrackimage)
@@ -214,6 +215,15 @@ _This is not a controlled component_, you don't need to update the value during
 
 ---
 
+### `tapToSeek`
+Permits tapping on the slider track to set the thumb position. Defaults to false on iOS. No effect on Android or Windows.
+
+| Type | Required | Platform |
+| ---- | -------- | -------- |
+| bool | No       | iOS      |
+
+---
+
 ### `inverted`
 Reverses the direction of the slider. Default value is false.
 

example/SliderExample.js

@@ -131,9 +131,9 @@ export const examples = [
     },
   },
   {
-    title: 'step: 0.25',
+    title: 'step: 0.25, tap to seek on iOS',
     render(): Element<any> {
-      return <SliderExample step={0.25} />;
+      return <SliderExample step={0.25} tapToSeek={true} />;
     },
   },
   {

src/ios/RNCSlider.h

@@ -22,6 +22,7 @@
 @property (nonatomic, strong) UIImage *minimumTrackImage;
 @property (nonatomic, strong) UIImage *maximumTrackImage;
 @property (nonatomic, strong) UIImage *thumbImage;
+@property (nonatomic, assign) bool tapToSeek;
 @property (nonatomic, strong) NSString *accessibilityUnits;
 @property (nonatomic, strong) NSArray *accessibilityIncrements;
 

src/ios/RNCSlider.m

@@ -10,25 +10,11 @@
 @implementation RNCSlider
 {
   float _unclippedValue;
-  UITapGestureRecognizer * tapGesturer;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
 {
-    self = [super initWithFrame:frame];
-    if (self) {
-        tapGesturer = [[UITapGestureRecognizer alloc] initWithTarget: self action:@selector(tapHandler:)];
-        [tapGesturer setNumberOfTapsRequired: 1];
-        [self addGestureRecognizer:tapGesturer];
-    }
-    return self;
-}
-
-- (void)tapHandler:(UITapGestureRecognizer *)gesture {
-    CGPoint touchPoint = [gesture locationInView:self];
-    float rangeWidth = self.maximumValue - self.minimumValue;
-    float sliderPercent = touchPoint.x / self.bounds.size.width;
-    [self setValue:self.minimumValue + (rangeWidth * sliderPercent) animated: YES];
+    return [super initWithFrame:frame];
 }
 
 - (void)setValue:(float)value
@@ -136,9 +122,4 @@ - (void)setInverted:(BOOL)inverted
   }
 }
 
-- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
-{
-    return YES;
-}
-
 @end

src/ios/RNCSliderManager.m

@@ -11,6 +11,7 @@
 #import <React/RCTEventDispatcher.h>
 #import "RNCSlider.h"
 #import <React/UIView+React.h>
+#import "os/log.h"
 
 @implementation RNCSliderManager
 
@@ -27,26 +28,69 @@ - (UIView *)view
    forControlEvents:(UIControlEventTouchUpInside |
                      UIControlEventTouchUpOutside |
                      UIControlEventTouchCancel)];
+
+  UITapGestureRecognizer *tapGesturer;
+  tapGesturer = [[UITapGestureRecognizer alloc] initWithTarget: self action:@selector(tapHandler:)];
+  [tapGesturer setNumberOfTapsRequired: 1];
+  [slider addGestureRecognizer:tapGesturer];
+
   return slider;
 }
 
-static void RNCSendSliderEvent(RNCSlider *sender, BOOL continuous, BOOL isSlidingStart)
-{
-  float value = sender.value;
+- (void)tapHandler:(UITapGestureRecognizer *)gesture {
+  // Bail out if the source view of the gesture isn't an RNCSlider.
+  if ([gesture.view class] != [RNCSlider class]) {
+    return;
+  }
+  RNCSlider *slider = (RNCSlider *)gesture.view;
+
+  if (!slider.tapToSeek) {
+    return;
+  }
+
+  CGPoint touchPoint = [gesture locationInView:slider];
+  float rangeWidth = slider.maximumValue - slider.minimumValue;
+  float sliderPercent = touchPoint.x / slider.bounds.size.width;
+  float value = slider.minimumValue + (rangeWidth * sliderPercent);
+
+  [slider setValue:discreteValue(slider, value) animated: YES];
+  
+  // Trigger onValueChange to address https://github.com/react-native-community/react-native-slider/issues/212
+  if (slider.onRNCSliderValueChange) {
+    slider.onRNCSliderValueChange(@{
+      @"value": @(slider.value),
+    });
+  }
 
-  if (sender.step > 0 &&
-      sender.step <= (sender.maximumValue - sender.minimumValue)) {
+  if (slider.onRNCSliderSlidingComplete) {
+    slider.onRNCSliderSlidingComplete(@{
+      @"value": @(slider.value),
+    });
+  }
+}
 
-    value =
+static float discreteValue(RNCSlider *sender, float value) {
+  // If step is set and less than or equal to difference between max and min values,
+  // pick the closest discrete multiple of step to return.
+  if (sender.step > 0 && sender.step <= (sender.maximumValue - sender.minimumValue)) {
+    return
       MAX(sender.minimumValue,
         MIN(sender.maximumValue,
-          sender.minimumValue + round((sender.value - sender.minimumValue) / sender.step) * sender.step
+          sender.minimumValue + round((value - sender.minimumValue) / sender.step) * sender.step
         )
       );
-
-    [sender setValue:value animated:NO];
   }
 
+  // Otherwise, leave value unchanged.
+  return value;
+}
+
+static void RNCSendSliderEvent(RNCSlider *sender, BOOL continuous, BOOL isSlidingStart)
+{
+  float value = discreteValue(sender, sender.value);
+
+  [sender setValue:value animated:NO];
+
   if (continuous) {
     if (sender.onRNCSliderValueChange && sender.lastValue != value) {
       sender.onRNCSliderValueChange(@{
@@ -99,6 +143,7 @@ - (void)sliderTouchEnd:(RNCSlider *)sender
 RCT_EXPORT_VIEW_PROPERTY(thumbTintColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(thumbImage, UIImage);
 RCT_EXPORT_VIEW_PROPERTY(inverted, BOOL);
+RCT_EXPORT_VIEW_PROPERTY(tapToSeek, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(accessibilityUnits, NSString);
 RCT_EXPORT_VIEW_PROPERTY(accessibilityIncrements, NSArray);
 

src/js/Slider.js

@@ -309,6 +309,7 @@ SliderWithRef.defaultProps = {
   maximumValue: 1,
   step: 0,
   inverted: false,
+  tapToSeek: false,
 };
 
 let styles;

src/js/__tests__/__snapshots__/Slider.test.js.snap

@@ -21,6 +21,7 @@ exports[`<Slider /> renders a slider with custom props 1`] = `
       "height": 40,
     }
   }
+  tapToSeek={false}
   thumbImage={null}
   thumbTintColor="green"
   value={0.5}
@@ -46,6 +47,7 @@ exports[`<Slider /> renders disabled slider 1`] = `
       "height": 40,
     }
   }
+  tapToSeek={false}
   thumbImage={null}
   value={0}
 />
@@ -70,6 +72,7 @@ exports[`<Slider /> renders enabled slider 1`] = `
       "height": 40,
     }
   }
+  tapToSeek={false}
   thumbImage={null}
   value={0}
 />