Support tintColor and thumbTintColor for Switch on Android #11940

satya164 · 2017-01-17T11:04:11Z

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.

cc @brentvatne

facebook-github-bot · 2017-01-17T11:04:36Z

By analyzing the blame information on this pull request, we identified @emilsjolander and @bestander to be potential reviewers.

janicduplessis · 2017-01-17T20:07:29Z

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

+  @ReactProp(name = "thumbTintColor", customType = "Color")
+  public void setThumbTintColor(ReactSwitch view, Integer color) {
+    int thumbTintColor = color != null ? color : DEFAULT_THUMB_TINT_COLOR;
+    view.getThumbDrawable().setColorFilter(thumbTintColor, PorterDuff.Mode.MULTIPLY);


Does passing setColorFilter(null) works to reset to default instead of having to provide default colors?

My mistake. Result of trying too many different ways to do this. Fixed.

satya164 · 2017-01-17T22:19:50Z

Updated @janicduplessis

janicduplessis · 2017-01-18T02:12:45Z

@facebook-github-bot shipit

facebook-github-bot · 2017-01-18T02:13:10Z

@janicduplessis has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

mkonicek · 2017-01-18T05:22:41Z

Nice!

janicduplessis · 2017-01-18T19:43:02Z

@facebook-github-bot shipit

facebook-github-bot · 2017-01-18T19:43:52Z

@janicduplessis has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

gmherr2 · 2017-01-24T20:27:35Z

Correct me if I'm wrong but it looks like this will only color the thumb one color and the track one color. I think for android users it may look a little strange this way, since by default android has 2 colors for the switch (disabled/enabled colors). Btw I actually have a similar PR open for this #11474.

satya164 · 2017-01-24T20:35:30Z

Correct me if I'm wrong but it looks like this will only color the thumb one color and the track one color

What do you mean? Are you saying user shouldn't be able to set different colors? Nothing stops the user from using the same color for both thumb and the track.

gmherr2 · 2017-01-25T05:11:18Z

@satya164 No I don't think thats an issue. My comment was just when skimming over your changes. I didn't see that you handled the off track color, I see that now though. I was also referring to the switch thumb color not being able to change since there is only one prop for that, but I guess you could just do something like this thumbTintColor={this.state.enabled ? '#enabledColor' : '#disabledColor'}.

One issue I did notice when testing was if thumbTintColor or trackTintColor were set and the switch was set to disabled, the colors would still overlay rather than the disabled switch color. I'm assuming this is not the desired affect here?

satya164 · 2017-01-25T07:31:33Z

You can still set custom colours when it's disabled

mkonicek · 2017-01-31T20:13:57Z

Waiting for @satya164 to update the screenshot so tests pass.

mkonicek · 2017-01-31T20:14:39Z

Let's see again what failed, if anything. Merging.

facebook-github-bot · 2017-01-31T20:15:16Z

@mkonicek has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

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 facebook#11940 Differential Revision: D4427491 fbshipit-source-id: 16c569d2e2261daaea93fffa83198f8f6b59a6c8

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 facebook/react-native#11940 Differential Revision: D4427491 fbshipit-source-id: 16c569d2e2261daaea93fffa83198f8f6b59a6c8

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 facebook#11940 Differential Revision: D4427491 fbshipit-source-id: 16c569d2e2261daaea93fffa83198f8f6b59a6c8

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Jan 17, 2017

janicduplessis reviewed Jan 17, 2017

View reviewed changes

Support tintColor and thumbTintColor for Switch on Android

924177d

Merge branch 'master' into switch

6f52a6f

xotahal mentioned this pull request Jan 23, 2017

Material Switch Button xotahal/react-native-material-ui#79

Closed

Merge branch 'master' into switch

eccd4cc

nihgwu mentioned this pull request Jan 30, 2017

Unable to change the <Switch /> color in Android #12121

Closed

facebook-github-bot added GH Review: accepted Import Started This pull request has been imported. This does not imply the PR has been approved. and removed GH Review: review-needed labels Jan 31, 2017

facebook-github-bot closed this in 31099aa Jan 31, 2017

satya164 deleted the switch branch April 19, 2017 12:23

jcurtis mentioned this pull request Feb 14, 2018

[Android] Styling the active SwitchAndroid color? #2903

Closed

vonovak mentioned this pull request Mar 9, 2018

[android] support checkbox tinting #18300

Closed

akaldesign mentioned this pull request May 27, 2018

change settings toggle colors KhalisFoundation/sundar-gutka-react#8

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support tintColor and thumbTintColor for Switch on Android #11940

Support tintColor and thumbTintColor for Switch on Android #11940

satya164 commented Jan 17, 2017 •

edited

facebook-github-bot commented Jan 17, 2017

janicduplessis Jan 17, 2017

satya164 Jan 17, 2017

satya164 commented Jan 17, 2017

janicduplessis commented Jan 18, 2017

facebook-github-bot commented Jan 18, 2017

mkonicek commented Jan 18, 2017

janicduplessis commented Jan 18, 2017

facebook-github-bot commented Jan 18, 2017

gmherr2 commented Jan 24, 2017 •

edited

satya164 commented Jan 24, 2017

gmherr2 commented Jan 25, 2017 •

edited

satya164 commented Jan 25, 2017

mkonicek commented Jan 31, 2017

mkonicek commented Jan 31, 2017

facebook-github-bot commented Jan 31, 2017

Support tintColor and thumbTintColor for Switch on Android #11940

Support tintColor and thumbTintColor for Switch on Android #11940

Conversation

satya164 commented Jan 17, 2017 • edited

facebook-github-bot commented Jan 17, 2017

janicduplessis Jan 17, 2017

Choose a reason for hiding this comment

satya164 Jan 17, 2017

Choose a reason for hiding this comment

satya164 commented Jan 17, 2017

janicduplessis commented Jan 18, 2017

facebook-github-bot commented Jan 18, 2017

mkonicek commented Jan 18, 2017

janicduplessis commented Jan 18, 2017

facebook-github-bot commented Jan 18, 2017

gmherr2 commented Jan 24, 2017 • edited

satya164 commented Jan 24, 2017

gmherr2 commented Jan 25, 2017 • edited

satya164 commented Jan 25, 2017

mkonicek commented Jan 31, 2017

mkonicek commented Jan 31, 2017

facebook-github-bot commented Jan 31, 2017

satya164 commented Jan 17, 2017 •

edited

gmherr2 commented Jan 24, 2017 •

edited

gmherr2 commented Jan 25, 2017 •

edited