React Native - Switch - Mobile Application Development

Felicitations! You are standing in the right place! In this example, we initially set the Switch value to false and exhibit a Text with 'No'. When the value of Switch change to true by calling onValueChange the Text component is reset to 'Yes'.

Our screen will look like this −

Implementation

First, You must set up your local development environment. Follow the below link to set up your local environment.


After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.



Import StyleSheet, Switch, View, and Text component in our project.

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

Declare State

The state is generally initialized in the constructor and then call setState when we want to change it.
state = {
married: false
};

Engender a Root View in render’s return block.

render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>Married</Text>
<Text style={styles.textStyle}>{this.state.married ?
'Yes' :'No'}</Text>
<Switch
value={this.state.married}
onValueChange ={(married)=>this.setState({married})}/>
</View>
);
}
}

Engender Style

const styles = StyleSheet.create ({
container: {
flex: 2,
alignItems: 'center',
justifyContent: 'center',
},
textStyle:{
margin: 26,
fontSize: 27,
fontWeight: 'bold',
textAlign: 'center',
color: 'purple'
}
})

Complete source code for App.js File

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

export default class App extends React.Component {
state = {
married: false
};

render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>Married</Text>
<Text style={styles.textStyle}>{this.state.married ? 'Yes' :'No'}
                         </Text>  
<Switch
value={this.state.married}
onValueChange ={(married)=>this.setState({married})}/>
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
flex: 2,
alignItems: 'center',
justifyContent: 'center',
},
textStyle:{
margin: 26,
fontSize: 27,
fontWeight: 'bold',
textAlign: 'center',
color: 'purple'
}
})

Run

sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android

More...


Popular posts from this blog

Spring boot video streaming example-HTML5

DataTable-Pagination example with Spring boot, jQuery and ajax

10 Best Job Posting Sites 2021-2022

Spring boot web project free download:User Registration System

Spring Boot + JPA/Hibernate One to Many mapping example

5 Hardest Puzzle,100% fail answers

Java security AES,SHA256,SHA512,MD5-Spring Boot Project Free Download

Spring Boot-AngularJS-Bootstrap-JPA-CRUD

ReactJS - Bootstrap - Buttons

Spring Boot file upload/download example