25. Modal and overlay patterns

`Modal` renders content above the rest of the app, ideal for a transaction confirmation dialog that must be explicitly dismissed before continuing.

import { Modal, View, Text, Pressable } from "react-native";

function ConfirmModal({ visible, onConfirm, onCancel }: { visible: boolean; onConfirm: () => void; onCancel: () => void }) {
  return (
    <Modal visible={visible} transparent animationType="slide">
      <View>
        <Text>Confirm sending 0.5 ETH?</Text>
        <Pressable onPress={onConfirm}><Text>Confirm</Text></Pressable>
        <Pressable onPress={onCancel}><Text>Cancel</Text></Pressable>
      </View>
    </Modal>
  );
}

For richer, swipeable bottom sheets, community libraries like `@gorhom/bottom-sheet` provide better gesture handling than the basic `Modal`.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges