Comments (5)
hi @willadamskeane ! thanks for your patience regarding this issue! 🙌 i'm happy to report that the new pointerEventsBehavior
option is now available in the latest release (v.3.4.0
) 🥳 . i gave it a couple of tries and everything seems to be working as per the updated docs. let me know if it's all good on your side as well now!
from react-native-modalfy.
hey @willadamskeane! i don't think i understood your question correctly: the current active modal's backdrop should be over all the inactive modals. that way, by pressing a modal behind the backdrop, you should get the expected behavior: the active modal closing. if i didn't get it right, feel free to provide a repro on snack or a video if possible!
otherwise, one approach would be to wrap all your modals in a regular <div>
and have a pointerEvents="none"
that would be applied depending on what's the currentModal
. you could track that by sending an event each time you open or close a modal and said event would update each modals' locale state to apply or remove that pointerEvents="none"
.
from react-native-modalfy.
hey @willadamskeane! i don't think i understood your question correctly: the current active modal's backdrop should be over all the inactive modals. that way, by pressing a modal behind the backdrop, you should get the expected behavior: the active modal closing. if i didn't get it right, feel free to provide a repro on snack or a video if possible!
otherwise, one approach would be to wrap all your modals in a regular
<div>
and have apointerEvents="none"
that would be applied depending on what's thecurrentModal
. you could track that by sending an event each time you open or close a modal and said event would update each modals' locale state to apply or remove thatpointerEvents="none"
.
Hey @CharlesMangwa, thanks for getting back to me. Here's a video of the issue I'm seeing: https://www.loom.com/share/dce779ac455c4978886e606cbcde14c0
I should mention this is on web. I can make it work the way you described by manually adding a zIndex to the backdrop component in Chrome dev tools, but there's no way for me to pass a style to the backdrop with the library currently.
from react-native-modalfy.
@willadamskeane thanks for the video! it helped me realized i misunderstood how your ui works! the behaviour you're experiencing is "expected" as: the elements' hierarchy is indeed: current modal > any other modal in the stack > backdrop > your app. that's why the larger modal is still clickable since nothing is preventing it from being clickable plus it's on top of the backdrop.
one short-term solution would be to track the current modal as i proposed in my previous comment:
otherwise, one approach would be to wrap each modal in a regular
<div>
and have apointerEvents="none"
that would be applied depending on what's the currentModal. you could track that by sending an event each time you open or close a modal and said event would update each modals' locale state to apply or remove thatpointerEvents="none"
.
meanwhile, the library could use the help of a new modal option, ie: pointerEventsBehaviour
('auto'
| 'none'
| 'current-modal-none'
| 'current-modal-only'
), that would pretty much be doing that.
let me know if that would address your issue!
from react-native-modalfy.
@CharlesMangwa Yeah, sounds like that modal option would cover our use-case. Thanks!
from react-native-modalfy.
Related Issues (20)
- Pass UI elements instead of Modal Name HOT 1
- There was no opened 'ModalName' modal warn HOT 1
- Modal does not animate out HOT 1
- Easy way to get modal props HOT 3
- Is it possible to check which modals are currently open before opening a modal? HOT 1
- Modal is opened again after close the first one HOT 6
- Need finish callback if noOpenedItems in queueClosingAction functions is true
- Error raised by FlingGestureHandler (react-native-gesture-handler) HOT 3
- Sending `onAnimatedValueUpdate` with no listeners registered. HOT 6
- [iOS] open modal when screen has options presentation: "modal" HOT 3
- [Android] Cannot read property 'addListener' of undefined HOT 3
- CloseModal causes an infinite loop when used as a dependency for useEffect HOT 2
- How to configure the option to close automatically (e.g. after 3000 ms) and not to close when clicking on the background? HOT 2
- RN 0.73: FlingGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. HOT 2
- Is it possible to make `params` non-undefined? HOT 1
- Responsive Background HOT 1
- Is it possible to pass a parameter which is a callback function to the modal? HOT 1
- closeModal occasionally stops working, while backdrop press works HOT 4
- How to test modal components with Jest ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-modalfy.