Navigating nested navigators in React Navigation 5.0

Issue

I am migrating my app from React Navigation 4 to React Navigation 5. The difference is that now one cannot jump from a deeply nested navigator to the root one, and I need to navigate up in the tree but I cannot find a way to do it.

The structure right now looks like this:

Root navigator
- Auth navigator
-- Login
-- Signup
-- ...
- App navigator
-- Home
--- ...
-- Settings
--- Settings page
--- Account page

I need to be able to go from settings page to login but whatever I try, then I get the error

The action 'REPLACE' with payload '{"name": "AuthNav", "params":{"screen": "Login"}}' was not handled by any navigator.

I've tried to add a ref att the root navigator and use that but I get the same error.

Any help would be appreciated, whether tips on best nesting practices or code samples that help me navigate.

Solution

In this page https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator they show the way need for nested. So in your case should be something like that.

navigation.replace('Auth', { screen: 'Login' });

Answered By - EQuimper