Summary - TextInput

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.

Exercise 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.

Show example 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>
  );
}

Exercise 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".

Show example 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>
  );
}

Test yourself

Match the summary pieces

TextInput

Text input
onChangeText

Change function
value

Controlled value
placeholder

Hint when empty
secureTextEntry

Password masking
Which pair is required for a controlled input?
```
<TextInput ? ? />
```
- style and onPress
- title and onPress
- placeholder and color
- value and onChangeText
Show answer

value and onChangeText — value and onChangeText form the controlled pattern.

Next lesson: style prop

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies