How to create input field in Alert dialog in iOS React Native?

React Native provides prompt() function to create input field in the dialog. You can provide title, message, buttons, callback function, default input value, keyboard type etc.

This functionality is specific to iOS so it won’t work in Android phones.

The prompt() structure looks like this –

Alert.prompt(title, message, callbackOrButtons, type, defaultValue, keyboardType)

Here we have 6 different parameters –

1. title – A title of the prompt
2. message – A description text which displays above input field
3. callbackOrButtons – Either a function which get the input field text as argument or the array of buttons.
4. type – Type of input field. Possible values are – default, plain-text, secure-text, login-password.
5. defaultValue – A default input field value.
6. keyboardType – Type of keyboard. It restricts the type of data you want users to input like numerics, email, phone number etc. The possible values are – number-pad, decimal-pad, numeric, email-address, phone-pad, url.

Code Example

import React, { useState } from "react";
import { View, StyleSheet, Button, Alert, Text } from "react-native";

const App = () => {
  const [message, setMessage] = useState("")
  
  const textInputAlert = () =>
    Alert.prompt(
      "Alert Title",
      "Write your name here -",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },{
          text: "Ok",
          onPress: (text) => setMessage(text),
        },
      ],
      'plain-text'
    );

  const textInputAlertWithDefault = () =>
    Alert.prompt(
      "Alert Title",
      "Input field has default value - akashmittal.com",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },{
          text: "Ok",
          onPress: (text) => setMessage(text),
        },
      ],
      'plain-text',
      'akashmittal.com'
    );

  const textInputAlertWithCallbackFunction = () =>
    Alert.prompt(
      "Alert Title",
      "Input text will process by callback function",
      (text) => setMessage(text),
      'plain-text'
    );

  const phoneNumberAlert = () =>
    Alert.prompt(
      "Alert Title",
      "Write phone number here -",
      (text) => setMessage(text),
      'plain-text',
      undefined,
      'phone-pad'
    );

  const secureTextAlert = () =>
    Alert.prompt(
      "Alert Title",
      "Input field text will not display -",
      (text) => setMessage(text),
      'secure-text'
    );

  const loginPasswordAlert = () =>
    Alert.prompt(
      "Alert Title",
      "Login-Password",
      ({login, password}) => setMessage(JSON.stringify({login, password})),
      'login-password'
    );

  return (
    <View style={styles.container}>
      <Text style={{fontSize: 20}}>Input Message: {message}</Text>
      <Button title={"Show Prompt"} onPress={textInputAlert} />
      <Button title={"Show Prompt With Default Input Value"} onPress={textInputAlertWithDefault} />
      <Button title={"Show Prompt With Callback Function"} onPress={textInputAlertWithCallbackFunction} />
      <Button title={"Show Prompt For Phone Number"} onPress={phoneNumberAlert} />
      <Button title={"Show Prompt For Secure Text"} onPress={secureTextAlert} />
      <Button title={"Login-Password Prompt"} onPress={loginPasswordAlert} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-around",
    alignItems: "center",
    paddingVertical: 100
  }
});

export default App;

Output –

The above image shows the output of first button click which we declared in line 79 in our code. This one is running textInputAlert() function. It displays the Alert box prompting for an input. We declared two buttons – Cancel and Ok. Ok button is getting input field text in onPress function. We are then storing the field value in a state variable and displaying in Text View.

This is the output of 2nd button click. Everything is same as first function but here we are setting the default value in input field.

In this output, we clicked the third button where we are processing the input data using callback function. So, instead of using buttons for callbackOrButtons field in prompt(), we are using callback function.

This is the output of fourth button click. Here the keyboardType is changed to phone-pad. So, it is displaying only numeric keyboard.

This image is of fifth button click. Here the alert box is showing the password field. We are getting this because of setting type=secure-text.

This output is of the sixth button where we are displaying the login and password fields. You get this by setting type=login-password. Now since the fields are more than one, so callback function will get the object {login, password}.

Live Demo

Conclusion

Having input fields in Alert dialog is a helpful feature which is provided in iOS only. If you want full attention of user, you use Alert dialogs but at the same time if you need users to fill some important field, then you can use prompt(). In this whole article we covered a number of features and cases.