The React Native Switch API is a core component used to toggle between two states, typically on and off. It is commonly used in settings screens for enabling or disabling features like notifications, dark mode, etc.
- It is a controlled component, meaning its value is managed using state (true or false).
- It provides props like value, onValueChange, and disabled to control behavior.
- It supports custom colors using props like trackColor and thumbColor for better UI design.
import React, { useState } from 'react';
import { View, Switch } from 'react-native';
const App = () => {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previous => !previous);
return (
<View style={{ marginTop: 50 }}>
<Switch
value={isEnabled}
onValueChange={toggleSwitch}
trackColor={{ false: 'gray', true: 'green' }}
thumbColor={isEnabled ? 'white' : 'white'}
/>
</View>
);
};
export default App;
Syntax
<Switch
trackColor={}
thumbColor={}
value={}
onValueChange={}
/>Props for Switch API
- value – Controls the current state of the switch (true for ON, false for OFF).
- onValueChange – Callback function that runs when the user toggles the switch.
- disabled – Disables the switch when set to true, preventing user interaction.
- trackColor – Changes the background color of the switch track for ON and OFF states.
- thumbColor – Sets the color of the circular toggle button (thumb).
- ios_backgroundColor – Sets the background color of the switch when OFF (iOS only).
- style – Applies custom styling like margin, size, or position.
- testID – Used to identify the switch in testing.
Now let’s start with the implementation.
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --templateNote: Replace the app-name with your app name for example : react-native-demo-app.
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo.
cd app-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
1. For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
2. For iOS users, simply scan the QR code using the Camera app.
3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Start Coding
Now let's implement the Switch. Here we created a Switch and when someone toggles the switch the color of the switch and text will change.
- Import libraries: Import required libraries at the top of the file.
// Import React and useState hook from React library
import React, { useState } from 'react';
import {
StyleSheet, // Import StyleSheet for styling
Text, // Import Text component for displaying text
View, // Import View component for layout
Switch // Import Switch component for toggle functionality
} from 'react-native'; // Import components from react-native library
- StyleSheet: Create a StyleSheet to style components like a container.
const styles = StyleSheet.create({
container: { // Style for the main container
flex: 1, // Use full height of the screen
alignItems: 'center', // Center align items horizontally
justifyContent: 'center', // Center align items vertically
},
});
- Switch: This is a "Switch Component" for toggle functionality.
<Switch
trackColor={{ false: "#43f746", true: "#63dff2" }} // Set track color for the switch based on the state
thumbColor={Enable ? "#faf68c" : "#e243f7"} // Set thumb color for the switch based on the state
onValueChange={toggle} // Call 'toggle' function when the switch value changes
value={Enable} // Bind the switch value to the 'Enable' state
/>
- Text: This component is used to display text on the app screen.
{/* Text color changes based on the 'Enable' state */}
<Text style={{ color: Enable ? "red" : "green" }}>
{/* Displayed text */}
GeeksforGeeks
</Text>
- toggle function: This function is used to toggle the state of 'Enable'
// Function to toggle the state of 'Enable'
const toggle = (state) => {
// Update the state with the new value
setEnable(state);
}
- useState: It is used to declare a state variable 'Enable' with initial value 'false' and a function 'setEnable' to update it.
const [Enable, setEnable] = useState(false);
- App Component: Wrap the Switch and Text with a View and return that inside the App function to render and place the toggle function and useState inside the App function, also make sure to export the App.
// Define the main App component
export default function App() {
// Declare a state variable 'Enable' with initial value 'false' and a function 'setEnable' to update it
const [Enable, setEnable] = useState(false);
// Function to toggle the state of 'Enable'
const toggle = (state) => {
// Update the state with the new value
setEnable(state);
}
return (
<View style={styles.container}> {/* Main container with styling */}
{/* Text color changes based on the 'Enable' state */}
<Text style={{ color: Enable ? "red" : "green" }}>
{/* Displayed text */}
GeeksforGeeks
</Text>
<Switch
trackColor={{ false: "#43f746", true: "#63dff2" }} // Set track color for the switch based on the state
thumbColor={Enable ? "#faf68c" : "#e243f7"} // Set thumb color for the switch based on the state
onValueChange={toggle} // Call 'toggle' function when the switch value changes
value={Enable} // Bind the switch value to the 'Enable' state
/>
</View>
);
}
Complete Source Code
App.js
// Import React and useState hook from React library
import React, { useState } from 'react';
import {
StyleSheet, // Import StyleSheet for styling
Text, // Import Text component for displaying text
View, // Import View component for layout
Switch // Import Switch component for toggle functionality
} from 'react-native'; // Import components from react-native library
// Define the main App component
export default function App() {
// Declare a state variable 'Enable' with initial value 'false' and a function 'setEnable' to update it
const [Enable, setEnable] = useState(false);
// Function to toggle the state of 'Enable'
const toggle = (state) => {
// Update the state with the new value
setEnable(state);
}
return (
<View style={styles.container}> {/* Main container with styling */}
{/* Text color changes based on the 'Enable' state */}
<Text style={{ color: Enable ? "red" : "green" }}>
{/* Displayed text */}
GeeksforGeeks
</Text>
<Switch
trackColor={{ false: "#43f746", true: "#63dff2" }} // Set track color for the switch based on the state
thumbColor={Enable ? "#faf68c" : "#e243f7"} // Set thumb color for the switch based on the state
onValueChange={toggle} // Call 'toggle' function when the switch value changes
value={Enable} // Bind the switch value to the 'Enable' state
/>
</View>
);
}
const styles = StyleSheet.create({
container: { // Style for the main container
flex: 1, // Use full height of the screen
alignItems: 'center', // Center align items horizontally
justifyContent: 'center', // Center align items vertically
},
});
Output: