React Native Switch

Summary: in this tutorial, you will learn how to use the React Native Switch component to create a toggle switch.

Introduction to the React Native Switch component

The Switch component allows you to create a toggle switch, which can toggle between two states: on and off.

Here are the steps for using the Switch component:

First, import Switch component from the react-native library:

import { Switch } from 'react-native';Code language: JavaScript (javascript)

Second, create a state variable with the boolean type to track if the switch is on or off using the useState hook:

const [isEnabled, setIsEnabled] = useState(false);Code language: JavaScript (javascript)

Third, define a function that toggles the Switch, which negates the current state of the Switch component:

const toggleSwitch = () => setIsEnabled(!isEnabled);Code language: JavaScript (javascript)

Finally, pass the isEnabled state variable and toggleSwitch function to the props of the Switch component:

<Switch 
   value = {isEnabled }
   onValueChange={toggleSwitch}
/> Code language: HTML, XML (xml)

Here is the complete app:

import React, { useState } from 'react';
import { StyleSheet, Text, View, Switch } from 'react-native';

const SwitchDemo = () => {
    const [isEnabled, setIsEnabled] = useState(false);

    const toggleSwitch = () => setIsEnabled(!isEnabled);

    return (
        <View style={styles.container}>
            <Text style={styles.text}>{isEnabled ? 'Switch is ON' : 'Switch is OFF'}</Text>
            <Switch
                onValueChange={toggleSwitch}
                value={isEnabled}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 18,
        marginBottom: 10,
    },
});

export default SwitchDemo;
Code language: JavaScript (javascript)

Output:

Styling the Switch component

The Switch component provides props that allow you to change its appearance, including:

• thumbColor
• trackColor
• ios_backgroundColor (relevant on iOS only).

thumbColor

The thumbColor specifies the switch grip’s foreground color. If you set the thumbColor on iOS, the switch grip won’t show its drop shadow.

When combined with the Switch‘s state, you can set the thumb color when the switch is on or off.

trackColor

The trackColor specifies the color of the track as an object with two keys:

• false set the track color when the Switch is off.
• true is the track color when the Switch is on.

ios_backgroundColor

This prop sets the background color for the Switch as false or disabled.

For example, the following shows how to style the change the thumbColor, trackColor, and ios_backgroundColor props:

import React, { useState } from 'react';
import { StyleSheet, Text, View, Switch } from 'react-native';

const SwitchDemo = () => {
    const [isEnabled, setIsEnabled] = useState(false);

    const toggleSwitch = () => setIsEnabled(!isEnabled);

    return (
        <View style={styles.container}>
            <Text style={styles.text}>{isEnabled ? 'Switch is ON' : 'Switch is OFF'}</Text>
            <Switch
                onValueChange={toggleSwitch}
                value={isEnabled}
                trackColor={{ false: '#ddd', true: '#f6706b' }}
                thumbColor={isEnabled ? '#fbd0cf' : '#fff'}
                ios_backgroundColor="#ddd"
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 18,
        marginBottom: 10,
    },
});

export default SwitchDemo;
Code language: JavaScript (javascript)

Output:

Summary

• Use the Switch component to create a toggle switch.