React Native Simple Custom Switch Component Android iOS

This tutorial explains how to create custom switch component in android and ios device in react native application. 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.

Example Of React Native Switch Component

Lets see the complete source code that helps to create custom switch component in android and ios device in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.

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

Step 4: Lets create constructor block inside your App component. In the constructor block we have created state variables named as SwitchOnValueHolder. This state variable helps to perform ON-OFF functionality in both android and iOS applications. 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.

 constructor() {
    super();
    this.state = {
      SwitchOnValueHolder: false
    }
  }

Step 5: Lets create the function named as ShowAlert with value parameter. This value parameter helps to toggle ON-OFF functionality in both android and iOS applications.

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.");
    }
  }

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.  

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}> Switch </Text>

        <Switch
          onValueChange={(value) => this.ShowAlert(value)}
          style={{ marginBottom: 10 }}
          value={this.state.SwitchOnValueHolder} />

      </View>
    );
  }

Step 7 : Apply the below style sheet design

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'black',
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create custom switch component in android and ios device in react native application.

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


export default class App extends Component {

  constructor() {
    super();
    this.state = {
      SwitchOnValueHolder: false
    }
  }

  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.");
    }
  }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}> Switch </Text>

        <Switch
          onValueChange={(value) => this.ShowAlert(value)}
          style={{ marginBottom: 10 }}
          value={this.state.SwitchOnValueHolder} />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'black',
  },
});

Screenshot : 

This is all about React Native Simple Custom Switch Component Android iOS. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.