React Native Switch

Introduction

In this blog, we will look into React Native Switch. React Native Switch is a true-or-false Boolean control component. If you are new to React Native and are yet to set up your environment for the language, you can check out this React Native Development.

React Native Switch

React Native Switch is a true/false Boolean control component. It has a callback function called onValueChange that modifies the prop's value. If the prop's value is not modified, the Switch component will continue to provide the same value rather than the expected consequence of any user actions.

Props of Switch

Following are the props of a Switch:

• value: It's the switch's value. It turns on when set to true. 
• onValueChange: When the switch value is changed, it is called.
• disabled: It's a Boolean property that can't be toggled to switch if it's set to true. The value is false by default.
• testID: In end-to-end tests, it's utilized to locate this view.
• trackColor: This property is used to change the color of the switch track.
• tintColor: When the switch is switched off, it sets the border color on iOS and the background color on Android. This attribute has been deprecated; instead, use trackColor.
• ios_backgroundColor:  In iOS, it changes the custom background colour.

Example

Before writing the application, follow the below steps to create a new project and add the necessary libraries to your program. 

Step 1: To run the program, you first need to install expo-cli.

npm install -g expo-cli

Step 2: Now create a new project using the following command:

expo init switchApp

Step 3: Now go to the project directory.

cd switchApp

Now that we have learned what a Switch is, we'll now build up the Switch and add some texts, as well as some basic CSS styles to make the texts look more appealing. The switch can take two states: on and off state. As a result, we'll have two states to switch between. The default value of the switch is set to false (i.e., off state). 

App.js

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

/* The switch can have two values: on and off state. The text to be displayed upon changing the switch state can be customized. As in this example, "On" is the text that is being displayed on the screen when the switch_value is true (or the switch is in the On state). and "Off" is the text that is to be displayed when the switch_value is false.
*/

const onVar = "On"; // this value will be displayed when the value of switch is set to true 
const offVar = "Off"; // this value will be displayed when the value of switch is set to false

// default class, it extends Component
export default class ReactNativeSwitch extends Component {  
    // state stores the current state of switch
    // the default value is set to false
    state = {  
        switch_value: false  
    };  

    render() {  
        return (  
            <View style={styles2.container}>  
                <Text style={styles.textStyle}>React Native</Text>  
                <Text style={styles.textStyle}>Switch</Text>  
                <Text style={styles2.textStyle}>{this.state.switch_value ? onVar :offVar}</Text>  
                <Switch  
                    value={this.state.switch_value}  
                    onValueChange ={(switch_value)=>this.setState({switch_value})}/>  
            </View>  
        );  
    }  
}  

// declaring styles that is to be used for the text "React Native", and "Switch"
const styles = StyleSheet.create ({  
    textStyle:{  
        fontSize: 30,  
        fontWeight: 'bold',  
        textAlign: 'center',  
        color: 'black'  
    }  
})

// declaring styles that is to be used for container and text styles
const styles2 = StyleSheet.create ({  
     container: {  
         flex: 1,  
         justifyContent: 'center',  
         alignItems: 'center',  
     },  
    textStyle:{  
        margin: 10,  
        fontSize: 20,  
        fontWeight: 'bold',  
        textAlign: 'center',  
        color: 'black'  
    }  
})

Output: