Secure text

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.

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

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

Test yourself

Match the password concepts

secureTextEntry

Hides characters
password

Sensitive data
dot

Masked character marker
value

Real text
When is secureTextEntry used?
```
<TextInput secureTextEntry />
```
- Name field
- Email field
- Password field
- Notes field
Show answer

Password field — It is used in password fields to hide characters.

The secureTextEntry prop

<TextInput value={password} ____ />

Show answer

<TextInput value={password} secureTextEntry />

Next lesson: Summary - TextInput

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies