I have a react-native app running in my IOS simulator in which I am using react-navigation version 6. My home screen is called the myApps screen which lists several small applications that the user can build within my IOS app. These small applications make use of Ionic Portals or webview or their combination to show their content.
The way I have structured my app is that there is a Stack Navigator at the top that lists several stack screens, one such being the MyApps screen and another screen called portal screen that consists of the ionic portals code that renders the UI for user's small applications.
Now I have a scenario where from my MyApps screen I open one such app and view the safari develop menu for my IOS simulator, I see the name of my IOS app at the top and below it the instance that is now running ionic portals. All good until this point. Now when I go back to my MyApps home page, I use the navigation.navigate('MyApps') and since my screens are nested in a stack navigator, the portals screen is popped and I reach the myApps screen. The problem here is that the instance of portals on safari develop keeps on lingering and is not destroyed or garbage collected, even though the screen was removed from the navigation stack. As a result, the second time I open the same app, I see there two instances listed on the safari develop menu, with one the current one and the other one, the stale one.
How can I remove the stale instances everytime I navigate out of the portals screen and back to my Home screen? I am afraid these stale instances getting accumulated after each screen pop would cause memory leaks.
Also worth to note, when I completely kill my IOS app in the simulator and reopen it, then the instances are wiped out correctly from safari develop menu
