A simple way to add InputText in React Native

In this post, we are going to learn how to use text input within react native. The text input can be used for various purposes within an app. You might be looking to gather some input via forms type, looking to get card details for payment, or maybe just a password box for authentication.

We are going to learn some simple snippets to attain the same.

We are going to learn how to see how to implement the below features

Step 1: UseCase:

 A text input that accepts a string. 

This kind of text input will be needed when you are asking for an email/username from the User.

A text input that accepts only numeric and also how to enable numeric keypad by default.

These kinds of inputs are useful when we ask for a card number for payments/that a phone number as input

A password-based field that can mask the input.

These fields are mostly used when we expect a password as input or masking is needed.

Below is the demo : 

                        

Step 2: Imorting the compoenent

Let's add a textbox or text input in react-native we need to first import the component. We can do this as follows:

import { Text, TextInput, View ,SafeAreaView} from "react-native";

Step 3: Adding the Component (TextInput)

We are going to add the text input component as :

<TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
</code></pre>

The Final Code: This is how the App.Js looks after along with the styles

import React, { useState } from "react";
import PropTypes from "prop-types";
import { Text, TextInput, View ,SafeAreaView} from "react-native";
import { StyleSheet } from "react-native";


const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("Useless Text");
  const [number, onChangeNumber] = React.useState(null);
  const [onChangePassword] = React.useState(null);

  return (
    <SafeAreaView>
      <Text style={styles.text}> Prefilled Field</Text>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <Text style={styles.text}> Numeric Field</Text>
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
      <Text style={styles.text}> Passsword Field</Text>
      <TextInput
        style={styles.input}
        placeholder="Password text"
        onChangeText={onChangePassword}
        secureTextEntry = {true}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 0.5,
    padding: 10,
  },
  text:{
    marginTop:20
  }
});

export default UselessTextInput;

Conclusion: This was a simple way to work with text input in react native.We are goging to look for how to add this to a form or other UI. If you are looking to learn more about react native, Please check the other tutorials below.