@react-navigation/native-stack: Missing type for Nested navigator with route params

38 Views Asked by At

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?

0

There are 0 best solutions below