skip to content

In React Native, what does Alert.prompt do on iOS, and why does the same text-input prompt never appear on Android?

level: middleimportance: should knowfreq 25%

answer

  1. alert with a text field
  2. callback or buttons array
  3. plain-text by default
  4. login-password returns an object
  5. Android: silently nothing

basics

~20 s

Alert.prompt shows an iOS alert with a text field and passes the text to a callback or to the pressed button's onPress. Its body only runs when Platform.OS is ios, so on Android it returns silently: no dialog, no warning.

solid answer

~40 s

`Alert.prompt(title, message, callbackOrButtons, type, defaultValue, keyboardType, options)` presents a native iOS alert with input fields. If the third argument is a function, it receives the text when the user taps OK; if it is an array of `AlertButton`s, each button's `onPress` receives the value. `type` defaults to `'plain-text'`; `'secure-text'` masks input, and `'login-password'` shows two fields and passes an object with `login` and `password`. `defaultValue` pre-fills the field and `keyboardType` sets the keyboard. On Android nothing happens: the implementation is wrapped in `if (Platform.OS === 'ios')`, so the call returns silently — no dialog, no warning, no callback. Android needs an app-rendered dialog, typically a `Modal` with a `TextInput`, and a shared wrapper so feature code calls one function on both platforms.

code

tsx · 17 lines
tsx
import { Alert, Platform } from 'react-native';

export function askReportReason(onSubmit: (reason: string) => void, openAndroidDialog: () => void) {
  if (Platform.OS !== 'ios') {
    openAndroidDialog(); // Alert.prompt would silently do nothing here
    return;
  }
  Alert.prompt(
    'Report post',
    'Tell the moderators what is wrong.',
    [
      { text: 'Cancel', style: 'cancel' },
      { text: 'Report', style: 'destructive', onPress: (reason?: string) => onSubmit(reason ?? '') },
    ],
    'plain-text',
  );
}

go deeper

for a junior

Recall that Alert.prompt asks for text on iOS only and passes the value to a callback or to a button's onPress.

for a middle

Explain the input types, the login-password object, and that Android returns silently with no dialog or warning.

for a senior

Build one text-prompt abstraction backed by Alert.prompt on iOS and a Modal on Android, with shared validation.

for a principal

Decide whether native prompts are worth a divergent Android path, or whether one in-app dialog serves the product better.

## What `Alert.prompt` is `Alert` is React Native's cross-platform dialog API. `Alert.alert` works on both platforms; **`Alert.prompt`** is its **iOS-only** sibling that adds text input to the dialog. It replaced the old `AlertIOS` module, which React Native lists as removed. In a community forum app, the report flow is a natural fit: after the user picks *Report post*, ask for a short reason. ## The signature ```tsx Alert.prompt( title: string, message?: string, callbackOrButtons?: ((text: string) => void) | AlertButton[], type?: AlertType, // defaults to 'plain-text' defaultValue?: string, keyboardType?: string, options?: AlertOptions, ); ``` | `type` | Fields shown | Value passed back | | --- | --- | --- | | `'default'` | none | — (a plain alert) | | `'plain-text'` (default) | one text field | the string | | `'secure-text'` | one masked field | the string | | `'login-password'` | login field and masked password field | `{ login, password }` | ## Callback versus buttons - **A function** as the third argument gives you a default OK and Cancel pair; the function receives the text when the user confirms. - **An array of buttons** gives full control: each button has `text`, `onPress`, and iOS-only `style` (`'default'`, `'cancel'`, `'destructive'`) and `isPreferred`. The pressed button's `onPress` receives the entered value. ```tsx Alert.prompt( 'Report post', 'Tell the moderators what is wrong.', [ { text: 'Cancel', style: 'cancel' }, { text: 'Report', style: 'destructive', onPress: (reason?: string) => submitReport(reason ?? '') }, ], 'plain-text', ); ``` ## What the user sees on iOS - With a **callback function**, React Native sends no button list, and the native module adds **OK** and **Cancel** (Cancel styled as cancel). The function runs only for OK; Cancel calls nothing. - With a **buttons array**, the titles and styles are yours, and the button marked `style: 'cancel'` is placed as the cancel action. - `defaultValue` pre-fills the first field, handy for *Edit report reason*. - `keyboardType` takes one of `TextInput`'s keyboard types, such as `'email-address'`, for the first field. - `options.userInterfaceStyle` forces `'light'` or `'dark'` for this alert. ## Why nothing appears on Android The implementation of `prompt` is wrapped in `if (Platform.OS === 'ios') { ... }` with **no else branch**. On Android the call returns immediately: - no dialog is shown; - no warning is logged; - no callback ever runs. This is quieter than other iOS-only APIs — `ActionSheetIOS` throws and `Settings` warns — which is why the bug tends to be found by users rather than by developers. `Alert.alert` does work on Android, but it has **no text input**, and Android shows **at most three buttons**. ## Building the Android side 1. Render a **`Modal`** containing a `TextInput` and buttons, controlled by React state. 2. Wrap both paths behind one function, for example `askForText({ title, message, secure })` returning a promise of the string or `null` on cancel. 3. On iOS the wrapper calls `Alert.prompt`; on Android it opens the modal. 4. Keep validation — empty reasons, length limits — in the shared code, not in either branch. Many teams skip `Alert.prompt` entirely and use the same modal on both platforms so the report flow looks and behaves the same everywhere. ## Pitfalls - **Forgetting that `onPress` receives the value** and reading it from state that was never set. - **Using `'login-password'` and expecting a string** — it passes an object with `login` and `password`. - **Relying on it for anything important on Android**, where it is a silent no-op. ## Interview summary Describe the signature, callback-versus-buttons, the input types with the `login-password` object, and the silent Android no-op, then describe the shared wrapper you would build.

  • In React Native, what does Alert.prompt pass to onPress when type is 'login-password'?
    An object with `login` and `password` properties taken from the two text fields, instead of a single string. Code that treats the value as a string will break for this type.
  • Why is a silent no-op on Android riskier than a thrown error for React Native's Alert.prompt?
    A throw surfaces in development and error monitoring, so it is fixed before release. A silent return shows no dialog, logs nothing and never calls back, so the feature just appears broken to Android users and is often found only through their reports.

saying these in an interview costs you the question

  • Alert.prompt shows a text dialog on Android too
  • Alert.prompt throws on Android
  • The default prompt type is 'default'
  • login-password passes the password as a string
  • AlertIOS.prompt is still the way to ask for text