React Native TouchableWithoutFeedback on view with position absolute

Question

I have a modal that I want show when the user clicks a i button. The modal envelops the entire screen, by setting the position to 'absolute'. This works fine, but when the user clicks somewhere on the screen, it should disappear again. My TouchAbleWithoutFeedback however, does not register a press. It appears to be having something to do with the position being absolute but I can't put my finger on it. Also, the clickable elements underneath the modal are still interactable, even though the modal is displayed on top of those elements. Here is my code:

import { TouchableWithoutFeedback } from 'react-native-gesture-handler';

    render() 
    {
         return (<View>
            <View style={styles.container}>
                <OtherElements/>
            </View>
            <MainScreenInfoModal showModal={this.state.showInfoModal} />
        </View>);
    }
    
    
    
            const MainScreenInfoModal = ({showModal}) =>
        {   
            if (showModal)
            {
                return <TouchableWithoutFeedback style={{zIndex: 10}} width={window.width} height={window.height} onPress={() => {console.log('press!')}}>
                    <View style={styles.infoModal} >
                        <SvgXml width={300} height={300} xml={mainscreenInfomodal} style={{
                            alignSelf: 'center',
                            marginTop: window.height * .45
                        }}/>
                    </View>
                </TouchableWithoutFeedback>
            }
            return null;
        }
    
        const styles = StyleSheet.create({
            container: 
        {
            fontSize: 26,
            textAlign: 'center',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'flex-start',
            alignItems: 'center',
            padding: 13,
            fontWeight: "bold",
        },
    {...} ,
            infoModal:
                {
                    position: 'absolute',
                    bottom: 0,
                    width: window.width,
                    height: window.height,
                    backgroundColor: 'rgba(255,255,255,0.7)',
                    zIndex: 10
                }});

Answer 1

try react-native-modalize library, it saved me alot of time and nerves developing modals