Don't use the same screen `name` in multiple stacks

[Fernando Rojo]

Sometimes, you want to reuse the same screen inside of different pages. For example, you might have /dashboard/user/artists/[slug] and /artists/[slug], which both render the ArtistScreen components.

Assuming these have different stacks in their Next.js pages, it's important that you set different names for inside of the react-navigation stacks.

For example, here these two stacks render the ArtistScreen, but the name must differ:

/artists/[slug] -> ArtistsStack -> <Screen name="artist" component={ArtistScreen} />
/my-artists/[slug] -> MyArtistsStack -> <Screen name="myArtist" component={ArtistScreen} />

You have to give a different name to the screen so that it can be uniquely identified within its stack relative to the root navigator.

If you don't do this, you get weird race conditions with back buttons on Web.

Leaving this here to document later.

On native, if you have a stack singleton, you can just do this:

       <NativeStack.Screen
          component={ArtistScreen}
          name="artist"
          getId={({ params }) => params?.slug}
        />
        <NativeStack.Screen
          component={ArtistScreen}
          name="myArtist"
          getId={({ params }) => params?.slug}
        />