React Native: Modal screen is not closing with a tap

In my RN 0.62.2 app/Android emulator, I am looking for a way to close modal showing an image by just tapping the screen instead of putting up a close button. Here is what the app shall be doing:

1. an image is displayed on screen
2. clicking the image pops up a modal screen which fill the width of the whole screen.
3. user can zoom in and out of the image on modal screen  
4. as soon as a user taps the modal screen, then the modal screen is closed.

Here is the render code:

      import FastImage from 'react-native-fast-image';
      import Modal from 'react-native-modal';
      import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
      const [modalDialog, setModalDialog] = useState(null);

      return (
            <React.Fragment>
            <TouchableOpacity onPress={()=>setModalDialog(index)}>  //Touch triggers popping up of modal below
                <FastImage   //<<<===equivalent of Image. The image shown in square box
                    source={{uri:img_source}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    style={{
                        width:width, 
                        height:ht, 
                        verticalAlign:0,
                        paddingTop:0,
                    }}
                />
            </TouchableOpacity>

            <TouchableOpacity onPress={()=> setModalDiaglog(null)}>  //<<<===press shall close modal. But it is NOT
                <Modal isVisible={modalDialog===index}>
                    
                        <ReactNativeZoomableView  //<<<===zoom in and out of image
                            maxZoom={3}
                            minZoom={0.5}
                            zoomStep={0.5}
                            initialZoom={1}
                            bindToBorders={true}
                            captureEvent={true}
                        >
                            <FastImage //<<==show image with full width of the device screen
                                source={{uri:img_source}} 
                                resizeMode={FastImage.resizeMode.cover} 
                                style={{
                                    width:modalWidth, 
                                    height:modalHt, 
                                    verticalAlign:0,
                                    paddingTop:0,
                                }}
                            />
                        </ReactNativeZoomableView>
                    
                </Modal>
            </TouchableOpacity>
            </React.Fragment>
            );

The code above works through 1-3 but not 4. The issue is that the modal screen can't be closed on Android emulator (mimicing a tap with a left mouse click). Tried to put <TouchableOpacity> inside of <Modal> and it didn't work. The <TouchableOpacity> next to <Modal>just didn't respond to press. How the app can close Modal with a tap?

The height may be minimal without flex:1.

So you could add flex:1 to <TouchableOpacity> style, give it a height, then you could tap it to work.