[change] Switch prop 'trackColor' support

Remove support for legacy React Native props and add support for the
'trackColor' object. Retains support for the web-only equivalents as I think
this API is preferable to the one in React Native, both in terms of flexibility
and performance (no inline objects).

Fix #1382

Author: necolas

packages/docs/src/components/Switch/Switch.stories.mdx

@@ -26,7 +26,7 @@ The color of the thumb grip when the switch is turned on. (Web-only)
 
 ### activeTrackColor
 
-The color of the track when the switch is turned on. (Web-only, equivalent to React Native's `onTintColor`)
+The color of the track when the switch is turned on. (Web-only)
 
 <Preview withSource='none'>
   <Story name="activeTrackColor">
@@ -56,7 +56,7 @@ Invoked with the new value when the value changes.
 
 ### thumbColor
 
-The color of the thumb grip when the switch is turned off. (Web-only, equivalent to React Native's `thumbTintColor`)
+The color of the thumb grip when the switch is turned off.
 
 <Preview withSource='none'>
   <Story name="thumbColor">
@@ -66,7 +66,7 @@ The color of the thumb grip when the switch is turned off. (Web-only, equivalent
 
 ### trackColor
 
-The color of the track when the switch is turned off. (Web-only, equivalent to React Native's `tintColor`)
+The color of the track when the switch is turned off.
 
 <Preview withSource='none'>
   <Story name="trackColor">

packages/react-native-web/src/exports/Switch/index.js

@@ -25,12 +25,8 @@ type SwitchProps = {
   disabled?: boolean,
   onValueChange?: (e: any) => void,
   thumbColor?: ColorValue,
-  trackColor?: ColorValue,
-  value?: boolean,
-  // RN compat
-  onTintColor?: ColorValue,
-  thumbTintColor?: ColorValue,
-  tintColor?: ColorValue
+  trackColor?: ColorValue | {| false: ColorValue, true: ColorValue |},
+  value?: boolean
 };
 
 const emptyObject = {};
@@ -62,10 +58,6 @@ class Switch extends React.Component<SwitchProps> {
       thumbColor = '#FAFAFA',
       trackColor = '#939393',
       value = false,
-      // React Native compatibility
-      onTintColor,
-      thumbTintColor,
-      tintColor,
       ...other
     } = this.props;
 
@@ -74,30 +66,33 @@ class Switch extends React.Component<SwitchProps> {
     const minWidth = multiplyStyleLengthValue(height, 2);
     const width = styleWidth > minWidth ? styleWidth : minWidth;
     const trackBorderRadius = multiplyStyleLengthValue(height, 0.5);
-    const trackCurrentColor = value ? onTintColor || activeTrackColor : tintColor || trackColor;
-    const thumbCurrentColor = value ? activeThumbColor : thumbTintColor || thumbColor;
+    const trackCurrentColor = value
+      ? (trackColor != null && typeof trackColor === 'object' && trackColor.true) ||
+        activeTrackColor
+      : (trackColor != null && typeof trackColor === 'object' && trackColor.false) || trackColor;
+    const thumbCurrentColor = value ? activeThumbColor : thumbColor;
     const thumbHeight = height;
     const thumbWidth = thumbHeight;
 
-    const rootStyle = [styles.root, style, { height, width }, disabled && styles.cursorDefault];
+    const rootStyle = [styles.root, style, disabled && styles.cursorDefault, { height, width }];
 
     const trackStyle = [
       styles.track,
       {
-        backgroundColor: trackCurrentColor,
+        backgroundColor: disabled ? '#D5D5D5' : trackCurrentColor,
         borderRadius: trackBorderRadius
-      },
-      disabled && styles.disabledTrack
+      }
     ];
 
     const thumbStyle = [
       styles.thumb,
+      value && styles.thumbActive,
       {
-        backgroundColor: thumbCurrentColor,
+        backgroundColor: disabled ? '#BDBDBD' : thumbCurrentColor,
         height: thumbHeight,
+        marginStart: value ? multiplyStyleLengthValue(thumbWidth, -1) : 0,
         width: thumbWidth
-      },
-      disabled && styles.disabledThumb
+      }
     ];
 
     const nativeControl = createElement('input', {
@@ -115,16 +110,7 @@ class Switch extends React.Component<SwitchProps> {
     return (
       <View {...other} style={rootStyle}>
         <View style={trackStyle} />
-        <View
-          ref={this._setThumbRef}
-          style={[
-            thumbStyle,
-            value && styles.thumbOn,
-            {
-              marginStart: value ? multiplyStyleLengthValue(thumbWidth, -1) : 0
-            }
-          ]}
-        />
+        <View ref={this._setThumbRef} style={thumbStyle} />
         {nativeControl}
       </View>
     );
@@ -170,9 +156,6 @@ const styles = StyleSheet.create({
     transitionDuration: '0.1s',
     width: '100%'
   },
-  disabledTrack: {
-    backgroundColor: '#D5D5D5'
-  },
   thumb: {
     alignSelf: 'flex-start',
     borderRadius: '100%',
@@ -181,12 +164,9 @@ const styles = StyleSheet.create({
     transform: [{ translateZ: 0 }],
     transitionDuration: '0.1s'
   },
-  thumbOn: {
+  thumbActive: {
     start: '100%'
   },
-  disabledThumb: {
-    backgroundColor: '#BDBDBD'
-  },
   nativeControl: {
     ...StyleSheet.absoluteFillObject,
     height: '100%',