Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No pointer events on Modal

Tags:

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>
like image 699
Anshul Koka Avatar asked Jun 17 '17 03:06

Anshul Koka


People also ask

What does pointer events none mean?

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.

What are pointer events?

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.

What is the default pointer events?

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.

How do you trigger a modal with a button?

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.


1 Answers

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.

like image 168
suther Avatar answered Oct 19 '22 06:10

suther