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.

React Native Local Environment Setup - click here

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.

React Native Local Environment Setup - click here

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'
  }
});

Running Android App

knfdev@ladmin-H310M-S2:~$ react-native start

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

More React Native Article,

• React Native - Environment Setup - Create a new project: part 1

• React Native - TextInput, Keyboard, TouchableOpacity, Botton OnPress, and Alert - Example:part 2

• React native - Rest API calls using Fetch - Mobile App: part 3

• React native - Rest API calls using Axios - Mobile App development: part 4

• React Native DatePicker for Mobile Application - Example: part 5

• React Native - Mobile App development - Simple Login Form example: part 6

• Display Image in React Native Mobile Application - Example: part 7

• React Native - GridView Layout - Mobile Application development: part 8