How can I pop modal view on swipe down in react-native?

In the below video, I want the same behavior to take place after I swipe down to close the modal.

There are 2 types of close happening in this video:

1. On click of hide modal button, the modal closes as expected.
2. On swipe down the modal is not being popped out of the stack.

I want to implement behaviour 1 on swipe down also.Can anyone help? I'm new to react-native right now.

I have attached sample code below.

import { Modal, TouchableWithoutFeedback, View, Text, StyleSheet } from 'react-native';import { CustomButton } from "../../components";const AddExpense = (props) => {    const [modalVisible, setModalVisible] = React.useState(true);    const closeModal = () => {        setModalVisible(false);        props.navigation.pop();    }    return (<Modal            animationType="slide"            visible={modalVisible}            presentationStyle="pageSheet"            onRequestClose={closeModal}            onDismiss={closeModal}><TouchableWithoutFeedback onPress={closeModal}><View style={styles.modalOverlay} /></TouchableWithoutFeedback><View                style={[styles.container, styles.modalView]}><Text style={styles.modalText}>Hello World!</Text><CustomButton                    label="Hide Modal"                    secondary                    onPress={closeModal}                /></View></Modal>    );}const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: "#fff",        alignItems: "center",        justifyContent: "center",    },    modalOverlay: {        position: 'absolute',        top: 0,        bottom: 0,        left: 0,        right: 0,        backgroundColor: 'rgba(0,0,0,0.5)'    },    modalView: {        margin: 20,    },    openButton: {        marginTop: 10,    },    modalText: {        marginBottom: 15,        textAlign: "center"    }});export default AddExpense;