feat: Implement thumbImage for Android (#106)

Author: André Krüger

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

@@ -7,9 +7,22 @@
 package com.reactnativecommunity.slider;
 
 import android.content.Context;
+import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
+import android.graphics.drawable.BitmapDrawable;
 import android.os.Build;
+
+import androidx.annotation.RequiresApi;
 import androidx.appcompat.widget.AppCompatSeekBar;
+
 import android.util.AttributeSet;
+
+import java.net.URL;
+import java.util.concurrent.Callable;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
+import java.util.concurrent.Future;
+
 import javax.annotation.Nullable;
 
 /**
@@ -112,4 +125,40 @@ private int getTotalSteps() {
   private double getStepValue() {
     return mStep > 0 ? mStep : mStepCalculated;
   }
+
+  private BitmapDrawable getBitmapDrawable(final String uri) {
+    BitmapDrawable bitmapDrawable = null;
+    ExecutorService executorService = Executors.newSingleThreadExecutor();
+    Future<BitmapDrawable> future = executorService.submit(new Callable<BitmapDrawable>() {
+      @Override
+      public BitmapDrawable call() {
+        BitmapDrawable bitmapDrawable = null;
+        try {
+          Bitmap bitmap = BitmapFactory.decodeStream(new URL(uri).openStream());
+          bitmapDrawable = new BitmapDrawable(getResources(), bitmap);
+        } catch (Exception e) {
+          e.printStackTrace();
+        }
+        return bitmapDrawable;
+      }
+    });
+    try {
+      bitmapDrawable = future.get();
+    } catch (Exception e) {
+      e.printStackTrace();
+    }
+    return bitmapDrawable;
+  }
+
+  public void setThumbImage(final String uri) {
+    if (uri != null) {
+      setThumb(getBitmapDrawable(uri));
+      // Enable alpha channel for the thumbImage
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+        setSplitTrack(false);
+      }
+    } else {
+      setThumb(getThumb());
+    }
+  }
 }

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

@@ -15,21 +15,22 @@
 import android.view.ViewGroup;
 import android.widget.SeekBar;
 import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.LayoutShadowNode;
-import com.facebook.react.uimanager.ReactShadowNodeImpl;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.yoga.YogaMeasureFunction;
 import com.facebook.yoga.YogaMeasureMode;
 import com.facebook.yoga.YogaMeasureOutput;
 import com.facebook.yoga.YogaNode;
 import java.util.Map;
 
+import javax.annotation.Nullable;
+
 /**
  * Manages instances of {@code ReactSlider}.
  *
@@ -186,6 +187,15 @@ public void setMinimumTrackTintColor(ReactSlider view, Integer color) {
     }
   }
 
+  @ReactProp(name = "thumbImage")
+  public void setThumbImage(ReactSlider view, @Nullable ReadableMap source) {
+    String uri = null;
+    if (source != null) {
+      uri = source.getString("uri");
+    }
+    view.setThumbImage(uri);
+  }
+
   @ReactProp(name = "maximumTrackTintColor", customType = "Color")
   public void setMaximumTrackTintColor(ReactSlider view, Integer color) {
     LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent();

example/SliderExample.js

@@ -167,7 +167,6 @@ exports.examples = [
   },
   {
     title: 'Custom thumb image',
-    platform: 'ios',
     render(): React.Element<any> {
       return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
     },

js/Slider.js

@@ -11,7 +11,7 @@
 'use strict';
 
 const React = require('react');
-const {Platform, StyleSheet} = require('react-native');
+const {Image, Platform, StyleSheet} = require('react-native');
 const RCTSliderNativeComponent = require('./RNCSliderNativeComponent');
 
 import type {NativeComponent} from 'react-native/Libraries/Renderer/shims/ReactNative';
@@ -49,11 +49,6 @@ type IOSProps = $ReadOnly<{|
    * leftmost pixel of the image will be stretched to fill the track.
    */
   maximumTrackImage?: ?ImageSource,
-
-  /**
-   * Sets an image for the thumb. Only static images are supported.
-   */
-  thumbImage?: ?ImageSource,
 |}>;
 
 type Props = $ReadOnly<{|
@@ -141,6 +136,11 @@ type Props = $ReadOnly<{|
    */
   testID?: ?string,
 
+  /**
+   * Sets an image for the thumb. Only static images are supported.
+   */
+  thumbImage?: ?ImageSource,
+
   /**
    * If true the slider will be inverted.
    * Default value is false.
@@ -252,6 +252,7 @@ const Slider = (
   return (
     <RCTSliderNativeComponent
       {...localProps}
+      thumbImage={Image.resolveAssetSource(props.thumbImage)}
       ref={forwardedRef}
       style={style}
       onChange={onChangeEvent}

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

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