Add option for both min/max track image.

Summary:
This is a followup to PR #3850 but now separates min/max track images into different properties.
Closes #4476

Add examples for `minimumTrackTintColor`, `maximumTrackTintColor`, `minimumTrackImage`, `maximumTrackImage` to UIExplorer.
Closes https://github.com/facebook/react-native/pull/4586

Reviewed By: svcscm

Differential Revision: D2779193

Pulled By: nicklockwood

fb-gh-sync-id: 0510a0f496816baacdd0d4be0f3cd3a63a5a9865

Examples/UIExplorer/SliderIOSExample.js

@@ -84,10 +84,38 @@ exports.examples = [
       return <SliderExample step={0.25} />;
     }
   },
+  {
+    title: 'Custom min/max track tint color',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackTintColor={'red'}
+          maximumTrackTintColor={'green'}
+        />
+      );
+    }
+  },
   {
     title: 'Custom thumb image',
     render(): ReactElement {
-      return <SliderExample thumbImage={require('image!uie_thumb_big')} />;
+      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
     }
-  }
+  },
+  {
+    title: 'Custom track image',
+    render(): ReactElement {
+      return <SliderExample trackImage={require('./slider.png')} />;
+    }
+  },
+  {
+    title: 'Custom min/max track image',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackImage={require('./slider-left.png')}
+          maximumTrackImage={require('./slider-right.png')}
+        />
+      );
+    }
+  },
 ];

Examples/UIExplorer/UIExplorer/Images.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

Libraries/Components/SliderIOS/SliderIOS.ios.js

@@ -78,11 +78,24 @@ var SliderIOS = React.createClass({
      */
     disabled: PropTypes.bool,
 
-   /**
-     * Sets an image for the track. It only supports images that are included as assets
+    /**
+     * Assigns a single image for the track. Only static images are supported.
+     * The center pixel of the image will be stretched to fill the track.
      */
     trackImage: Image.propTypes.source,
 
+    /**
+     * Assigns a minimum track image. Only static images are supported. The
+     * rightmost pixel of the image will be stretched to fill the track.
+     */
+    minimumTrackImage: Image.propTypes.source,
+
+    /**
+     * Assigns a maximum track image. Only static images are supported. The
+     * leftmost pixel of the image will be stretched to fill the track.
+     */
+    maximumTrackImage: Image.propTypes.source,
+
     /**
      * Sets an image for the thumb. It only supports static images.
      */
@@ -107,28 +120,18 @@ var SliderIOS = React.createClass({
   },
 
   render: function() {
+    let {style, onValueChange, onSlidingComplete, ...props} = this.props;
+    props.style = [styles.slider, style];
 
-    let onValueChange = this.props.onValueChange && ((event: Event) => {
-      this.props.onValueChange &&
-        this.props.onValueChange(event.nativeEvent.value);
+    props.onValueChange = onValueChange && ((event: Event) => {
+      onValueChange && onValueChange(event.nativeEvent.value);
     });
 
-    let onSlidingComplete = this.props.onSlidingComplete && ((event: Event) => {
-      this.props.onSlidingComplete &&
-        this.props.onSlidingComplete(event.nativeEvent.value);
+    props.onSlidingComplete = onSlidingComplete && ((event: Event) => {
+      onSlidingComplete && onSlidingComplete(event.nativeEvent.value);
     });
 
-    let {style, ...props} = this.props;
-    style = [styles.slider, style];
-
-    return (
-      <RCTSlider
-        {...props}
-        style={style}
-        onValueChange={onValueChange}
-        onSlidingComplete={onSlidingComplete}
-      />
-    );
+    return <RCTSlider {...props}/>;
   }
 });
 

React/Views/RCTSlider.h

@@ -20,6 +20,9 @@
 @property (nonatomic, assign) float lastValue;
 
 @property (nonatomic, strong) UIImage *trackImage;
+@property (nonatomic, strong) UIImage *minimumTrackImage;
+@property (nonatomic, strong) UIImage *maximumTrackImage;
+
 @property (nonatomic, strong) UIImage *thumbImage;
 
 

React/Views/RCTSlider.m

@@ -9,6 +9,8 @@
 
 #import "RCTSlider.h"
 
+#import <tgmath.h>
+
 @implementation RCTSlider
 {
   float _unclippedValue;
@@ -36,17 +38,46 @@
 {
   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];
+    CGFloat width = trackImage.size.width / 2;
+    UIImage *minimumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){
+      0, width, 0, width
+    } resizingMode:UIImageResizingModeStretch];
+    UIImage *maximumTrackImage = [trackImage resizableImageWithCapInsets:(UIEdgeInsets){
+      0, width, 0, width
+    } resizingMode:UIImageResizingModeStretch];
+    [self setMinimumTrackImage:minimumTrackImage forState:UIControlStateNormal];
+    [self setMaximumTrackImage:maximumTrackImage forState:UIControlStateNormal];
   }
 }
 
+- (void)setMinimumTrackImage:(UIImage *)minimumTrackImage
+{
+  _trackImage = nil;
+  minimumTrackImage = [minimumTrackImage resizableImageWithCapInsets:(UIEdgeInsets){
+    0, minimumTrackImage.size.width, 0, 0
+  } resizingMode:UIImageResizingModeStretch];
+  [self setMinimumTrackImage:minimumTrackImage forState:UIControlStateNormal];
+}
+
+- (UIImage *)minimumTrackImage
+{
+  return [self thumbImageForState:UIControlStateNormal];
+}
+
+- (void)setMaximumTrackImage:(UIImage *)maximumTrackImage
+{
+  _trackImage = nil;
+  maximumTrackImage = [maximumTrackImage resizableImageWithCapInsets:(UIEdgeInsets){
+    0, 0, 0, maximumTrackImage.size.width
+  } resizingMode:UIImageResizingModeStretch];
+  [self setMaximumTrackImage:maximumTrackImage forState:UIControlStateNormal];
+}
+
+- (UIImage *)maximumTrackImage
+{
+  return [self thumbImageForState:UIControlStateNormal];
+}
+
 - (void)setThumbImage:(UIImage *)thumbImage
 {
   [self setThumbImage:thumbImage forState:UIControlStateNormal];

React/Views/RCTSliderManager.m

@@ -77,6 +77,8 @@ static void RCTSendSliderEvent(RCTSlider *sender, BOOL continuous)
 RCT_EXPORT_VIEW_PROPERTY(value, float);
 RCT_EXPORT_VIEW_PROPERTY(step, float);
 RCT_EXPORT_VIEW_PROPERTY(trackImage, UIImage);
+RCT_EXPORT_VIEW_PROPERTY(minimumTrackImage, UIImage);
+RCT_EXPORT_VIEW_PROPERTY(maximumTrackImage, UIImage);
 RCT_EXPORT_VIEW_PROPERTY(minimumValue, float);
 RCT_EXPORT_VIEW_PROPERTY(maximumValue, float);
 RCT_EXPORT_VIEW_PROPERTY(minimumTrackTintColor, UIColor);