0

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.

lian
  • 399
  • 1
  • 3
  • 16
  • 1
    Please recreate your component including the error in a sandbox so answerers can review and correct the error. – Code Whisperer Apr 09 '22 at 09:58
  • `width: '95%'` sorta "takes up the whole screen". You can change that to `max-width: 95%` – mardubbles Apr 09 '22 at 10:03
  • The hieght is only 200. And i can't access the screen below or above – lian Apr 09 '22 at 10:11
  • @CodeWhisperer do I need to add external library for react native in the code snippet? – lian Apr 09 '22 at 10:13
  • as long as the code example works and recreates the behavior you are talking about in the link provided, it should be good :yes: – Code Whisperer Apr 09 '22 at 10:16
  • https://vshf2o.csb.app/ so here is a simple example. When the modal window is shown it covers the whole screen and I can't access elements on the background – lian Apr 09 '22 at 11:31

1 Answers1

1

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.

Thibault Capelli
  • 178
  • 6