React Native Switch API
In this article, we will explore how to use the Switch component in React Native. The Switch component is a controlled component, meaning it requires a callback function to update the props based on the user's actions. Let's watch a demo video of what we are going to develop.
Demo Video
Syntax
<Switch
trackColor={}
thumbColor={}
value={}
onValueChange={}
/>
Props
Prop | Description |
|---|---|
Disabled | When set to true, this prevents the user from toggling the switch |
ios_backgroundColor | This property is available only for iOS and is used to set a custom background color on iOS devices. |
onChange | This function is called when a user attempts to change the value of the switch. It takes the change event as an argument |
onValueChange | Similar to onChange, this function is invoked when a user tries to modify the switch's value, but it receives the new value as an argument instead of the event |
thumbColor | This defines the color of the switch's foreground grip. |
trackColor | This specifies the color of the switch's track |
value | This represents the current state of the switch, which is false by default. |
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 --template
Note: 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.
- 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.
- For iOS users, simply scan the QR code using the Camera app.
- 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:
