Inverted slider android

Author: Evyraad

README.md

@@ -73,12 +73,12 @@ Check out the [example project](example) for more examples.
 - [`maximumTrackTintColor`](#maximumtracktintcolor)
 - [`testID`](#testid)
 - [`value`](#value)
+- [`inverted`](#inverted)
 - [`thumbTintColor`](#thumbtintcolor)
 - [`maximumTrackImage`](#maximumtrackimage)
 - [`minimumTrackImage`](#minimumtrackimage)
 - [`thumbImage`](#thumbimage)
 - [`trackImage`](#trackimage)
-- [`inverted`](#inverted)
 
 ---
 
@@ -204,6 +204,15 @@ _This is not a controlled component_, you don't need to update the value during
 
 ---
 
+### `inverted`
+Reverses the direction of the slider. Default value is false.
+
+| Type | Required |
+| ---- | -------- |
+| bool | No       |
+
+---
+
 ### `thumbTintColor`
 
 Color of the foreground switch grip.
@@ -222,8 +231,6 @@ Assigns a maximum track image. Only static images are supported. The leftmost pi
 | ---------------------- | -------- | -------- |
 | Image.propTypes.source | No       | iOS      |
 
----
-
 ### `minimumTrackImage`
 
 Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track.
@@ -252,15 +259,6 @@ 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/)

android/src/main/java/com/reactnativecommunity/slider/ReactSliderManager.java

@@ -7,6 +7,7 @@
 
 package com.reactnativecommunity.slider;
 
+import android.os.Build;
 import android.graphics.PorterDuff;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.LayerDrawable;
@@ -125,7 +126,17 @@ public Class getShadowNodeClass() {
 
   @Override
   protected ReactSlider createViewInstance(ThemedReactContext context) {
-    return new ReactSlider(context, null, STYLE);
+    ReactSlider slider = new ReactSlider(context, null, STYLE);
+    
+    if (Build.VERSION.SDK_INT >= 21) {
+      /** 
+       * The "splitTrack" parameter should have "false" value,
+       * otherwise the SeekBar progress line doesn't appear when it is rotated.
+       */
+      slider.setSplitTrack(false);
+    }
+    
+    return slider;
   }
 
   @ReactProp(name = ViewProps.ENABLED, defaultBoolean = true)
@@ -185,6 +196,12 @@ public void setMaximumTrackTintColor(ReactSlider view, Integer color) {
       background.setColorFilter(color, PorterDuff.Mode.SRC_IN);
     }
   }
+  
+  @ReactProp(name = "inverted", defaultBoolean = false)
+  public void setInverted(ReactSlider view, boolean inverted) {
+    if (inverted) view.setScaleX(-1f);
+    else view.setScaleX(1f);
+  }
 
   @Override
   protected void addEventEmitters(final ThemedReactContext reactContext, final ReactSlider view) {

example/SliderExample.js

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

js/Slider.js

@@ -54,12 +54,6 @@ 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<{|
@@ -146,6 +140,12 @@ type Props = $ReadOnly<{|
    * Used to locate this view in UI automation tests.
    */
   testID?: ?string,
+
+  /**
+   * If true the slider will be inverted.
+   * Default value is false.
+   */
+  inverted?: ?boolean,
 |}>;
 
 /**