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.

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.

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.

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.

5. Create CSS class.

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

Screenshots in iOS mobile device application :

Switch

Screenshot in Android mobile phone application:

Leave a Reply

Your email address will not be published.