diff --git a/docs/switch.md b/docs/switch.md
index 4cf6a3419a0..b9601faab6a 100644
--- a/docs/switch.md
+++ b/docs/switch.md
@@ -7,23 +7,34 @@ 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 { Text, 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 [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={styles.container}>
       <Switch
-        value={value}
-        onValueChange={v => {
-          setValue(v);
-        }}
+        trackColor={{ false: "#767577", true: "#81b0ff" }}
+        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
+        ios_backgroundColor="#3e3e3e"
+        onValueChange={toggleSwitch}
+        value={isEnabled}
       />
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
 ```
 
 ---