kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-10 22:47:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support tintColor and thumbTintColor for Switch on Android

Browse Source 
Summary:
**Motivation**

`Switch` on Android doesn't allow changing the colors unlike iOS. Changing the colors is desirable in a lot of cases to match the brand colors.

The PR adds support for the `tintColor`, `onTintColor` and `thumbTintColor` props on Android, which more or less behave the same as iOS. The only difference is `tintColor` styles the border color on iOS, whereas it styles the background color on Android.

**Test plan (required)**

Run UIExplorer with the changes, and ensure that the switch example works properly. Here are screenshots from iOS and Android to compare.

![image](https://cloud.githubusercontent.com/assets/1174278/22018002/b05d6482-dcd2-11e6-9c00-f55a71d6ce29.png)

![image](https://cloud.githubusercontent.com/assets/1174278/22018012/b923e974-dcd2-11e6-8d4e-86994f5a66e6.png)

cc brentvatne
Closes https://github.com/facebook/react-native/pull/11940

Differential Revision: D4427491

fbshipit-source-id: 16c569d2e2261daaea93fffa83198f8f6b59a6c8
This commit is contained in:
Satyajit Sahoo
2017-01-31 13:33:38 -08:00
committed by Facebook Github Bot
parent 1beb6274b8
commit 31099aa233
3 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
View File

@@ -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<ReactSwitch> {
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);