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>
none prevents all click, state and cursor options on the specified HTML element. auto restores the default functionality (useful for use on child elements of an element with pointer-events: none; specified. inherit will use the pointer-events value of the element's parent.
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.
Default Pointer Events on an element corresponds to the CSS pointer events property. It controls whether or not an element will "pass through" clicks to elements that are underneath it (that is, elements that have a smaller z-index). For example, in the following canvas an image sits over a button element.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With