Hi Guys,

In this post, we will learn how to create text input in react native. I explained simply how to use TextInput in react native. Here you will learn how to add text input in react native. This tutorial will give you a simple example of how to create TextInput using react-native.

I will give you a simple example of TextInput example in react native.

In the first step Run the following command for create project.

expo init TextInputExample

In this step, You will open App.js file and put the code.

import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView, TextInput, Button} from 'react-native';

export default function App() {
    const [firstName, setFirstName] = useState('');
    const [lasttName, setLastName] = useState('');
    const [email, setemail] = useState('');
  return (
    <SafeAreaView style={styles.container}>
        <View style={styles.containerView}>
            <Text style={styles.title}>React Native TextInput Example</Text>
            <TextInput
                style={styles.inputSimpleBorder} 
                placeholder="Enter First Name"
                onChangeText={newText => setFirstName(newText)}
                defaultValue={firstName}
            />
            <TextInput
                style={styles.inputSimpleBorder}
                placeholder="Enter Last Name"
                onChangeText={newText => setLastName(newText)}
                defaultValue={lasttName}
            />
            <TextInput
                style={styles.inputSimpleBorder}
                placeholder="Enter Email"
                onChangeText={newText => setemail(newText)}
                defaultValue={email}
            />
            <Button
                title="Submit"
                onPress={() => alert('Successfully.')}
            />
            <StatusBar style="auto" />
        </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
    container: {
          justifyContent:'center',
        },
        containerView: {
            marginTop: '70%',
            padding:30,
    },
    title: {
        textAlign:'center', 
        fontSize: 20, 
        fontWeight: 'bold', 
        marginBottom: 20,
        color:'black'
    },
    inputSimpleBorder: {
        marginBottom: 15,
        backgroundColor: "white",
        borderWidth: 1,
        borderColor: 'grey',
        padding: 10,
        fontSize: 20
    },
});

In the last step run your project using bellow command.

expo start --web

It will help you...