Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

React Native Switch

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

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:                                                        

                                                     

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is the use of thumbColor prop of Switch?

It colors the switch grip in the foreground. The switch grip's drop shadow will be lost when it is set to iOS.

Does the switch have a default value?

The default value of a switch is set to false. It can be changed by pressing the switch button.

How do you set the background color in ios?

The background color can be set using the ios_backgroundColor prop. When the switch value is disabled, the background can be seen.

Conclusion 

In this article, we have extensively discussed React Native SwitchWe hope that this blog has helped you enhance your knowledge regarding React Native Switch, and to learn more, check out our other article on React Native Tab Navigation

And also, check out the awesome content on the Coding Ninjas Website,
Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview ExperiencesCoding Ninjas 

Topics covered
1.
Introduction
2.
React Native Switch
2.1.
Props of Switch
2.2.
Example
3.
Frequently Asked Questions
3.1.
What is the use of thumbColor prop of Switch?
3.2.
Does the switch have a default value?
3.3.
How do you set the background color in ios?
4.
Conclusion