No pointer events on Modal

Question

Is there a way to set pointerEvents to none on a Modal? I'm trying to render a child view outside its parents bounds and the only way I could do this is by using a Modal. Ignoring pointerEvents on the child doesn't seem to work.

<View>
  <View style={{flex: 1, backgroundColor: 'red'}}></View>
  <Modal
    animationType='fade'
    transparent={true}
    visible={true}
    pointerEvents='none'>
    <View style={{flex:1, alignItems: 'center', justifyContent: 'center'}} pointerEvents='none'>
    </View>
  </Modal>
</View>

Could you solve it? ... I have tried with heights, margins ... but nothing. — 0123, Aug 19 '17 at 17:07
Hi there, were you able to figure this out? I also need to do same. — Noitidart, Feb 07 '18 at 07:47

score 1 · Answer 1 · answered Dec 31 '18 at 12:55

I don't know if you mean this, because your description is not clear enough for me... but I also needed an Modal some time ago, which shouldn't be closed if I tap anywhere in the app, but only if I do a given Action (for me it was a Buttonclick in a Modal, after a given click-route).

And here is the way I solved it: I use react-native-modalbox, which does a really good Job for it.

With a plenty of possible options, you also can handle the click-behavior for the Modal.

An small Example:

import Modal from 'react-native-modalbox';
 ... 
 ...
        <Modal
          style={[styles.audioToolbarModal, styles.audioToolbarBottomModal]}
          position="bottom"
          backdrop
          swipeToClose={false}
          coverScreen
          onOpened={() => this.startRecording()}
          isDisabled={modalIsDisabled}
          ref={(ref) => { this.audioToolbar = ref; }}
        >

The properties you might need are "isDisabled" (set this via State to toggle it), and swipeToClose={false}

I hope, this help you out.

No pointer events on Modal

1 Answers1