Switch
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.
import React, { useState } from 'react';
-import { Text, View, Switch } from 'react-native';
+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"
+ }
+});
EditSwitch
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.
-import React, { useState } from 'react';
-import { Text, View, Switch } from 'react-native';
+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"
+ }
+});