Inverted slider (#93)

Author: Evyraad

README.md

@@ -78,6 +78,7 @@ Check out the [example project](example) for more examples.
 - [`minimumTrackImage`](#minimumtrackimage)
 - [`thumbImage`](#thumbimage)
 - [`trackImage`](#trackimage)
+- [`inverted`](#inverted)
 
 ---
 
@@ -251,6 +252,15 @@ Assigns a single image for the track. Only static images are supported. The cent
 | ---------------------- | -------- | -------- |
 | Image.propTypes.source | No       | iOS      |
 
+---
+
+### `inverted`
+Reverses the direction of the slider. Default value is false.
+
+| Type | Required | Platform |
+| ---- | -------- | -------- |
+| bool | No       | iOS      |
+
 ## Maintainers
 
 - [Michał Chudziak](https://github.com/michalchudziak) - [Callstack](https://callstack.com/)

example/SliderExample.js

@@ -191,4 +191,11 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Inverted slider direction',
+    platform: 'ios',
+    render(): React.Element<any> {
+      return <SliderExample value={0.6} inverted />;
+    },
+  },
 ];

ios/RNCSlider.m

@@ -84,4 +84,13 @@ - (UIImage *)thumbImage
   return [self thumbImageForState:UIControlStateNormal];
 }
 
+- (void)setInverted:(BOOL)inverted
+{
+  if (inverted) {
+    self.transform = CGAffineTransformMakeScale(-1, 1);
+  } else {
+    self.transform = CGAffineTransformMakeScale(1, 1);
+  }
+}
+
 @end

ios/RNCSliderManager.m

@@ -98,6 +98,7 @@ - (void)sliderTouchEnd:(RNCSlider *)sender
 RCT_EXPORT_VIEW_PROPERTY(onRNCSliderSlidingComplete, RCTBubblingEventBlock);
 RCT_EXPORT_VIEW_PROPERTY(thumbTintColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(thumbImage, UIImage);
+RCT_EXPORT_VIEW_PROPERTY(inverted, BOOL);
 RCT_CUSTOM_VIEW_PROPERTY(disabled, BOOL, RNCSlider)
 {
   if (json) {

js/RNCSliderNativeComponent.js

@@ -29,6 +29,7 @@ type NativeProps = $ReadOnly<{|
   ...ViewProps,
   disabled?: ?boolean,
   enabled?: ?boolean,
+  inverted?: ?boolean,
   maximumTrackImage?: ?ImageSource,
   maximumTrackTintColor?: ?ColorValue,
   maximumValue?: ?number,

js/Slider.js

@@ -54,6 +54,12 @@ type IOSProps = $ReadOnly<{|
    * Sets an image for the thumb. Only static images are supported.
    */
   thumbImage?: ?ImageSource,
+
+  /**
+   * If true the slider will be inverted.
+   * Default value is false.
+   */
+  inverted?: ?boolean,
 |}>;
 
 type Props = $ReadOnly<{|
@@ -270,6 +276,7 @@ SliderWithRef.defaultProps = {
   minimumValue: 0,
   maximumValue: 1,
   step: 0,
+  inverted: false,
 };
 
 let styles;

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

@@ -4,6 +4,7 @@ exports[`<Slider /> renders a slider with custom props 1`] = `
 <RNCSlider
   disabled={false}
   enabled={true}
+  inverted={false}
   maximumTrackTintColor="red"
   maximumValue={2}
   minimumTrackTintColor="blue"
@@ -29,6 +30,7 @@ exports[`<Slider /> renders disabled slider 1`] = `
 <RNCSlider
   disabled={true}
   enabled={false}
+  inverted={false}
   maximumValue={1}
   minimumValue={0}
   onChange={null}
@@ -51,6 +53,7 @@ exports[`<Slider /> renders enabled slider 1`] = `
 <RNCSlider
   disabled={false}
   enabled={true}
+  inverted={false}
   maximumValue={1}
   minimumValue={0}
   onChange={null}