CODEWITHSUNDEEP
typescriptreact-nativereact-navigation-stack
Siddiqa
Siddiqa

Reputation: 21

React Native Navigation Typescript Typing

I am having issues typing my props in a component that expects parameters. I have read through the documentation and have followed the guides. This is my component that receives parameters.

type PoiDetailsProps = NativeStackScreenProps<RootStackParamList, 'PoiDetails'>;

const PoiDetails = (props: PoiDetailsProps) => {

My RootStackParamList:

export type RootStackParamList = {
  Home: undefined;
  Profile: undefined;
  Drawer: undefined;
  Login: undefined;
  PoiDetails: {
    placeDetails: PlaceDetail | null;
  };
};

My RootNavigation

const Stack = createStackNavigator();
const RootNavigator = () => {
  const {user} = useAppContext();

  return (
    <NavigationContainer>
      {user ? (
        <Stack.Navigator initialRouteName="Tabs">
          <Stack.Screen
            name="Tabs"
            component={TabNavigator}
            options={{headerShown: false}}
          />
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="PoiDetails" component={PoiDetails}/>
        </Stack.Navigator>
      ) : (
        <AuthStack />
      )}
    </NavigationContainer>
  );
};

"@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.10.1", "@react-navigation/stack": "^6.4.1",

I have tried different ways of typing route and navigation including

type PoiNavigationProps = NativeStackNavigationProp<
  RootStackParamList,
  'PoiDetails'
>;

type PoiRouteProps = RouteProp<RootStackParamList, 'PoiDetails'>;

type PoiDetailsProps = {
  navigation: PoiNavigationProps;
  route: PoiRouteProps;
};

the error I get is

Type '{ route: RouteProp<ParamListBase, "PoiDetails">; navigation: any; }' is not assignable to type 'PoiDetailsProps'. Types of property 'route' are incompatible. Type 'RouteProp<ParamListBase, "PoiDetails">' is not assignable to type 'RootRouteProps<"PoiDetails">'. Type 'RouteProp<ParamListBase, "PoiDetails">' is not assignable to type 'Readonly<{ params: Readonly<{ placeDetails: PlaceDetail; }>; }>'. Types of property 'params' are incompatible. Type 'Readonly<object | undefined>' is not assignable to type 'Readonly<{ placeDetails: PlaceDetail; }>'. Type 'undefined' is not assignable to type 'Readonly<{ placeDetails: PlaceDetail; }>'.

I have also tried to give an initial value to placeDetails in the RootNavigator, I have tried to define the params in RootStackParamList as type PlaceDetail | undefined. I have also tried these solutions React native with typescript - how to use the useRoute from @react-navigation/native with typescript

Upvotes: 2

Views: 90

Answers (1)

Mark Atkinson
Mark Atkinson

Reputation: 518

The type inference comes from const Stack = createStackNavigator();.

I suspect you need to pass your RootStackParamList type in like so: const Stack = createStackNavigator<RootStackParamList>();

Please see the docs, they are quite helpful: https://reactnavigation.org/docs/typescript/

Upvotes: 1

Related Questions