What is the Prompt?
Alert.prompt(), in React Native, is used to get information from a user in a native popup, similar to Alert.alert(). This option is only available on iOS devices.
Types of prompts
plain-text- Plain text input prompt (default)secure-text- Secure text input promptlogin-password- Login and password prompt
Prompt with Plain Text Input
Similar to Alert.alert(), the first 3 arguments are the same: title, message, and buttons. The next argument is used to provide the prompt type.
import { Alert } from "react-native";
Alert.prompt(
"Username",
"Enter your new username below",
[
{ text: "Cancel", style: "destructive", onPress: () => {} },
{
text: "Submit",
onPress: (username) => {
// update username
},
},
],
"plain-text"
);
Prompt with Secure Input
Secure prompt, just like secure TextInput, is usually used for password fields.
It is common for mobile apps to prompt user enter their password when performing high-security actions (like changing emails) to prevent account fraud.
Alert.prompt(
"Confirm Password",
"Enter your current password for confirmation",
[
{ text: "Cancel", style: "destructive", onPress: () => {} },
{
text: "Confirm",
onPress: (password) => {
// await verifyPassword(password)
},
},
],
"secure-text"
);
Prompt with Login and Password
Lastly, Apple has created a way to enter both username and password in a single prompt.
Alert.prompt(
"Sign In",
"Enter your credentials to log in:",
[
{ text: "Cancel", style: "destructive", onPress: () => {} },
{
text: "Sign In",
onPress: (credentials) => {
const { login, password } = credentials;
// Authenticate user with provided credentials
// await authenticateUser(login, password)
},
},
],
"login-password"
);
Setting default value
If you need to provide a default value for the prompt, you can pass it as a 5th argument after the prompt type as shown below:
import { Alert } from "react-native";
const defaultValue = `withframe`;
Alert.prompt(
"Username",
"Enter your new username below",
[
{ text: "Cancel", style: "destructive", onPress: () => {} },
{
text: "Submit",
onPress: (username) => {
// update username
},
},
],
"plain-text",
defaultValue
);