Having the hardest time understanding how to properly type out navigation routes. This is my current setup:
Routes.tsxHere I set up an AppParamList with all the different stacks and tab types.
export type AppParamList = { AuthStack: { Landing: undefined; GetStarted: undefined; VerifyOTP: { email: string }; PrivacyPolicy: undefined; TermsOfService: undefined; }; OnboardingStack: { Onboarding: undefined; }; AppStack: { EventsTab: undefined; FriendsTab: undefined; SettingsTab: undefined; }; EventsTabStack: { Events: undefined; }; FriendsTabStack: { Friends: undefined; SearchUsers: undefined; }; SettingsTabStack: { Settings: undefined; EditName: { id: string; name: string }; EditUsername: { id: string; username: string }; };};AuthStack.tsxThis is where I'm consuming that AppParmList with the key of AuthStack.
const Stack = createNativeStackNavigator<AppParamList['AuthStack']>();export function AuthStack() { return (<Stack.Navigator initialRouteName="Landing" screenOptions={{ headerShown: false, animationDuration: 200, animation: 'simple_push', fullScreenGestureEnabled: true, navigationBarColor: theme.colors.white, }}><Stack.Screen name="Landing" component={LandingScreen} /><Stack.Screen name="GetStarted" component={GetStartedScreen} /><Stack.Screen name="VerifyOTP" component={VerifyOTPScreen} options={{ gestureEnabled: false }} /><Stack.Screen name="TermsOfService" component={TermsOfServiceScreen} /><Stack.Screen name="PrivacyPolicy" component={PrivacyPolicyScreen} /></Stack.Navigator> );}LandingScreen.tsxWhen I am using this in my component. I can't get the navigate to work properly.
const LandingScreen = () => { const navigation = useNavigation<AppParamList['AuthStack']>();...<PrimaryButtontext="Get started"onPress={() => navigation.navigate('GetStarted')}/>The above throws this error:
Property 'navigate' does not exist on type '{ Landing: undefined; GetStarted: undefined; VerifyOTP: { email: string; }; PrivacyPolicy: undefined; TermsOfService: undefined; }'.ts(2339)
