React NativeExamples · Props · Code

Prompt in React Native

React Native ships Alert.prompt for a text-input dialog — but it only works on iOS. For a prompt that works on both platforms, build a small Modal with a TextInput. Here’s both, and when to use which.

What is a prompt in React Native?

A prompt is a dialog that asks the user to type a value — a name, a password, a note — and returns it. The web has window.prompt; React Native has Alert.prompt, but only on iOS. On Android you roll your own with a Modal.

iOS — Alert.prompt

One call, native look, iOS only:

import { Alert } from 'react-native';

function askName() {
  // iOS ONLY — Alert.prompt does not exist on Android
  Alert.prompt(
    'Your name',
    'What should we call you?',
    (text) => console.log('entered:', text),
    'plain-text',        // or 'secure-text' for a password field
    '',                  // default value
  );
}

Cross-platform — Modal prompt

Works on iOS and Android identically. Drive it with a visible flag and callbacks:

import { useState } from 'react';
import { Modal, Pressable, Text, TextInput, View } from 'react-native';

function Prompt({ visible, title, onSubmit, onCancel }) {
  const [text, setText] = useState('');

  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onCancel}>
      <View style={{ flex: 1, justifyContent: 'center', backgroundColor: '#00000066', padding: 24 }}>
        <View style={{ backgroundColor: '#fff', borderRadius: 14, padding: 20 }}>
          <Text style={{ fontSize: 17, fontWeight: '600', marginBottom: 12 }}>{title}</Text>
          <TextInput
            autoFocus
            value={text}
            onChangeText={setText}
            style={{ borderWidth: 1, borderColor: '#e5e7eb', borderRadius: 8, padding: 12, fontSize: 16 }}
          />
          <View style={{ flexDirection: 'row', justifyContent: 'flex-end', gap: 16, marginTop: 16 }}>
            <Pressable onPress={onCancel}><Text style={{ color: '#6b7280', fontSize: 16 }}>Cancel</Text></Pressable>
            <Pressable onPress={() => onSubmit(text)}>
              <Text style={{ color: '#2563eb', fontSize: 16, fontWeight: '600' }}>OK</Text>
            </Pressable>
          </View>
        </View>
      </View>
    </Modal>
  );
}

Props (cross-platform prompt)

PropTypeDefaultDescription
visiblebooleanfalseShows/hides the prompt.
titlestringQuestion shown above the input.
onSubmitfn(text)Called with the entered value on OK.
onCancelfnCalled on Cancel and Android back.
secureTextEntrybooleanfalsePass to TextInput for a password prompt.

Gotchas

  • Alert.prompt is iOS only. Calling it on Android does nothing — use the Modal version for cross-platform.
  • Reset the input state when the Modal closes, or the previous value shows up next time it opens.
  • Set onRequestClose on the Modal so the Android back button cancels the prompt.
  • Use autoFocus so the keyboard opens with the dialog — otherwise the user taps twice.

FAQ

Does React Native have a prompt? Yes on iOS (Alert.prompt), no on Android — build a Modal prompt for both.

How do I make a password prompt? Pass 'secure-text' to Alert.prompt, or secureTextEntryto the Modal’s TextInput.

Related components

Skip the boilerplate

Describe your screen in ShipNative and it wires up the component for you — in a real, exportable React Native app.

Generate it with AI →