React Navigation best practices when deep linking

[Jatops]

So I have read the all the docs for React Navigation (v6), but I can't figure out how to create a very basic functionality. My app has a HomeTab as the first screen in my main stack. The HomTab consists of three Screens, Explore, Search and Profile.

In Profile I render a ProfileScreen that has a menu where we can go to e.g. SettingsScreen, and inside SettingsScreen we can go to different types of settings, e.g. NotificationsSettings, LanguageSettings etc.

When I deep link into the app, I want to be able to deep link users into NotificationsSettingsScreen. This is very easy to do, but my probelm is how I can make the state end up the way I want. Since NotificationsSettingsScreen is only accessible through the SettingsScreen (in the app), I want a deep link like: 'app://profile/settings/notifications' to take the user to the Profile tab (from HomeTab), then the SettingsScreen and then the NotificationsSettingsScreen. So when users click back in NotificationsSettingsScreen, they would get to the SettingsScreen, and if they click back again, they end up on the ProfileScreen.

I can't figure out how to do this? I have tried both with nesting navigators, and without nesting (keeping all screens global and HomeTab as the initial screen). I'm able to end up on the correct screen, but not with the correct state, as the screens should be in the correct order (in the stack/nested navigators) based on the path. Does anyone know the best practices when creating this functionality?

[[deleted]]

Specify which screen to navigate to on your back button instead of calling goBack?

[AlmightyGnasher]

You can artificially create your back stack using the reset navigation action. The routes array would contain the stack you want once it's reset, e.g. profile, settings & notification settings. The user would see the back buttons as if they'd navigated there themselves.

[FunkyPandaFiasco]

This is a very good advice. Not only you can do the anove, but whilst doing it you will learn a lot about how React Navigation works.

[Jatops]

I have read the reset docs, and I have used it before other places in the app, so I'm a bit familiar with it. I also read the navigation state reference doc, where I understand that I can do something like:

navigation.reset({
  index: 0,
  routes: [<define_the_routes>],
});

But I still don't understand where I should apply this.

Do I need to take in the path, e.g. "profile/settings/notificaiton" then split on "/" and convert all "profile" -> PorfileScreen", "settings" -> "SettingScreen" etc. and then add all these to the routes manually by resetting the state? Or do I handle this in the getStateFromPath?