React Native Switch API

Last Updated : 10 May, 2025

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-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, 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.

JavaScript

// 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.

JavaScript

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.

JavaScript

<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.

JavaScript

{/* 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'

JavaScript

 // 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.

JavaScript

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.

JavaScript

// 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

JavaScript

// 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:

React Native Alert API

iamabhishekkalra

Improve

Article Tags :

React Native Switch API

Demo Video

Syntax

Props

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Start Coding

Complete Source Code

Similar Reads

React Native Basics

React Native Components

React Native UI Elements

React Native API

React Native Questions

React Native Projects

Thank You!

What kind of Experience do you want to share?