From 57f1f39545bd320b8a5984b886d4892a2143751a Mon Sep 17 00:00:00 2001
From: Kaio Duarte <duartedossantos@gmail.com>
Date: Wed, 5 Feb 2020 19:13:51 +0000
Subject: [PATCH 1/2] update Switch Snack example

---
 docs/switch.md | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/docs/switch.md b/docs/switch.md
index 4cf6a3419a0..ac3578ab5c1 100644
--- a/docs/switch.md
+++ b/docs/switch.md
@@ -9,17 +9,26 @@ This is a controlled component that requires an `onValueChange` callback that up
 
 ```SnackPlayer name=switch
 import React, { useState } from 'react';
-import { Text, View, Switch } from 'react-native';
+import { View, Switch } from 'react-native';
 
 export default function App() {
-  const [value, setValue] = useState(false);
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#cecece',
+      }}>
       <Switch
-        value={value}
-        onValueChange={v => {
-          setValue(v);
-        }}
+        trackColor={{ false: '#767577', true: '#81b0ff' }}
+        thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+        ios_backgroundColor="#3e3e3e"
+        onValueChange={toggleSwitch}
+        value={isEnabled}
       />
     </View>
   );

From 3b904bf0eb82b11769316adb41f970c7ae3421d7 Mon Sep 17 00:00:00 2001
From: Rachel Nabors <rachelnabors@users.noreply.github.com>
Date: Sat, 15 Feb 2020 23:45:30 +0000
Subject: [PATCH 2/2] Update switch.md

Moving styles into the bottom
---
 docs/switch.md | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/switch.md b/docs/switch.md
index ac3578ab5c1..b9601faab6a 100644
--- a/docs/switch.md
+++ b/docs/switch.md
@@ -7,25 +7,19 @@ Renders a boolean input.
 
 This is a controlled component that requires an `onValueChange` callback that updates the `value` prop in order for the component to reflect user actions. If the `value` prop is not updated, the component will continue to render the supplied `value` prop instead of the expected result of any user actions.
 
-```SnackPlayer name=switch
-import React, { useState } from 'react';
-import { View, Switch } from 'react-native';
+```SnackPlayer name=Switch
+import React, { useState } from "react";
+import { View, Switch, StyleSheet } from "react-native";
 
 export default function App() {
   const [isEnabled, setIsEnabled] = useState(false);
   const toggleSwitch = () => setIsEnabled(previousState => !previousState);
 
   return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#cecece',
-      }}>
+    <View style={styles.container}>
       <Switch
-        trackColor={{ false: '#767577', true: '#81b0ff' }}
-        thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+        trackColor={{ false: "#767577", true: "#81b0ff" }}
+        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
         ios_backgroundColor="#3e3e3e"
         onValueChange={toggleSwitch}
         value={isEnabled}
@@ -33,6 +27,14 @@ export default function App() {
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
 ```
 
 ---