diff --git a/Examples/UIExplorer/js/SwitchExample.js b/Examples/UIExplorer/js/SwitchExample.js index 13ee1125c..3e0c23487 100644 --- a/Examples/UIExplorer/js/SwitchExample.js +++ b/Examples/UIExplorer/js/SwitchExample.js @@ -147,15 +147,12 @@ var examples = [ { title: 'Switches are controlled components', render(): React.Element { return ; } - } -]; - -if (Platform.OS === 'ios') { - examples.push({ + }, + { title: 'Custom colors can be provided', render(): React.Element { return ; } - }); -} + } +]; exports.title = ''; exports.displayName = 'SwitchExample'; diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js index d5f2414fa..ca1e1295c 100644 --- a/Libraries/Components/Switch/Switch.js +++ b/Libraries/Components/Switch/Switch.js @@ -20,6 +20,8 @@ var View = require('View'); var requireNativeComponent = require('requireNativeComponent'); +var { PropTypes } = React; + type DefaultProps = { value: boolean, disabled: boolean, @@ -43,34 +45,31 @@ var Switch = React.createClass({ * The value of the switch. If true the switch will be turned on. * Default value is false. */ - value: React.PropTypes.bool, + value: PropTypes.bool, /** * If true the user won't be able to toggle the switch. * Default value is false. */ - disabled: React.PropTypes.bool, + disabled: PropTypes.bool, /** * Invoked with the new value when the value changes. */ - onValueChange: React.PropTypes.func, + onValueChange: PropTypes.func, /** * Used to locate this view in end-to-end tests. */ - testID: React.PropTypes.string, + testID: PropTypes.string, /** - * Border color when the switch is turned off. - * @platform ios + * Border color on iOS and background color on Android when the switch is turned off. */ tintColor: ColorPropType, /** * Background color when the switch is turned on. - * @platform ios */ onTintColor: ColorPropType, /** * Color of the foreground switch grip. - * @platform ios */ thumbTintColor: ColorPropType, }, @@ -104,6 +103,7 @@ var Switch = React.createClass({ props.enabled = !this.props.disabled; props.on = this.props.value; props.style = this.props.style; + props.trackTintColor = this.props.value ? this.props.onTintColor : this.props.tintColor; } else if (Platform.OS === 'ios') { props.style = [styles.rctSwitchIOS, this.props.style]; } @@ -126,11 +126,18 @@ var styles = StyleSheet.create({ if (Platform.OS === 'android') { var RCTSwitch = requireNativeComponent('AndroidSwitch', Switch, { - nativeOnly: { onChange: true, on: true, enabled: true } + nativeOnly: { + onChange: true, + on: true, + enabled: true, + trackTintColor: true, + } }); } else { var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, { - nativeOnly: { onChange: true } + nativeOnly: { + onChange: true + } }); } diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java index b1a49de22..5c70e8b35 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java @@ -10,6 +10,7 @@ // switchview because switch is a keyword package com.facebook.react.views.switchview; +import android.graphics.PorterDuff; import android.view.View; import android.view.ViewGroup; import android.widget.CompoundButton; @@ -117,6 +118,24 @@ public class ReactSwitchManager extends SimpleViewManager { view.setOnCheckedChangeListener(ON_CHECKED_CHANGE_LISTENER); } + @ReactProp(name = "thumbTintColor", customType = "Color") + public void setThumbTintColor(ReactSwitch view, Integer color) { + if (color == null) { + view.getThumbDrawable().clearColorFilter(); + } else { + view.getThumbDrawable().setColorFilter(color, PorterDuff.Mode.MULTIPLY); + } + } + + @ReactProp(name = "trackTintColor", customType = "Color") + public void setTrackTintColor(ReactSwitch view, Integer color) { + if (color == null) { + view.getTrackDrawable().clearColorFilter(); + } else { + view.getTrackDrawable().setColorFilter(color, PorterDuff.Mode.MULTIPLY); + } + } + @Override protected void addEventEmitters(final ThemedReactContext reactContext, final ReactSwitch view) { view.setOnCheckedChangeListener(ON_CHECKED_CHANGE_LISTENER);