React Native - TextInput, Keyboard, TouchableOpacity, Button, and Alert - Example

In this article, we will discuss how to create a simple input form + a button press + Alert by utilizing the React Native framework and Android Studio.


We are going to create a mobile app like below,



Terminologies:

TextInput is the underlying component to input text. It has diverse props that configure the different features, such as onChangeText which takes a function and call it whenever the text is transmuted. The onSubmitEditing prop takes a function, which is called when the text is submitted.
<ScrollView>
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
placeholder="Email"
maxLength={20}
onBlur={Keyboard.dismiss}
value={this.state.name}
onChangeText={this.handleNameChange}
/>
</View>
</ScrollView>


TouchableOpacity is a wrapper for making views respond congruously to physical contacts. On press down, the opacity of the wrapped view is decremented, dimming it. This is done without genuinely transmuting the view hierarchy, and in general, is facile to integrate into an app without weird side-effects.
<View style={styles.inputContainer}>
<TouchableOpacity
style={styles.saveButton}
onPress={this.handleSubmit}>
<Text style={styles.saveButtonText}>Save</Text>
</TouchableOpacity>

</View>



The keyboard, module sanctions us to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.

React Native Alert is an API that is utilized to exhibit an alert dialogue with designated designation and message.

Implementation Example:

You must set up your local development environment. You can 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.


Next, we are going to edit the App.js file and write the below code to create a simple form.

App.js

import React, { Component } from 'react';

import { Alert, Button, StyleSheet, Text, View ,ScrollView,TextInput,
Keyboard,TouchableOpacity} from 'react-native';

export default class SettingsScreen extends React.Component {

constructor(props) {
super(props);
this.state = { name: '' }
this.handleNameChange = this.handleNameChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleNameChange(name) {
this.setState({ name });
}
handleSubmit() {
Alert.alert(this.state.name)
}

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

</View>

<ScrollView>
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
placeholder="Email"
maxLength={20}
onBlur={Keyboard.dismiss}
value={this.state.name}
onChangeText={this.handleNameChange}
/>
</View>
</ScrollView>
<View style={styles.inputContainer}>
<TouchableOpacity
style={styles.saveButton}
onPress={this.handleSubmit}>
<Text style={styles.saveButtonText}>Save</Text>
</TouchableOpacity>

</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 45,
backgroundColor: 'purple',
},
header: {
fontSize: 25,
textAlign: 'center',
margin: 10,
fontWeight: 'bold'
},
inputContainer: {
paddingTop: 15
},
textInput: {
borderColor: 'green',
borderTopWidth: 1,
borderBottomWidth: 1,
height: 50,
fontSize: 25,
paddingLeft: 20,
paddingRight: 20
},
saveButton: {
borderWidth: 1,
borderColor: 'black',
backgroundColor: 'black',
padding: 15,
margin: 5
},
saveButtonText: {
color: '#FFFFFF',
fontSize: 20,
textAlign: 'center'
}
});

Popular posts from this blog

Spring boot video streaming example-HTML5

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Java - Blowfish Encryption and decryption Example