Skip to content

Commit

Permalink
Support tintColor and thumbTintColor for Switch on Android
Browse files Browse the repository at this point in the history
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
  • Loading branch information
satya164 authored and facebook-github-bot committed Jan 31, 2017
1 parent 70a4150 commit d1eeea3
Showing 1 changed file with 4 additions and 7 deletions.
11 changes: 4 additions & 7 deletions UIExplorer/js/SwitchExample.js
Expand Up @@ -147,15 +147,12 @@ var examples = [
{
title: 'Switches are controlled components',
render(): React.Element<any> { return <Switch />; }
}
];

if (Platform.OS === 'ios') {
examples.push({
},
{
title: 'Custom colors can be provided',
render(): React.Element<any> { return <ColorSwitchExample />; }
});
}
}
];

exports.title = '<Switch>';
exports.displayName = 'SwitchExample';
Expand Down

0 comments on commit d1eeea3

Please sign in to comment.