Cannot move / zoom when component placed in a modal and in front of other components

[Brain4n0t4found]

Hello,

I am currently using the component in a Modal and I have a problem when I try to move or zoom / dezoom the component.

It only occurs when I place my finger on a place where the component in the modal is in front of 2 components of the background page. I'm sorry for this terrible explanation but it is pretty hard to tell clearly what is the problem, so I've made this video to show it.

As you can see in the video, when I put my finger where the map is in the background or where the title area is (the blue are), I cannot interact with the component anymore. Here are the concerned areas drawn in orange :

I've already tried to disable pointer events on the entire background page when the modal is open but still nothing happens when I interact with zoomable view in front of background components. I've also tried to log OnShiftingBefore and OnShiftingAfter events and both aren't called in the areas where the component isn't interactible with.

Here's the code :

<View style={styles.header}>
    /* Header content */
</View>
<View style={styles.main}>
    <View style={styles.carteContainer}>
        <Modal
            /* useless options for this exemple */
            transparent={true}
        >
            <View style={styles.containerModalContent}>
                /* Closing Modal Button */
                <View  style={{ height: props.CanvasSize.y/props.CanvasSize.x * 350 }}>
                    <ReactNativeZoomableView
                        zoomEnabled={true}
                        maxZoom={1.5}
                        minZoom={0.95}
                        zoomStep={0.25}
                        initialZoom={1}
                        bindToBorders={true}
                        style={{
                            height: props.CanvasSize.y/props.CanvasSize.x * 350,
                            width: props.CanvasSize.x/props.CanvasSize.y * 350,
                        }}
                        onZoomEnd={ResizeMapElements}
                        captureEvent={true}
                    >
                        <Map />
                    <ReactNativeZoomableView/>
                </View>
            </View>
        </Modal>
        <TouchableOpacity 
            style={styles.staticMap}
            onPress={() => {
                setOpenContainerModal(true);
            }}
        >
            <Map />
        </TouchableOpacity>
    /* bottom button */
    </View>
</View>

Any idea of what could block the interaction with the component in a modal?

[waqaramjad]

Same issue here