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.