Ionic-framework: bug: life-cycle methods don't work in ionModal (react)

[andyindahouse]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
I'm trying to use the lifecycles (useIonViewWillEnter, useIonViewDidEnter) provided by ionic but these don't work when they're into a modal.

You can reproduce it here: https://codesandbox.io/s/ionic-react-router-forked-wjqoy?file=/src/App.tsx

Expected behavior:

These hooks works in components into a modal in the same way that they do when they're into a IonPage directly.

Steps to reproduce:

You can reproduce it here: https://codesandbox.io/s/ionic-react-router-forked-wjqoy?file=/src/App.tsx

Related code:

You can reproduce it here: https://codesandbox.io/s/ionic-react-router-forked-wjqoy?file=/src/App.tsx

Other information:

If you added a IonPage to the modal, they work but this has other sideEffects because of you have a IonPage into other IonPage. So I'm not sure that this is the way to go. I understand that you should have these hooks in any componente inside of the IonModal in the same way that the components into IonPage, Don't I?

Thanks in advance 👍

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The lifecycle hooks useIonViewWillEnter and others are for use in routing environments. IonModal exists outside of the router, so these hooks do not work here. Instead, you should be using the default React component lifecycle hooks.

edit: It appears that they _can_ work, but you will need to use IonPage as you noted in your component. That being said, you probably should not rely on them as these hooks are really intended for pages linked to the router.

[andyindahouse]

hmmm, I'm getting problems with React component lifecycle hooks because of when it runs the modal is not presented yet. By the way, How could I listen modal events from React? events like ionModalDidPresent, I'm seeing the doc but I can't find a react example

[liamdebeasi]

Hmm yeah we should update that example. Here is how you would use it in React:

<IonModal
  isOpen={showModal}
  onDidPresent={() => doSomething()}
  onDidDismiss={() => doSomethingAgain()}
>
  <p>This is modal content</p>
</IonModal>

Basically it's the same usage as all the other overlay components such as Popover

[andyindahouse]

Oh, I see, thx! :D

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.