I'm trying to type a nested navigator that takes a route param.
In order for its screens to be typed correctly when navigating them with params, the navigator is types as such:
import { NavigatorScreenParams } from '@react-navigation/core'
RootStackParamList: {
NestedNavigator: NavigatorScreenParams<NestedScreensParamList>
}
Typescript seems to be satisfied when trying to navigate in one of the nested navigator screens by doing:
navigation.navigate('NestedNavigator', {screen:'NestedScreen', params:{example})
The problem arises when I want to pass some route parameter to NestedNavigator.
For nested screens, I type the screen params as such:
import { NativeStackScreenProps } from '@react-navigation/native-stack'
type NestedScreen = NativeStackScreenProps<NestedScreensParamList,'NestedScreen'>
This allows me to access route.params.example.
I wanna be able to type the NestedNavigator so I can access params passed to it. The funny thing is that its totally possible to do so, so its either me missing something from the docs, or a type is missing to achieve this.
This is how I'm doing it now in order to stop TS complaining:
export const NestedNavigator = ({ route }: any) => {
const { exampleParam } = route?.params as NestedNavigatorRouteParams
<Navigator>
<Screen
name="NestedScreen"
component={NestedScreen}
options={exampleParam === 'something'? ... : ...}
/>
...
Docs are not of much help for me, but maybe my eyes are strained from staring at the for too long...
Anyone else put themselves in this position before?