Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

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

$
0
0

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.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>