React-native-navigation: Calling setRoot after having bottom tabs

[vdino96]

Issue Description

Hello,

my application has an authentication flow (1. root) -> after which the user is logged in and directed to a root with bottom tabs (2. root).
Now, this root with bottom tabs has a prop tabsAttachMode set to "onSwitchToTab", which means it will render the tabs only when the user clicks on them and it works fine.
The issue is when the user wants to log out of the application and we need to use the setRoot again to bring him back to the authentication flow (1. root).
On the call of setRoot and closure of the main root with bottom tabs (2. root), the navigation first does the setRoot (OK) -> calls the render methods for the other tabs that were never shown (not OK). In our case, we have functions hooked to the rendering of the screen, which call the API and the navigation should never run these render methods when changing the root.

Steps to reproduce

1. Create root with one screen, which calls setRoot which has bottom tabs with more than 1 tab.
2. Set tabsAttachMode: "onSwitchToTab" on the bottom tabs options.
3. Without navigating to other tabs, call setRoot back to the first screen (or even to some new root) and check the console for calls on the other screens in the main stack (or console log something in the screen componentDidMount in other tabs)

Environment

• React Native Navigation version: ^4.6.0
• React Native version: 0.59.10
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Device - Android 6.0.1, Debug and release

[guyca]

Hey @vdino96 Can you please push a reproduction to the issue? Preferable in the playground app (clone the repo and modify the playground app in your fork)

[vdino96]

Hello, here is a playground app https://github.com/vdino96/react-native-navigation-issue ... Just pull the folder and run on your phone/emulator. It will show a basic screen with "Here" button, which when you click will create a bottom tab root with 3 screens/tabs. The options for bottom tab rendering are set to "onSwitchToTab". After the first screen loads, it will console log "I should be logged". On the first screen, just press the "First screen" button and it will set the new root. In the console you should see the componentDidMount logs from the 2 remaining screens "I should not be logged" and "Me neither"

[vdino96]

Note, even when you do a reload of the app while on the first tab, the other 2 tabs will run their componentDidMount after the reload

[vdino96]

Bump

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[dmexs]

Is this related to https://github.com/wix/react-native-navigation/issues/5366?

I'm having a similar issue when trying to logout my user from a bottom tabbed root. When I use setRoot to return to the single screen login my my tabbed screens start throwing rendering exceptions after the redux state is cleared.

I was hoping to be able to wait until setRoot resolves its promise but per the issue above, the setRoot promise resolves before the screens are actually dumped.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[dmexs]

This is still an issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[vdino96]

A quick note: it has been somehow fixed on version 6.5.0, but has been bugged in the later versions again. I've downgraded to 6.5.0 and it works properly, so you might want to check what were the updates after that version that might've caused the bug again.

[keeprock]

Got similar issues, going back to 6.5.0 solve them. But, in an unfortunate coincidence, 6.5.0 contains a regression which broke mergeOptions functionality. (#6090 )

I've got success on 6.6.0-snapshot.989 version, which implemented a fix for the mergeOptions. @vdino96 give it a try.

[guyca]

@vdino96 @xapai I'm unable to reproduce on https://github.com/vdino96/react-native-navigation-issue after I've updated it to 6.11.0.

Things I've tried:

• Reloading
• calling setRoot again after changing to bottomTabs root (without switching to other tabs)

I'm closing the issue as it seems it's fixed. If you believe there's still an issue or please open another ticket with updated details and reproduction. Thanks 👍

[vdino96]

Hello, thanks for the reply. Indeed, the issue is fixed for android, but still remains for iOS (works on 6.5, but has a bug on 6.12) @guyca

[keeprock]

Thanks! It has been resolved for me too. Combination of updates and my own code glitches. Thanks for checking this issue out, @guyca! Have a great day!