Interacting with content behind a React Native ?

Question

I want to show a Modal in a React Native app but still be able to interact with content behind the modal with press and pan events. Is this possible?

It seems to block all events with content behind it which is problematic for the type of app I'm building. Any hacks around this would be welcome too.

score 3 · Answer 1 · answered Apr 10 '21 at 02:36

3

What you're asking sounds just like an absolute component with a high zIndex value

     const [modalVisible, setModalVisible] = React.useState(false);

     ...
     {modalVisible && <Card style={styles.modal}>
        <Text>I'm a pseudo modal</Text>
        <Pressable
          style={[styles.button, styles.buttonClose]}
          onPress={() => setModalVisible(false)}
        >
          <Text style={styles.textStyle}>Hide Modal</Text>
        </Pressable>
      </Card>}
      ...


const styles = StyleSheet.create({
  ...
  modal: {
    backgroundColor: 'tomato',
    padding: 20,
    alignSelf: 'center',
    top: '50%',
    position: 'absolute',
    zIndex: 9999
  }
  ...
});

https://snack.expo.io/@diedu89/pseudomodal

You probably need to work out a custom component, I don't see any option in the Modal component to get that behavior

answered Apr 10 '21 at 02:36

diedu

19,277
4
32
49

Makes sense. The problem with that for me was I built heavily on react-native-modal which uses the standard modal internally. I had to [patch the library to allow passing a custom modal component](https://github.com/mhluska/react-native-modal/commit/e3a552f556b88d2bce55f3b17a721cbed0479df2). – Maros Apr 10 '21 at 04:14
@Maros have you tried the `coverScreen` prop? – diedu Apr 10 '21 at 05:07
Hmm I have not. Maybe that's what was causing my issue. I'll try it in the morning and let you know how it went. – Maros Apr 10 '21 at 06:46
@Maros did the `coverScreen` prop make any difference? – Hans Bouwmeester Mar 21 '22 at 18:55

Mustafa Malayawala · Answer 2 · 2022-12-13T14:22:59.700

1

If you are using react-native-modal, Set the hasBackdrop, coverScreen prop to false and backdropOpacity to 0 to get interactive background.

edited Dec 13 '22 at 14:22

answered Dec 13 '22 at 14:16

Mustafa Malayawala

11
2

I tried this but still not able to intract – Tanjil Hossain Aug 21 '23 at 06:19

score 1 · Answer 3 · answered Dec 22 '22 at 20:20

I had this same problem, and can confirm that adding coverScreen={false} and hasBackdrop={false} is what worked for me

import Modal from 'react-native-modal';

<Modal
  isVisible={showModal}
  animationType="slide"
  animationInTiming={1000}
  animationOutTiming={1500}
  animationIn="slideInUp"
  animationOut="slideOutDown"
  style={styles.modalStyles}
  deviceHeight={height}
  deviceWidth={width}
  hasBackdrop={false}
  coverScreen={false}
>

after adding those config options, I'm able to interact with the rest of my page while the modal is still open

Interacting with content behind a React Native ?

3 Answers3

Linked