From 5bdd6da7566ee66dd4c048e929fbc16e25e17763 Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Thu, 4 Jun 2020 16:12:51 +0200
Subject: [PATCH 1/7] Switch with Custom Size example

---
 RNTester/js/examples/Switch/SwitchExample.js | 50 +++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/RNTester/js/examples/Switch/SwitchExample.js b/RNTester/js/examples/Switch/SwitchExample.js
index ce825594e1150a..834ee769ae68f1 100644
--- a/RNTester/js/examples/Switch/SwitchExample.js
+++ b/RNTester/js/examples/Switch/SwitchExample.js
@@ -11,7 +11,7 @@
 'use strict';
 
 const React = require('react');
-const {Switch, Text, View} = require('react-native');
+const {Button, Switch, Text, View} = require('react-native');
 
 type OnOffIndicatorProps = $ReadOnly<{|on: boolean, testID: string|}>;
 function OnOffIndicator({on, testID}: OnOffIndicatorProps) {
@@ -202,6 +202,48 @@ class EventSwitchExample extends React.Component<{...}, $FlowFixMeState> {
   }
 }
 
+class CustomSizeSwitchExample extends React.Component<
+  {||},
+  SimpleSwitchExampleState,
+> {
+  state = {
+    trueSwitchIsOn: true,
+    falseSwitchIsOn: false,
+    width: 200,
+  };
+
+  render() {
+    const { width } = this.state;
+    return (
+      <>
+        <View
+          style={{
+            display: "flex",
+            alignItems: "flex-end",
+          }}>
+          <Switch
+            testID="on-off-initial-off"
+            onValueChange={value => this.setState({falseSwitchIsOn: value})}
+            trackColor={{
+              true: 'yellow',
+              false: 'purple',
+            }}
+            value={this.state.falseSwitchIsOn}
+            switchMinWidth={width}
+            style={{width: width}}
+          />
+        </View>
+        <Button 
+          title="increase width"
+          onPress={() => this.setState({width: width+50})} />
+        <Button 
+          title="decrease width"
+          onPress={() => this.setState({width: width-50})} />
+      </>
+    );
+  }
+}
+
 exports.title = '<Switch>';
 exports.displayName = 'SwitchExample';
 exports.description = 'Native boolean input';
@@ -236,4 +278,10 @@ exports.examples = [
       return <ColorSwitchExample />;
     },
   },
+  {
+    title: 'Custom size',
+    render(): React.Element<any> {
+      return <CustomSizeSwitchExample />;
+    },
+  },
 ];

From 79c9820909b4568abbb5c0e1032e0ad0a8db3efc Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Thu, 4 Jun 2020 16:56:56 +0200
Subject: [PATCH 2/7] adding androidMinWidth @ReactProp to RNMSwitch.java

---
 .../facebook/react/views/switchview/ReactSwitchManager.java | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
index c2196f3ff142dc..b86fbdc018792a 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
@@ -175,6 +175,12 @@ public void setTrackTintColor(ReactSwitch view, @Nullable Integer color) {
     view.setTrackColor(color);
   }
 
+  @ReactProp(name = "androidMinWidth")
+  public void setSwitchMinWidth(ReactSwitch view, Integer pixels) {
+    Integer width = pixels == null ? view.getSwitchMinWidth() : pixels;
+    view.setSwitchMinWidth(width);
+  }
+
   @Override
   public void setNativeValue(ReactSwitch view, boolean value) {
     setValueInternal(view, value);

From d838dfbe770ecca724c850a60d2d27dd24ceb81b Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Thu, 4 Jun 2020 17:14:32 +0200
Subject: [PATCH 3/7] adding Custom Size Switch Example

---
 RNTester/js/examples/Switch/SwitchExample.js | 28 +++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/RNTester/js/examples/Switch/SwitchExample.js b/RNTester/js/examples/Switch/SwitchExample.js
index 834ee769ae68f1..95837732805348 100644
--- a/RNTester/js/examples/Switch/SwitchExample.js
+++ b/RNTester/js/examples/Switch/SwitchExample.js
@@ -202,9 +202,15 @@ class EventSwitchExample extends React.Component<{...}, $FlowFixMeState> {
   }
 }
 
+type CustomSizeSwitchExampleState = $ReadOnly<{|
+  trueSwitchIsOn: boolean,
+  falseSwitchIsOn: boolean,
+  width: number,
+|}>;
+
 class CustomSizeSwitchExample extends React.Component<
   {||},
-  SimpleSwitchExampleState,
+  CustomSizeSwitchExampleState,
 > {
   state = {
     trueSwitchIsOn: true,
@@ -213,13 +219,13 @@ class CustomSizeSwitchExample extends React.Component<
   };
 
   render() {
-    const { width } = this.state;
+    const {width} = this.state;
     return (
       <>
         <View
           style={{
-            display: "flex",
-            alignItems: "flex-end",
+            display: 'flex',
+            alignItems: 'flex-end',
           }}>
           <Switch
             testID="on-off-initial-off"
@@ -229,16 +235,18 @@ class CustomSizeSwitchExample extends React.Component<
               false: 'purple',
             }}
             value={this.state.falseSwitchIsOn}
-            switchMinWidth={width}
-            style={{width: width}}
+            androidMinWidth={width}
+            style={{width}}
           />
         </View>
-        <Button 
+        <Button
           title="increase width"
-          onPress={() => this.setState({width: width+50})} />
-        <Button 
+          onPress={() => this.setState({width: width + 50})}
+        />
+        <Button
           title="decrease width"
-          onPress={() => this.setState({width: width-50})} />
+          onPress={() => this.setState({width: width - 50})}
+        />
       </>
     );
   }

From 88a71cd4fa397669d352a576446a6b92a77a9bbc Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Thu, 4 Jun 2020 17:15:43 +0200
Subject: [PATCH 4/7] adding type androidMinWidth to Switch Component

---
 .../Components/Switch/AndroidSwitchNativeComponent.js     | 1 +
 Libraries/Components/Switch/Switch.js                     | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/Libraries/Components/Switch/AndroidSwitchNativeComponent.js b/Libraries/Components/Switch/AndroidSwitchNativeComponent.js
index 61629b32cc6335..5b331158eff78c 100644
--- a/Libraries/Components/Switch/AndroidSwitchNativeComponent.js
+++ b/Libraries/Components/Switch/AndroidSwitchNativeComponent.js
@@ -41,6 +41,7 @@ type NativeProps = $ReadOnly<{|
   on?: WithDefault<boolean, false>,
   thumbTintColor?: ?ColorValue,
   trackTintColor?: ?ColorValue,
+  androidMinWidth?: number,
 
   // Events
   onChange?: BubblingEventHandler<SwitchChangeEvent>,
diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js
index 3b0937d893e040..362b441ee70fd1 100644
--- a/Libraries/Components/Switch/Switch.js
+++ b/Libraries/Components/Switch/Switch.js
@@ -69,6 +69,12 @@ export type Props = $ReadOnly<{|
    */
   ios_backgroundColor?: ?ColorValue,
 
+  /**
+   * Only Android, custom switch minimum width size.
+   * Switch width should be also separately specified in the style prop.
+   **/
+  androidMinWidth?: number,
+
   /**
    * Called when the user tries to change the value of the switch.
    *
@@ -110,6 +116,7 @@ class Switch extends React.Component<Props> {
       thumbColor,
       trackColor,
       value,
+      androidMinWidth,
       ...props
     } = this.props;
 
@@ -124,6 +131,7 @@ class Switch extends React.Component<Props> {
         thumbTintColor: thumbColor,
         trackColorForFalse: trackColorForFalse,
         trackColorForTrue: trackColorForTrue,
+        androidMinWidth,
         trackTintColor: value === true ? trackColorForTrue : trackColorForFalse,
       };
 

From acb486844f8e41724d8901f243d035a50a7e2760 Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Fri, 5 Jun 2020 10:45:32 +0200
Subject: [PATCH 5/7] updating default Pixel width for Switch component

---
 RNTester/js/examples/Switch/SwitchExample.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/RNTester/js/examples/Switch/SwitchExample.js b/RNTester/js/examples/Switch/SwitchExample.js
index 95837732805348..f11fb3227a0c80 100644
--- a/RNTester/js/examples/Switch/SwitchExample.js
+++ b/RNTester/js/examples/Switch/SwitchExample.js
@@ -215,7 +215,7 @@ class CustomSizeSwitchExample extends React.Component<
   state = {
     trueSwitchIsOn: true,
     falseSwitchIsOn: false,
-    width: 200,
+    width: 50,
   };
 
   render() {

From 7c6901e72b511565bd2ce2c1b6d91de2ef2f1956 Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Fri, 5 Jun 2020 10:46:37 +0200
Subject: [PATCH 6/7] convert dp parameter for setSwitchMinWidth to pixels

---
 .../facebook/react/views/switchview/ReactSwitchManager.java | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
index b86fbdc018792a..27e092110baab6 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
@@ -176,9 +176,9 @@ public void setTrackTintColor(ReactSwitch view, @Nullable Integer color) {
   }
 
   @ReactProp(name = "androidMinWidth")
-  public void setSwitchMinWidth(ReactSwitch view, Integer pixels) {
-    Integer width = pixels == null ? view.getSwitchMinWidth() : pixels;
-    view.setSwitchMinWidth(width);
+  public void setSwitchMinWidth(ReactSwitch view, float dp) {
+    Integer pixels = Math.round(PixelUtil.toPixelFromDIP(dp));
+    view.setSwitchMinWidth(pixels);
   }
 
   @Override

From 737ee781d6cf6f4961d48d7c033abc089af23acf Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Thu, 18 Jun 2020 09:39:54 +0200
Subject: [PATCH 7/7] rename prop to android_minWidth

---
 Libraries/Components/Switch/AndroidSwitchNativeComponent.js | 2 +-
 Libraries/Components/Switch/Switch.js                       | 6 +++---
 RNTester/js/examples/Switch/SwitchExample.js                | 2 +-
 .../facebook/react/views/switchview/ReactSwitchManager.java | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Libraries/Components/Switch/AndroidSwitchNativeComponent.js b/Libraries/Components/Switch/AndroidSwitchNativeComponent.js
index 5b331158eff78c..ebd0b23fe0848f 100644
--- a/Libraries/Components/Switch/AndroidSwitchNativeComponent.js
+++ b/Libraries/Components/Switch/AndroidSwitchNativeComponent.js
@@ -41,7 +41,7 @@ type NativeProps = $ReadOnly<{|
   on?: WithDefault<boolean, false>,
   thumbTintColor?: ?ColorValue,
   trackTintColor?: ?ColorValue,
-  androidMinWidth?: number,
+  android_minWidth?: number,
 
   // Events
   onChange?: BubblingEventHandler<SwitchChangeEvent>,
diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js
index 362b441ee70fd1..cbe47684ee0543 100644
--- a/Libraries/Components/Switch/Switch.js
+++ b/Libraries/Components/Switch/Switch.js
@@ -73,7 +73,7 @@ export type Props = $ReadOnly<{|
    * Only Android, custom switch minimum width size.
    * Switch width should be also separately specified in the style prop.
    **/
-  androidMinWidth?: number,
+  android_minWidth?: number,
 
   /**
    * Called when the user tries to change the value of the switch.
@@ -116,7 +116,7 @@ class Switch extends React.Component<Props> {
       thumbColor,
       trackColor,
       value,
-      androidMinWidth,
+      android_minWidth,
       ...props
     } = this.props;
 
@@ -131,7 +131,7 @@ class Switch extends React.Component<Props> {
         thumbTintColor: thumbColor,
         trackColorForFalse: trackColorForFalse,
         trackColorForTrue: trackColorForTrue,
-        androidMinWidth,
+        android_minWidth,
         trackTintColor: value === true ? trackColorForTrue : trackColorForFalse,
       };
 
diff --git a/RNTester/js/examples/Switch/SwitchExample.js b/RNTester/js/examples/Switch/SwitchExample.js
index f11fb3227a0c80..c614e40d0126df 100644
--- a/RNTester/js/examples/Switch/SwitchExample.js
+++ b/RNTester/js/examples/Switch/SwitchExample.js
@@ -235,7 +235,7 @@ class CustomSizeSwitchExample extends React.Component<
               false: 'purple',
             }}
             value={this.state.falseSwitchIsOn}
-            androidMinWidth={width}
+            android_minWidth={width}
             style={{width}}
           />
         </View>
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
index 27e092110baab6..e9672f564780bc 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java
@@ -175,7 +175,7 @@ public void setTrackTintColor(ReactSwitch view, @Nullable Integer color) {
     view.setTrackColor(color);
   }
 
-  @ReactProp(name = "androidMinWidth")
+  @ReactProp(name = "android_minWidth")
   public void setSwitchMinWidth(ReactSwitch view, float dp) {
     Integer pixels = Math.round(PixelUtil.toPixelFromDIP(dp));
     view.setSwitchMinWidth(pixels);