Preserving Route State When react-navigation resetToRoot Clears Navigation Stack

Direct Answers

Does resetToRoot guarantee all intermediate routes are cleared and the root component fully re‑mounted on every platform? Yes, for react-navigation v6+. The action replaces the entire navigation state with a single route at index 0, which causes React to unmount every screen in the previous stack and mount a fresh instance of the root screen on iOS, Android, and Web.

Can route parameters persist across the reset without explicit re‑passing? No. Parameters from the discarded stack are lost. Any data the new root needs must be supplied in the navigateTo argument (or come from an external store such as Context, Redux, or Zustand).

Confirmed Behavior (v6+)

• resetToRoot(navigateTo?) dispatches CommonActions.reset({ index: 0, routes: [newRootRoute] }).
• The navigation state reference changes completely, so React reconciliation treats the root screen as a new component instance — useEffect cleanup and setup run again.
• Nested navigators: calling resetToRoot on a child navigator resets only that child’s stack; the parent stack is untouched.

Android “Flash” Explanation

The brief appearance of the previous screen is a timing artifact: the native view hierarchy for the old stack tears down on the UI thread while the JavaScript thread prepares the new root. On slower devices or with a heavy root component, the gap is visible. This cannot be eliminated from JavaScript alone.

Practical Verification Steps

1. Create a minimal three‑screen stack (ScreenA → ScreenB → ScreenC).
2. Add useEffect mount/unmount logs to each screen.
3. From ScreenC, call:

   navigation.dispatch(CommonActions.reset({ index: 0, routes: [{ name: 'Root', params: { test: 'value' } }] }));

4. Verify: ScreenA and ScreenB unmount, Root mounts fresh, Root receives only { test: 'value' }.
5. Test on Android emulator and physical device; record screen to measure flash duration.

Workarounds (If Remounting Is Undesirable)

• Use navigation.replace('Root', { params }) to swap a single route without clearing the whole stack.
• Lift shared state to a parent navigator or external store so it survives stack replacement.
• Optimize root component render speed (memoization, lazy initialization) to reduce flash perception.

Note: Behavior described assumes react-navigation v6+. v5 used StackActions.reset with a different signature. If you are on v5, the guarantees differ.