Modal

Component to display content in an overlay above the main UI.

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>
  )
}

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