Modal window takes up the whole screen-CodePudding

I have a modal component in StationInfo.js:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function StationInfo() {
    return (
        <View style={styles.infoContainer}>
        </View>
    )
}
const styles = StyleSheet.create({
    infoContainer: {
        backgroundColor: '#ffffff',
        height: 200,
        width: '95%',
        position: 'absolute',
        bottom: 115,
    },
});

And Map.js, where this modal window is called:

export default function Map() {
    const [currentPosition, setCurrentPosition] = useState(INITIAL_STATE);
    const [infoModalVisible, setInfoModalVisible] = useState(false);

    useEffect(() => {
        Geolocation.getCurrentPosition(info => {
            const { longitude, latitude } = info.coords;

            setCurrentPosition({
                ...currentPosition,
                latitude,
                longitude,
            })
        })
    }, [currentPosition])

    return (
        <View style={styles.mapContainer}>
            <MapView
                provider={PROVIDER_GOOGLE}
                style={styles.map}
                initialRegion={currentPosition}
                showsUserLocation
            >
                <Marker
                    key={index}
                    coordinate={marker.coordinates}
                    onPress={() => setInfoModalVisible(true)}
                />
            </MapView>

            <Modal
                animationType="slide"
                transparent={true}
                visible={infoModalVisible}
                onRequestClose={() => {
                    setInfoModalVisible(!infoModalVisible);
                }}
            >
                <StationInfo />
            </Modal>
        </View>
    )
}

When modal window is shown, it takes up the whole screen, so I can't access the background elements, how to solve this problem? Also I need to make modal close when user tap outside the window.

CodePudding user response：

I don't think it is possible to allow press on elements behind a modal cause it is designed to prevent this behavior.

If your goal is to close the modal by clicking on an overlay you should take a look to this trick: Close react native modal by clicking on overlay?

If you really need to press on elements behind, I think you should not use standard modal but view based one like react-native-modal (never tested myself). Or maybe create your own.