Skip to main content

Modal

The ModalOverlay component provides a modal implementation using the overlay system. It displays content in a centered overlay with backdrop, perfect for presenting focused content that requires user interaction.

Usage​

Display a modal using the overlay system. This provides consistent modal behavior with the flexibility to customize the content, animations, and backdrop behavior.

Show Modal
function ModalOverlayUsage() {
  const [visible, setVisible] = useState(false)

  return (
    <View>
      <Button onPress={() => setVisible(true)}>Show Modal</Button>
      <Modal visible={visible} onDismiss={() => setVisible(false)}>
        <View>
          <Text typography="b1">This is a Modal overlay</Text>
          <Text typography="l3">
            You can add any content here, and it will appear as a modal. Tap
            outside the modal or press the button below to dismiss it.
          </Text>

          <Button
            style={{
              marginVertical: 16,
              justifyContent: 'flex-end',
            }}
            onPress={() => setVisible(false)}>
            Close
          </Button>
        </View>
      </Modal>
    </View>
  )
}

Props​

PropData TypeDefault ValueDescription
ExtendsRNModalProps--Inherits properties from RNModalProps
backdropStyleStyleProp<ViewStyle>--Style the backdrop of the modal
contentStyleStyleProp<ViewStyle>--content style of the Modal
onBackdropPress() => void--Callback whenever user press on the backdrop or on the android back button press