TextInput

Learn to take user input with TextInput.

TextInput

The TextInput component in React Native collects text from the user. Text only displays text, while TextInput allows editing; tapping it opens the on-screen keyboard automatically.

Its core props are: value for the current text, onChangeText for the function that runs when the text changes, and placeholder for the hint shown when the field is empty. It is imported from the react-native package: import { TextInput } from "react-native";. In this lesson we will see the most basic usage first.

Core props

TextInput has three core props. value is the current text the component shows. onChangeText fires every time the user presses a key and receives the new text as its first argument. placeholder is the faint hint shown when the field is empty.

Together these three props form the so-called controlled input pattern that we will see later. For now we will just render and import a TextInput. In the exercise below you will place a single TextInput inside a View shell.

Exercise Render a TextInput

Import TextInput from react-native. The App component should return a <View> containing one <TextInput />.

Show example solution

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

function App() {
  return (
    <View>
      <TextInput />
    </View>
  );
}

Test yourself

Which package does TextInput come from?
```
import { TextInput } from "?";
```
- react
- expo-av
- react-native
- @react-navigation/native
Show answer

react-native — TextInput is imported from the react-native package.

Import line

import { ____ } from "react-native";

Show answer

import { TextInput } from "react-native";

Match the TextInput pieces

TextInput

Text input
Text

Text display
value

Current text
placeholder

Hint when empty

Next lesson: onChangeText

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies