TextInput
- React Native course
- Beginner
- Lesson 24/116
- 4 min
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.
Practice Render a TextInput
Import TextInput from react-native. The App component should return a <View> containing one <TextInput />.
Starter code
// Import TextInput from react-native
// Add a TextInput element inside App
function App() {
return null;
}Sample solution
import { TextInput, View } from "react-native";
function App() {
return (
<View>
<TextInput />
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which package does TextInput come from?
import { TextInput } from "?";- react
- expo-av
- react-native Correct answer
- @react-navigation/native
Explanation: TextInput is imported from the react-native package.
2 Import line
import { ____ } from "react-native";import { TextInput } from "react-native";Explanation: The TextInput component comes from react-native.
3 Match the TextInput pieces
| Term | Meaning |
|---|---|
TextInput |
Text input |
Text |
Text display |
value |
Current text |
placeholder |
Hint when empty |