Populate Stack with multiple screens in React Navigation

Viewed 64

After Google for weeks, I'm still yet to find a sensible approach to the following with React Navigation:

I have a Stack with several screens, the app consists of a todo list, of items...

The screens are:

Lists (show all of them)

List (gone into a specific list)

Items (show all items in the list)

Item (adding or editing an item)

When I receive a URL being shared into my app, I want to navigate to the Item screen, but have all the previous screens in place too, for when the user hits back.

This isn't a simple deeplink scenario. The url being shared could be any arbitrary text, not a specific url related to my app. (It's the url someone wants to put on their list).

Is there any way to do this from my App container? I currently try this, but I'm not sure if it's correct/sane.

        this.navigationRef.current?.reset({
            index: 0,
            routes: [ { name: 'Lists' }, { name: 'List' }, { name: 'Items'}, { name: 'Item' } ],
        });

This seems to be unmounting screens if they are already mounted, ie, if the user is already on the Item screen.

I found the "initial" param on navigate work well for another case, when I wanted the screen to be the 2nd one in the stack (and the default was used as the initial screen), but there doesn't seem to be a way to go "deeper".

My stack is also one of 3 tabs, if that makes things easier/worse.

0 Answers
Related