Question: Is it possible to attach the same screen to multiple, different (kinds of) Navigators?

[artsra]

When nesting navigators for writing an app for both web/native, I want to be able to reuse screens, depending on the platform.

I could not find this in the documentation. Also the Type checking with TypeScript
page states:

To annotate the navigation prop, we need to import the corresponding type from the navigator. For example, StackNavigationProp for @react-navigation/stack:

which suggests that a screen is at least bound to a specific kind of Navigator.

So this is probably a request to make this more clear in the documentation.

[raajnadar]

Yes, You can use same screen in multiple navigators, if navigator refers to (stack, drawer, bottom tabs, etc).

[harterc3]

Yes, You can use same screen in multiple navigators, if navigator refers to (stack, drawer, bottom tabs, etc).

I don't think this completely solves @artsra's issue. When using TypeScript, a screen/page's properties are defined as something like this:

StackScreenProps<MyStackParamList, "MyScreen">

MyStackParamList defines the usable params for each screen within MyStack. Now if we had another stack called MySecondStack with params defined in MySecondStackParamList and we wanted this new stack to also have MyScreen in it, how would that work? In the MyScreen file, we've already defined the props using MyStackParamList. Can we also have it reference MySecondStackParamList?

[jzxchiang1]

Bump, this is an important issue IMO

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[pke]

@harterc3 asked an important question. You can't currently specify screen props via typescript when the screen is to be used in different stacks

[jzxchiang1]

I guess you would just have to hope the screen accepts the same params from all of the stack navigators it's used in... Then, you can just type the prop with the ParamList for one of the stack navigators...

[JDMathew]

How do we notify the core team to add support for this?

It's not only a problem with the params type but also with the navigation prop type as the navigation prop can be a combination of multiple navigation props. We might need to create a condition type that accepts a generic which determines which screen is being referenced.

[jzxchiang1]

How do we notify the core team to add support for this?

It's not only a problem with the params type but also with the navigation prop type as the navigation prop can be a combination of multiple navigation props. We might need to create a condition type that accepts a generic which determines which screen is being referenced.

Exactly!

[JDMathew]

@satya164, would you be able to weigh in on this issue. Would it be possible to annotate route and navigation screen props when it is used in multiple navigators. The same can be said for useNavigation and useRoute hooks used in components.

[JDMathew]

I was looking into this again and came up with a solution where I would conditionally create a type based off the route params key but ran into an issue where nested types are not narrowed and so TS couldn't determine the correct type. This would work if the screen name was passed in as a prop at the top level. See microsoft/TypeScript#18758

[Alpha0YZ]

Hey there, has someone found a workaround for this issue?

[Noitham]

Ever considered reopening the issue @raajnadar?
When using Typescript, it is not possible to use the same screen in multiple navigators as you mentioned.

[raajnadar]

Instead of opening a 2 years old issue, you can submit a new issue with a runnable code so that someone from the team will check & guide you if that is not a bug

[tibbe]

@raajnadar what's not clear about the bug report that runnable code will help clarify? A genuine question, the problem seems pretty clear to me. It's not possible to give a type to a screen used in two different navigator since the screen props are tied to one navigator. In other words it's not a runtime issue that would be exposed by running code. :)

[possible-evan]

I've run into this as well have had to jump through hoops to make it work due to how screen navigation is typed. Any solutions would be appreciated!

[aemre]

is there any workaround?