search

jeremybarbet / react-native-portalize

The simplest way to render anything on top of the rest.
MIT License
335 stars 22 forks source link

fix: use useRef for Host queue to improve stability #20

Open teaualune opened 2 years ago

teaualune commented 2 years ago

While using this library to build "overlay" widgets in our RN project, we discovered that some Portals did not unmount correctly.

For instance, our react-navigation based project has ScreenA containing OverlayA, which are implemented with Portal. When ScreenA is popped, we found that sometimes OverlayA is not unmounted, out of our expectation.

After some digging, it seems that the queue array in Host component might be one of the problem: since Host is a functional component, queue is re-initialized each time Host re-renders. According to the original implementation, queue is a class member, so it should become a RefObject after converting to functional component.

I utilized patch-package to create a hotfix for my project and the behavior becomes expected, so I created this PR to address the problem. This PR rewrites queue into a RefObject with useRef as well as extracts type definition of queue into IPortalAction.

lucasjohnston commented 2 years ago

For anyone looking for a patch: https://gist.github.com/lucasjohnston/5bf626fae923009ae1cf5a5db894842f

In the process of debugging our freezing issues I came across this thread and realised modals aren't unmounting properly as OP described. Currently trying to fix my issue with a combination of this patch and using InteractionManager.runAfterInteractions().