My app (react native) has a modal that contains lengthy content. The issue is that the modal starts overflowing past the screen and cuts off UI.

I am trying to limit the height which the modal grows. What is the best approach for this? I tried adding SafeAreaView or ScrollView, or setting a max height, but none of the options worked for me.

Sample code:

   <Modal>
      <ModalBackdrop />
      <ModalContent>
        <ModalHeader>
        { ... }
        </ModalHeader>
        <ModalBody>{ Long content }</ModalBody>
        <ModalFooter>
         { ... }
        </ModalFooter>
      </ModalContent>
    </Modal>