componentDidMount called before backdropRef is set

[awinograd]

I was checking out modal-enhanced-react-native web in an existing project and set rendered the following immediately on page load:

<Modal isVisible={true}>
...
</Modal>

I realized that backdrop didn't properly display and was trying to figure out why. It turns out, the componentDidMount lifecycle event is being called before ref={r => this.backDropRef = r} is executed. Because of that, backdropRef.transitionTo({ opacity }) is never called and the opacity is stuck at 0 until the modal closes/re-opens.

My understanding is that lifecycle/ref ordering shouldn't be possible (https://reactjs.org/docs/refs-and-the-dom.html)

Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires.

But maybe that assumption does not hold true when using ReactDOM.createPortal? I haven't used that API myself yet.

Expected behavior is that the opacity properly transitions when the modal is open immediately on page load.

[rayandrew]

Thank you for looking into that issue @awinograd !

I myself found that bug about 3 months ago and still cannot look deep into that problems

Actually, I am not sure myself if ReactDOM.createPortal caused it as we know in the docs, ReactDOM.createPortal do not change any lifecycle at all.

If that assumption is true, I think we need to rewrite the library to support ReactDOM.createPortal and not overuse any refs at all as modal-enhanced-react-native-web is just a copy from react-native-modal that use refs with some additional changes.

Any kinds of help are appreciated! So feel free to contribute if you get the solution to fix it as I will seek the solution too @awinograd

I keep this issue opened to remind us about the bug, feel free to reference and close if any of us has solution to fix