How to create a simple input field in React native? Code Example

A <TextInput> component is used to create input field in React native. There are multiple props associated with this component which defines the behavior of text input.

Apart from all other props, value and onChangeText props are most important because they are used to set the value of input field and get the changed text.

In this article we will create a simple input field using <TextInput> with value and onChangeText props.

Code Example

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

const SimpleTextInput = () => {
  const [text, onChangeText] = React.useState("");
  
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
        />

        <Text>Input field value: {text}</Text>
      </View>
      
    </SafeAreaView>
  );
};

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

export default SimpleTextInput;

Output –

This is how the input fields look like in both iOS (left) and Android (right) phones.

In the code we have used a single TextInput field and storing the value into a state variable, text. Later we displayed the value in a text field.

Live Demo

Conclusion

To create a simple text input field in React native, we can use <TextInput> component which renders the native edit text element in both iOS and Android operating systems. We can capture the entered value using onChangeText prop.