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';Copy

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);Copy

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

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

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

<Switch 
   value = {isEnabled }
   onValueChange={toggleSwitch}
/>Copy

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;Copy

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;Copy

Output:

Summary #

• Use the Switch component to create a toggle switch.

Was this helpful?

Yes No