Modal

The Modal component displays content in a centered overlay above the main UI. It provides a flexible container for dialogs, forms, or any content that needs to capture user attention.

Usage

Open Modal

function ModalUsage() {
  const [showModal, setShowModal] = useState(false)

  return (
    <View>
      <Button onPress={() => setShowModal(true)}>Open Modal</Button>
      <Modal visible={showModal} onBackdropPress={() => setShowModal(false)}>
        <ModalContent
          title="Hello world"
          description="Lorem ipsum"
          actionButtons={[
            {
              title: 'Cancel',
              onPress: () => setShowModal(false),
            },
            {
              title: 'Done',
              onPress: () => setShowModal(false),
            },
          ]}
        />
      </Modal>
    </View>
  )
}

With Scroll

Scrollable Modal

function ModalWithScroll() {
  const [showModal, setShowModal] = useState(false)

  return (
    <View>
      <Button onPress={() => setShowModal(true)}>Scrollable Modal</Button>
      <Modal visible={showModal} onBackdropPress={() => setShowModal(false)}>
        <ModalContent
          title="Scrollable Content"
          actionButtons={[
            {
              title: 'Cancel',
              onPress: () => setShowModal(false),
            },
            {
              title: 'Done',
              onPress: () => setShowModal(false),
            },
          ]}>
          <Spacer />
          <FlatList
            data={Array(100)
              .fill(0)
              .map((_, i) => `Item ${i}`)}
            renderItem={({item}) => (
              <TouchableOpacity accessibilityRole="text" activeOpacity={1}>
                <Text>{item}</Text>
              </TouchableOpacity>
            )}
          />
        </ModalContent>
      </Modal>
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	RNModalProps	--	Inherits properties from RNModalProps
backdropStyle	StyleProp<ViewStyle>	--	Style the backdrop of the modal
contentStyle	StyleProp<ViewStyle>	--	content style of the Modal
onBackdropPress	() => void	--	Callback whenever user press on the backdrop or on the android back button press