Using Switch component in React Native (with Hooks)

Last updated on November 29, 2021 A Goodman Loading... Post a comment

In React Native, Switch is a built-in controlled component that renders a boolean input. It lets a user turn on or off some functionalities or select between two options (you can see it in the Settings screen of many apps). This article covers the fundamentals of the Switch component and walks you through a complete example of implementing it in practice.

Overview

Import the component:

import { Switch } from "react-native";

The table below lists the props of Switch:

PropTypeDescription
valueboolThe value of the switch. Default is false
onChangefunctionThe onChange event handler function, invoked when the switch changes
onValueChangefunctionInvoked when the user tries to switch on or off. You will receive the new value.
thumbColorcolorThe color of the thumb (the circle stuff)
trackColorcolorThe color of the track
disableboolEnable or disable the switch
ios_backgroundColor (iOS-only)colorSets the custom color for the background on iOS

Example

App Preview

The app we are going to make contains a switch. When this switch is ON, a purple box will show up. When the switch is OFF, the box will go away. Here’s how it works on iOS and Android:

If you have a loser look, you will notice that the color of the thump area and the track area also change based on the state of the switch.

Final Code

The full source code in App.js with explanations:

// App.js
import React, { useState } from "react";
import { StyleSheet, View, Switch } from "react-native";

export default function App() {
  // Show or Hide the purple box
  const [isShown, setIsShown] = useState(false);

  // This function will be triggered when the Switch changes
  const toggleTheBox = () => {
    setIsShown((previousState) => !previousState);
  };

  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: "#767577", true: "#4caf50" }}
        thumbColor={isShown ? "#8bc34a" : "#ddd"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleTheBox}
        value={isShown}
      />

      {isShown === true ? <View style={styles.box}></View> : null}
    </View>
  );
}

// Kindacode.com
// Just some styles
const styles = StyleSheet.create({
  container: {
    paddingTop: 100,
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    backgroundColor: "#fff",
  },
  box: {
    marginTop: 50,
    width: 300,
    height: 250,
    backgroundColor: "#673ab7",
  },
});

Conclusions

You’ve learned the fundamentals of the Switch component in React Native and examined a complete example of implementing it in practice. If you’d like to explore more new and interesting things about modern React Native then take a look at the following articles:

You can also check our React topic page and React Native topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles