Navigating nested navigators in React Navigation 5.0

Question

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 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, wheather tips on best nesting practices or code samples that help me navigate.

Answer 1

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' });