From 9a4fd6b78d83ad932d8fcc903b4c3d55b943e296 Mon Sep 17 00:00:00 2001
From: Tim Yung <yungsters@fb.com>
Date: Tue, 31 Jul 2018 20:54:09 -0700
Subject: [PATCH] Switch: Warn for Deprecated Color Props

Summary:
Introduces warnings to `Switch` when the deprecated props are being used.

See D9081343 for more details on the specific prop changes.

Reviewed By: blairvanderhoof

Differential Revision: D9081451

fbshipit-source-id: 7f997fc97d316038f0917d2540b982bd9cf34d03
---
 Libraries/Components/Switch/Switch.js | 36 +++++++++++++--------------
 RNTester/js/SwitchExample.js          | 16 +++++++-----
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js
index c585c7d6f75bc3..237519a5e0b579 100644
--- a/Libraries/Components/Switch/Switch.js
+++ b/Libraries/Components/Switch/Switch.js
@@ -78,21 +78,6 @@ export type Props = $ReadOnly<{|
    * Identifier used to find this view in tests.
    */
   testID?: ?string,
-
-  /**
-   * @deprecated See `thumbColor`.
-   */
-  thumbTintColor?: ?ColorValue,
-
-  /**
-   * @deprecated See `trackColor.false`.
-   */
-  tintColor?: ?ColorValue,
-
-  /**
-   * @deprecated See `trackColor.true`.
-   */
-  onTintColor?: ?ColorValue,
 |}>;
 
 // @see ReactSwitchManager.java
@@ -146,13 +131,10 @@ class Switch extends React.Component<Props> {
       disabled,
       ios_backgroundColor,
       onChange,
-      onTintColor,
       onValueChange,
       style,
       testID,
       thumbColor,
-      thumbTintColor,
-      tintColor,
       trackColor,
       value,
       ...props
@@ -163,15 +145,31 @@ class Switch extends React.Component<Props> {
     let _trackColorForFalse = trackColor?.false;
     let _trackColorForTrue = trackColor?.true;
 
-    // TODO: Add a warning when used.
+    // TODO: Remove support for these props after a couple releases.
+    const {thumbTintColor, tintColor, onTintColor} = (props: $FlowFixMe);
     if (thumbTintColor != null) {
       _thumbColor = thumbTintColor;
+      if (__DEV__) {
+        console.warn(
+          'Switch: `thumbTintColor` is deprecated, use `_thumbColor` instead.',
+        );
+      }
     }
     if (tintColor != null) {
       _trackColorForFalse = tintColor;
+      if (__DEV__) {
+        console.warn(
+          'Switch: `tintColor` is deprecated, use `trackColor` instead.',
+        );
+      }
     }
     if (onTintColor != null) {
       _trackColorForTrue = onTintColor;
+      if (__DEV__) {
+        console.warn(
+          'Switch: `onTintColor` is deprecated, use `trackColor` instead.',
+        );
+      }
     }
 
     const platformProps =
diff --git a/RNTester/js/SwitchExample.js b/RNTester/js/SwitchExample.js
index a8116ff243cf18..2b9988bf8a057d 100644
--- a/RNTester/js/SwitchExample.js
+++ b/RNTester/js/SwitchExample.js
@@ -59,17 +59,21 @@ class ColorSwitchExample extends React.Component<{}, $FlowFixMeState> {
       <View>
         <Switch
           onValueChange={value => this.setState({colorFalseSwitchIsOn: value})}
-          onTintColor="#00ff00"
           style={{marginBottom: 10}}
-          thumbTintColor="#0000ff"
-          tintColor="#ff0000"
+          thumbColor="#0000ff"
+          trackColor={{
+            false: '#ff0000',
+            true: '#00ff00',
+          }}
           value={this.state.colorFalseSwitchIsOn}
         />
         <Switch
           onValueChange={value => this.setState({colorTrueSwitchIsOn: value})}
-          onTintColor="#00ff00"
-          thumbTintColor="#0000ff"
-          tintColor="#ff0000"
+          thumbColor="#0000ff"
+          trackColor={{
+            false: '#ff0000',
+            true: '#00ff00',
+          }}
           value={this.state.colorTrueSwitchIsOn}
         />
       </View>