React Native Switch

React Native Switch is a Boolean control component which sets its value to true or false. It has an onValueChange callback method that updates its value prop. If the value prop is not changed, the Switch component continues supplied the value prop instead of the expected result of any user actions.

Props of Switch

Props	Description
disabled	It is a Boolean property, if it is set to true then it cannot be toggled to switch. Its default value is false.
trackColor	It is used to customize the color for switch track.
ios_backgroundColor	It set the custom background color in iOS. The background can be visible either when the switch value is disabled or when the switch is false.
onValueChange	It invoked when the switch value is changed.
testID	It is used to locate this view in end-to-end tests.
thumbColor	It colors the foreground switch grip. When it is set to iOS, the switch grip will lose its drop shadow.
tintColor	It sets the border color on iOS and background color on Android when the switch is turned off. This property is deprecated; use trackColor at the place of it.
value	It is the value of switch. When it is set to true, it turns on. The default value is false.

React Native Switch Example

In this example, we initialy set the Switch value to false and display a Text with 'off'. When the value of Switch change to true by calling onValueChange the Text component is reset to 'on'.

App.js

1. 
   import React, { Component } from 'react'  
2. import {StyleSheet, Switch, View, Text} from 'react-native'  
3.   
4. export default class SwitchExample extends Component {  
5.     state = {  
6.         switchValue: false  
7.     };  
8.   
9.     render() {  
10.         return (  
11.             <View style={styles.container}>  
12.                 <Text style={styles.textStyle}>Switch Example</Text>  
13.                 <Text style={styles.textStyle}>{this.state.switchValue ? 'on' :'off'}</Text>  
14.                 <Switch  
15.                     value={this.state.switchValue}  
16.                     onValueChange ={(switchValue)=>this.setState({switchValue})}/>  
17.             </View>  
18.         );  
19.     }  
20. }  
21. const styles = StyleSheet.create ({  
22.      container: {  
23.          flex: 1,  
24.          alignItems: 'center',  
25.          justifyContent: 'center',  
26.      },  
27.     textStyle:{  
28.         margin: 24,  
29.         fontSize: 25,  
30.         fontWeight: 'bold',  
31.         textAlign: 'center',  
32.         color: '#344953'  
33.     }  
34. })  

Output: