Summary - TextInput
- React Native course
- Beginner
- Lesson 29/116
- 5 min
Combine onChangeText, controlled and placeholder to write a form field.
Summary - TextInput
In this group we covered the basics of TextInput: importing, onChangeText, controlled input, placeholder and secureTextEntry. Now we will combine all of them in a login form.
The goal is to set up email and password fields together. The email field will show a hint via placeholder; the password field will mask input with secureTextEntry. Both will be controlled; value and onChangeText will bind to separate states. You will first write this form, then a two-field registration form.
Practice Login form
Import useState from react and TextInput from react-native. Create email and password states (initial empty strings). Add two <TextInput>s: the first controlled with placeholder="Email"; the second controlled with placeholder="Password" and secureTextEntry.
Starter code
// Import useState and TextInput
// Create email and password states
function App() {
return null;
}Sample solution
import { useState } from "react";
import { TextInput, View } from "react-native";
function App() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
return (
<View>
<TextInput placeholder="Email" value={email} onChangeText={setEmail} />
<TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
</View>
);
}Practice Registration form
Import useState from react and TextInput from react-native. Create name and phone states (initial empty strings). Add two controlled <TextInput>s: one with placeholder="Full name", the other with placeholder="Phone".
Starter code
// Import useState and TextInput
// Create name and phone states
function App() {
return null;
}Sample solution
import { useState } from "react";
import { TextInput, View } from "react-native";
function App() {
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
return (
<View>
<TextInput placeholder="Full name" value={name} onChangeText={setName} />
<TextInput placeholder="Phone" value={phone} onChangeText={setPhone} />
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the summary pieces
| Term | Meaning |
|---|---|
TextInput |
Text input |
onChangeText |
Change function |
value |
Controlled value |
placeholder |
Hint when empty |
secureTextEntry |
Password masking |
2 Which pair is required for a controlled input?
<TextInput ? ? />- style and onPress
- title and onPress
- placeholder and color
- value and onChangeText Correct answer
Explanation: value and onChangeText form the controlled pattern.