How to Create Text Input Component in React Native?

Sep 06, 2022 . Admin

In this tutorial, you will learn react native text input component. you will learn how to create basic text input in react native. This post will give you simple example of react native text input. you will learn how to create a text input box in react native. Let's see bellow example text input box exmaple react native.

In this example,We will create to text input in react naticve.you can easy and simply text conponent in react native.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

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

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

export default function App() {
    const [text, onChangeText] = React.useState(null);
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Name:</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
          placeholder="Enter Name"
        />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
  },

  input: {
    height: 50,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },

  text: {
    paddingHorizontal: 15
  }

});

Step 3: Run Project

In the last step run your project using the below command.