Modal

Overlay & Menus

Modal

Low-level modal primitive leveraging Portal, Backdrop, and focus trapping.

Usage

Build custom overlays or reuse as foundation for Dialog/Sheet experiences.

Highlights

• Animated entry/exit hooks
• Scroll locking and escape handling

When to use it

• You need a bespoke overlay not covered by Dialog.
• Compose multi-step flows on top of the modal base.

Related components

DialogDrawerPortal

Examples

Default

Preview (Web)

import { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Button } from 'react-native-molecules/components/Button';
import { Modal } from 'react-native-molecules/components/Modal';
import { Portal } from 'react-native-molecules/components/Portal';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  container: {
      width: 320,
      padding: 24,
      borderRadius: 24,
      backgroundColor: '#fff',
      alignItems: 'center',
      gap: 12,
  },
});

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
      <>
          <Button onPress={() => setOpen(true)}>Show Modal</Button>
          <Portal>
              <Modal isOpen={open} onClose={() => setOpen(false)}>
                  <View style={styles.container}>
                      <Text>Modal Content</Text>
                      <Button variant="text" onPress={() => setOpen(false)}>
                          Close
                      </Button>
                  </View>
              </Modal>
          </Portal>
      </>
  );
}

Prop	Type	Default	Description
childrenRequired	ReactNode	—	—
style	StyleProp<ViewStyle>	—	—
testID	string | undefined	—	—
dismissible	boolean | undefined	—	—
overlayAccessibilityLabel	string | undefined	—	—
elevation	MD3Elevation | undefined	—	—
isOpen	boolean | undefined	—	—
onClose	(() => void) | undefined	—	—
contentContainerStyle	StyleProp<ViewStyle>	—	—
size	"md" | "lg" | undefined	—	—
backdropStyle	StyleProp<ViewStyle>	—	—
containerStyle	StyleProp<ViewStyle>	—	—

Defined in react-native-molecules/components/Modal