React Native Simple Custom Switch Component Android iOS Tutorial

Switch component is used to perform ON-OFF type functionality in both android and iOS applications. The Switch component renders Boolean value and returns output in True & False form. When application user turn on the Switch button, it will return result in True from and on turn off event, it will eventually return False. So here is the complete step by step tutorial for React Native Simple Custom Switch Component.

Contents in this project React Native Simple Custom Switch Component example :

1. Import AppRegistry, StyleSheet, Text, View, Switch and Alert component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, Text, View, Switch, Alert} from ‘react-native’;

import React, { Component } from ‘react’;

import { AppRegistry, StyleSheet, Text, View, Switch, Alert} from ‘react-native’;

2. Create constructor() in your project’s class and Inside that declare a State named as SwitchOnValueHolder and set its value as false . Here SwitchOnValueHolder is used to set the default state of Switch button, Means SwitchOnValueHolder value false sets the Switch default On Active state. If you set its value as True then it will by default shows in Turn Off state.

<br />
constructor(){</p>
<p>   super();</p>
<p>   this.state ={</p>
<p>    SwitchOnValueHolder :  false</p>
<p>   }<br />
 }

constructor(){

super();

this.state ={

SwitchOnValueHolder : false

}

3. Create a function named as ShowAlert with value parameter .Here value comes in True or False on Switch button ON – OFF event. If Switch button Turn on then it will receive True, If Switch button Turn Off then it will receive False.

<br />
ShowAlert = (value) =>{</p>
<p>  this.setState({</p>
<p>    SwitchOnValueHolder: value<br />
  })</p>
<p>  if(value == true)<br />
  {</p>
<p>    //Perform any task here which you want to execute on Switch ON event.<br />
    Alert.alert(“Switch is On.”);<br />
  }<br />
  else{</p>
<p>    //Perform any task here which you want to execute on Switch OFF event.<br />
    Alert.alert(“Switch is Off.”);<br />
  }</p>
<p>}

ShowAlert = (value) =>{

this.setState({

SwitchOnValueHolder: value

})

if(value == true)

{

//Perform any task here which you want to execute on Switch ON event.

Alert.alert(“Switch is On.”);

}

else{

//Perform any task here which you want to execute on Switch OFF event.

Alert.alert(“Switch is Off.”);

}

4. Create A view as root view and inside that root view create Switch button.

onValueChange : Trigger the Switch default Turn on off event and return result in Boolean(TRUE – FALSE) form.

style : Styling the Switch button.

value : Renders the default state value to show default switch button state.

<br />
render() {</p>
<p>   return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>       <Text style={{fontSize: 18}}> Switch </Text></p>
<p>        <Switch<br />
          onValueChange={(value) => this.ShowAlert(value)}<br />
          style={{marginBottom: 10}}<br />
          value={this.state.SwitchOnValueHolder} /></p>
<p>     </View><br />
   );<br />
 }

render() {

return (

<Text style={{fontSize: 18}}> Switch </Text>

<Switch

onValueChange={(value) => this.ShowAlert(value)}

style={{marginBottom: 10}}

value={this.state.SwitchOnValueHolder} />

</View>

);

}

5. Create CSS class.

<br />
const styles = StyleSheet.create({</p>
<p>MainContainer :{</p>
<p>justifyContent: ‘center’,<br />
alignItems: ‘center’,<br />
flex:1,<br />
margin: 10</p>
<p>}</p>
<p>});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: ‘center’,

alignItems: ‘center’,

flex:1,

margin: 10

}

});

6. Complete source code for index.android.js / index.ios.js file:

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, Text, View, Switch, Alert} from ‘react-native’;</p>
<p>class Project extends Component {</p>
<p> constructor(){</p>
<p>   super();</p>
<p>   this.state ={</p>
<p>    SwitchOnValueHolder :  false</p>
<p>   }<br />
 }</p>
<p>ShowAlert = (value) =>{</p>
<p>  this.setState({</p>
<p>    SwitchOnValueHolder: value<br />
  })</p>
<p>  if(value == true)<br />
  {</p>
<p>    //Perform any task here which you want to execute on Switch ON event.<br />
    Alert.alert(“Switch is On.”);<br />
  }<br />
  else{</p>
<p>    //Perform any task here which you want to execute on Switch OFF event.<br />
    Alert.alert(“Switch is Off.”);<br />
  }</p>
<p>}</p>
<p> render() {</p>
<p>   return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>       <Text style={{fontSize: 18}}> Switch </Text></p>
<p>        <Switch<br />
          onValueChange={(value) => this.ShowAlert(value)}<br />
          style={{marginBottom: 10}}<br />
          value={this.state.SwitchOnValueHolder} /></p>
<p>     </View><br />
   );<br />
 }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>MainContainer :{</p>
<p>justifyContent: ‘center’,<br />
alignItems: ‘center’,<br />
flex:1,<br />
margin: 10</p>
<p>}</p>
<p>});</p>
<p>AppRegistry.registerComponent(‘Project’, () => Project);