I have a Modal with a custom height which doesn't take up the entire screen. I would like to prevent the Modal from closing when the user clicks on the overlay or outside the Modal Container. Below is a screen shot of how the modal displays

I have wrapped the Modal Component around TouchableWithoutFeedback and setting the Modal transparent to false but it still closes when the user taps outside the Modal.

Below is my current configurations of the Modal.

 onShow = () => {
        // performs slide in animation
        this.animation();
    };
      
return (

  <Modal transparent visible={visible} onShow={this.onShow}>
                <View
                    style={styles.flex}
                    onLayout={event => {
                        let {height: heightFull} = event.nativeEvent.layout;
                        this.setState({
                            height: getHeightView(heightFull, ratioHeight),
                        });
                    }}>
                   {* Modal Body * }
                    <Animated.View>
                    {* Some other content *}
                    </Animated.View>
                    {* End of Modal Body *}

                </View>
            </Modal>
)