Android open/close modal works only once

[fobos531]

Hello, first of all, thanks for this great library, it's really clean and approaches modals in React Native in a nice way. I've been implementing them using this library in my app and everything has went well, until I've noticed that the open/close interaction works only the first time.

What happens is when I try to open the modal every subsequent time, it opens, but it opens in such a way that it seems like the backdrop is overlaying the modal (like it has a higher zIndex), and with that, the modal is completely non actionable.

I cannot reproduce this issue on your example app which has been built with Expo 42, however, it is reproducible on an Expo 44 project.

Steps to reproduce:

1. instantiate an Expo 44 app
2. run expo start
3. copy over the code from the sample app
4. The opening & closing will work on android only once.

The same behaviour works as intended on iOS. Any help would be greatly appreciated.

[CharlesMangwa]

Hey @fobos531! Happy to read that Modalfy has been able to help you with your work!

The bug you're reporting is a troublesome one indeed! I followed the repro steps you provided but the demo app was behaving as expected, wether it'd be hardware back button, software back button, press on backdrop or close button in modal.

I also updated the example project to Expo 44 (https://github.com/colorfy-software/react-native-modalfy/commit/6c5352b6106e0d16dde40648943f9f88345335fb) and i's working there as well. If you have time to provide a proper repo I could take a look at, that would be very helpful!

[fobos531]

Hey @fobos531! Happy to read that Modalfy has been able to help you with your work!

The bug you're reporting is a troublesome one indeed! I followed the repo steps you provided but the demo app was behaving as expected, wether it'd be hardware back button, software back button, press on backdrop or close button in modal.

I also updated the example project to Expo 44 (6c5352b) and i's working there as well. If you have time to provide a proper repo I could take a look at, that would be very helpful!

Thank you for the prompt response! I'll try and come back when I succeed in reproducing it again.

[fobos531]

Hey @CharlesMangwa

I believe I have a 100% reproducible example which you can find here: https://github.com/fobos531/modalfy-example

Summary of the repo

• this is a freshly initialized Expo 44 project (expo init)
• the source code is copied directly from your example app
• the dependencies installed aside from react-native-modalfy are: react-native-gesture-handler and react-native-reanimated.

Perform:

• yarn
• expo start

Open the app in Expo Go on Android and try to open the first modal from your example app (the one that slides up from the bottom). It should work fine on first open & close. Then, immediately after, the modal should open, but its opacity should be different, like it's overlaid with the backdrop. Try tapping anything, it will result in the modal being dismissed.

After you've confirmed this behaviour, go to components/IntroButton.tsx. I have modified the Text component to use the Layout Animation API introduced in recent version of react-native-reanimated. I believe this (the entering and exiting props on L13) are what's causing your library to bug out. I also tried the layout prop and observed the same behaviour.

If you try the following:

1. remove the entering and exiting props
2. reload the app (press R)
3. also completely exit and reenter the Expo Go app on the android device (I found this to be a crucial step)
4. reopen the app in Expo Go - the modal should now behave as expected.

I tried reverting this change (re-adding the entering and exiting) and by following the above described steps I successfully reproduced the bug 100% of the time.

My test device is a Xiaomi Mi Note 10, with MIUI 12, Android 11

I hope this helps in resolution of this bug.

Please let me know if you need anything else.

[CharlesMangwa]

Thanks a lot for the detailed steps @fobos531! Will look into this and get back to you.

[nemanja-sljivic]

Hello! I have same issue on react-native 0.65.1, and it is happening when I have Layout Animation components from reanimated with entering/exiting set up.

[nemanja-sljivic]

@CharlesMangwa It works for me if I switch to render backdrop before (under) Stack Item(s). Is there some reason we have this order?

[CharlesMangwa]

Hey @nemanja-sljivic, thanks for looking into this. The order may have been switched indeed. If you can reproduce the issue with the current code and switching the order fixes the bug with no regressions, feel free to open a PR!

[nemanja-sljivic]

@CharlesMangwa Thanks for fast reply. I really like this package. Amazing work! I made a PR for it, and I hope it works for you as well @fobos531, because it works perfectly for me.

[CharlesMangwa]

Hi @nemanja-sljivic! Thanks for the kind words! Also big thank you for the PR: just gave it a shot on the repro app @fobos531 provided and your fix did do the trick indeed! Merging and releasing a new version right now!

[CharlesMangwa]

Released in v3.1.1! 🚀