React navigation/native property doesn't exist on type props

Question

I'm having troubles adding a prop to my page using React Navigation in my TypeScript React Native app. I have tried to follow the instructions in https://reactnavigation.org/docs/typescript, notably the Organizing types section, and created a navigationTypes.tsx file:

import { NativeStackScreenProps } from "@react-navigation/native-stack";

export type StackParamList = {
  Home: undefined;
  Admin: undefined;
  "Trail Screen": { trailID: number } | undefined;
};

export type StackNativeScreenProps<T extends keyof StackParamList> =
  NativeStackScreenProps<StackParamList, T>;

declare global {
  namespace ReactNavigation {
    interface ParamList extends StackParamList {}
  }
}

Here is the what I'm calling in the Trail Screen component:

import { StackNativeScreenProps } from "../interfaces/navigationTypes";

type Props = StackNativeScreenProps<"Trail Screen">;

export default function TrailScreen({ trailID, navigation }: Props) {

And here is how I'm calling my navigation in my App.tsx:

const Stack = createNativeStackNavigator<StackParamList>();

function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Admin" component={AdminLogin} />
          <Stack.Screen name="Trail Screen" component={TrailScreen} />
        </Stack.Navigator>
      </NavigationContainer>    
  );
}

If I try to add options or anything in to the Navigator, it just gives me more of the same error:

Property 'trailID' does not exist on type 'Props'.

My Home and Admin screens work fine with using the navigation prop. I'm just not sure what is wrong when I try to add an optional prop.

Answer 1

Okay, so this came from a misunderstanding on my part. (Read the darn documents CLOSELY!). I'm trying to treat the parms normally, just like I would any other component. That isn't correct. When you navigate to a screen, the params are a part of the route. So, you put the route in the [normal] params and then destructure the [actual] params from route.params.

So in my Trails Screen component, I had to do this:

type TrailScreenProps = StackNativeScreenProps<"Trail Screen">;

export default function TrailScreen({ navigation, route }: TrailScreenProps) {
  const { trailID } = route.params;

My trailId is typed correctly and doesn't need me to do anything more.