CODEWITHSUNDEEP
react-nativemodal-dialogreact-native-modal
Maros
Maros

Reputation: 1973

Interacting with content behind a React Native <Modal />?

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.

Upvotes: 1

Views: 3189

Answers (3)

James N
James N

Reputation: 533

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

Upvotes: 2

Mustafa Malayawala
Mustafa Malayawala

Reputation: 11

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

Upvotes: 1

diedu
diedu

Reputation: 20785

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

Upvotes: 4

Related Questions