added a property to set a track image to slider ios

manask88 · facebook-github-bot-7 · commit 2f23b30624f6 · 2015-11-17T08:45:30.000-08:00
Summary: this change will allow the slider to have different track images. Sets an image for the sliderIOS's track. It only supports images that are included as assets. Closes facebook/react-native#3850 Reviewed By: svcscm Differential Revision: D2659680 Pulled By: nicklockwood fb-gh-sync-id: faf6ddea1077b081c1fc05f8f110b669cef9902c
diff --git a/Libraries/Components/SliderIOS/SliderIOS.ios.js b/Libraries/Components/SliderIOS/SliderIOS.ios.js
@@ -11,6 +11,7 @@
  */
 'use strict';
 
+var Image = require('Image');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
@@ -76,6 +77,11 @@ var SliderIOS = React.createClass({
      */
     disabled: PropTypes.bool,
 
+   /**
+     * Sets an image for the track. It only supports images that are included as assets
+     */
+    trackImage: Image.propTypes.source,
+
     /**
      * Callback continuously called while the user is dragging the slider.
      */
diff --git a/React/Views/RCTSlider.h b/React/Views/RCTSlider.h
@@ -19,4 +19,6 @@
 @property (nonatomic, assign) float step;
 @property (nonatomic, assign) float lastValue;
 
+@property (nonatomic, strong) UIImage *trackImage;
+
 @end
diff --git a/React/Views/RCTSlider.m b/React/Views/RCTSlider.m
@@ -32,4 +32,19 @@ - (void)setMaximumValue:(float)maximumValue
   super.value = _unclippedValue;
 }
 
+- (void)setTrackImage:(UIImage *)trackImage
+{
+  if (trackImage != _trackImage) {
+    _trackImage = trackImage;
+
+    CGFloat width = trackImage.size.width;
+
+    UIImage *minimumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){0, width, 0, 0}];
+    UIImage *maximumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){0, 0, 0, width}];
+
+    [super setMinimumTrackImage:minimumTrackImage forState:UIControlStateNormal];
+    [super setMaximumTrackImage:maximumTrackImage forState:UIControlStateNormal];
+  }
+}
+
 @end
diff --git a/React/Views/RCTSliderManager.m b/React/Views/RCTSliderManager.m
@@ -76,6 +76,7 @@ - (void)sliderTouchEnd:(RCTSlider *)sender
 
 RCT_EXPORT_VIEW_PROPERTY(value, float);
 RCT_EXPORT_VIEW_PROPERTY(step, float);
+RCT_EXPORT_VIEW_PROPERTY(trackImage, UIImage);
 RCT_EXPORT_VIEW_PROPERTY(minimumValue, float);
 RCT_EXPORT_VIEW_PROPERTY(maximumValue, float);
 RCT_EXPORT_VIEW_PROPERTY(minimumTrackTintColor, UIColor);
