Class Modal

The Modal component assembles a temporary dialog window that appears above the main interface of the application. The visibility of the window is defined by a property called show, and you can pass a direct state to this property, causing the window to appear and disappear.

Basic example:

<Modal
   show={showModal}
   position={position}
   onClose={this.closeModal}
>
 <View maxWidth={300} backgroundColor="neutral-100" padding='small' borderRadius='small' direction='column' alignItems='center'>
  <Text wide fontSize='medium' marginBottom="nano">We've come this far</Text>
  <Image
    height={150}
    src={img}
  />
  <Text wide marginTop="small" marginBottom="nano">This is a modal window, press the cancel button to close it.</Text>
  <View direction='row' gap={10}>
    <Button
      variant="secondary"
      onPress={() => this.closeModal()}
      label="Cancel"
    />
    <Button
      onPress={() => console.log("Continue")}
      label="Continue"
    />
  </View>
 </View>
</Modal>
Copy

Param

Modal Properties

Has Children