diff --git a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-js-UIExplorerApp.ios/testSliderExample_1-iOS10@2x.png b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-js-UIExplorerApp.ios/testSliderExample_1-iOS10@2x.png index 79603c68671632..5d93d20e891409 100644 Binary files a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-js-UIExplorerApp.ios/testSliderExample_1-iOS10@2x.png and b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-js-UIExplorerApp.ios/testSliderExample_1-iOS10@2x.png differ diff --git a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/IntegrationTests-IntegrationTestsApp/testSimpleSnapshotTest_1@2x.png b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/IntegrationTests-IntegrationTestsApp/testSimpleSnapshotTest_1@2x.png index ea37dc900f3d57..fd91abf4238eee 100644 Binary files a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/IntegrationTests-IntegrationTestsApp/testSimpleSnapshotTest_1@2x.png and b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/IntegrationTests-IntegrationTestsApp/testSimpleSnapshotTest_1@2x.png differ diff --git a/Examples/UIExplorer/js/SliderExample.js b/Examples/UIExplorer/js/SliderExample.js index 7fbdb8ac4a3516..82cfb206b40934 100644 --- a/Examples/UIExplorer/js/SliderExample.js +++ b/Examples/UIExplorer/js/SliderExample.js @@ -132,16 +132,23 @@ exports.examples = [ }, { title: 'Custom min/max track tint color', - platform: 'ios', render(): React.Element { return ( ); } }, + { + title: 'Custom thumb color', + platform: 'android', + render(): React.Element { + return ; + } + }, { title: 'Custom thumb image', platform: 'ios', diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js index e54872341e3cf3..23ea68bd278093 100644 --- a/Libraries/Components/Slider/Slider.js +++ b/Libraries/Components/Slider/Slider.js @@ -12,6 +12,7 @@ 'use strict'; var Image = require('Image'); +var ColorPropType = require('ColorPropType'); var NativeMethodsMixin = require('NativeMethodsMixin'); var ReactNativeViewAttributes = require('ReactNativeViewAttributes'); var Platform = require('Platform'); @@ -68,18 +69,16 @@ var Slider = React.createClass({ maximumValue: PropTypes.number, /** - * The color used for the track to the left of the button. Overrides the - * default blue gradient image. - * @platform ios + * The color used for the track to the left of the button. + * Overrides the default blue gradient image on iOS. */ - minimumTrackTintColor: PropTypes.string, + minimumTrackTintColor: ColorPropType, /** - * The color used for the track to the right of the button. Overrides the - * default blue gradient image. - * @platform ios + * The color used for the track to the right of the button. + * Overrides the default blue gradient image on iOS. */ - maximumTrackTintColor: PropTypes.string, + maximumTrackTintColor: ColorPropType, /** * If true the user won't be able to move the slider. @@ -114,6 +113,12 @@ var Slider = React.createClass({ */ thumbImage: Image.propTypes.source, + /** + * Color of the foreground switch grip. + * @platform android + */ + thumbTintColor: ColorPropType, + /** * Callback continuously called while the user is dragging the slider. */ diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/slider/ReactSliderManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/slider/ReactSliderManager.java index 36fb73fd825b05..c7488091acd3e3 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/slider/ReactSliderManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/slider/ReactSliderManager.java @@ -9,16 +9,16 @@ package com.facebook.react.views.slider; -import java.util.Map; - +import android.graphics.Color; +import android.graphics.PorterDuff; +import android.graphics.drawable.Drawable; +import android.graphics.drawable.LayerDrawable; +import android.util.TypedValue; import android.view.View; import android.view.ViewGroup; import android.widget.SeekBar; -import com.facebook.yoga.YogaMeasureMode; -import com.facebook.yoga.YogaMeasureFunction; -import com.facebook.yoga.YogaNodeAPI; -import com.facebook.yoga.YogaMeasureOutput; +import com.facebook.react.R; import com.facebook.react.bridge.ReactContext; import com.facebook.react.common.MapBuilder; import com.facebook.react.uimanager.LayoutShadowNode; @@ -27,6 +27,12 @@ import com.facebook.react.uimanager.UIManagerModule; import com.facebook.react.uimanager.ViewProps; import com.facebook.react.uimanager.annotations.ReactProp; +import com.facebook.yoga.YogaMeasureFunction; +import com.facebook.yoga.YogaMeasureMode; +import com.facebook.yoga.YogaMeasureOutput; +import com.facebook.yoga.YogaNodeAPI; + +import java.util.Map; /** * Manages instances of {@code ReactSlider}. @@ -145,6 +151,37 @@ public void setStep(ReactSlider view, double value) { view.setStep(value); } + @ReactProp(name = "thumbTintColor", customType = "Color") + public void setThumbTintColor(ReactSlider view, Integer color) { + if (color == null) { + view.getThumb().clearColorFilter(); + } else { + view.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN); + } + } + + @ReactProp(name = "minimumTrackTintColor", customType = "Color") + public void setMinimumTrackTintColor(ReactSlider view, Integer color) { + LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent(); + Drawable background = drawable.findDrawableByLayerId(android.R.id.background); + if (color == null) { + background.clearColorFilter(); + } else { + background.setColorFilter(color, PorterDuff.Mode.SRC_IN); + } + } + + @ReactProp(name = "maximumTrackTintColor", customType = "Color") + public void setMaximumTrackTintColor(ReactSlider view, Integer color) { + LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent(); + Drawable progress = drawable.findDrawableByLayerId(android.R.id.progress); + if (color == null) { + progress.clearColorFilter(); + } else { + progress.setColorFilter(color, PorterDuff.Mode.SRC_IN); + } + } + @Override protected void addEventEmitters(final ThemedReactContext reactContext, final ReactSlider view) { view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);