Secure text
- React Native course
- Beginner
- Lesson 28/116
- 5 min
Learn password fields with secureTextEntry.
secureTextEntry
For sensitive data such as passwords the secureTextEntry prop is used. When secureTextEntry is set (either secureTextEntry={true} or just secureTextEntry) every typed character is displayed on screen as a dot.
This prevents shoulder surfing on password fields; the real value is still plain text, only the display is masked. On iOS it is a good practice to also add autoCorrect={false} and autoCapitalize="none" to disable prediction and capitalization suggestions.
Using secureTextEntry
A typical password field is written like this: <TextInput value={password} onChangeText={setPassword} secureTextEntry />. Here secureTextEntry only masks the display; value is still held in state as plain text.
The controlled pattern is the same for password fields: create a state with useState, bind the value and onChangeText props, and just add secureTextEntry on top. This gives both a safe look and a single-source data flow.
Practice Build a password field
Import useState from react and TextInput from react-native. Create a password state (initial empty string). Make the <TextInput> controlled (value + onChangeText) and add secureTextEntry.
Starter code
// Import useState and TextInput
// Create a password state
function App() {
return null;
}Sample solution
import { useState } from "react";
import { TextInput, View } from "react-native";
function App() {
const [password, setPassword] = useState("");
return (
<View>
<TextInput value={password} onChangeText={setPassword} secureTextEntry />
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the password concepts
| Term | Meaning |
|---|---|
secureTextEntry |
Hides characters |
password |
Sensitive data |
dot |
Masked character marker |
value |
Real text |
2 When is secureTextEntry used?
<TextInput secureTextEntry />- Name field
- Email field
- Password field Correct answer
- Notes field
Explanation: It is used in password fields to hide characters.
3 The secureTextEntry prop
<TextInput value={password} ____ /><TextInput value={password} secureTextEntry />Explanation: secureTextEntry hides characters in a password field.