I'm adding TypeScript to my React Native/React Navigation 5 Navigator, but having an issue with Adding EventStackParams
to the createStackNavigator()
.
I've looked through the React Native 5 Docs, StackOverflow, and GitHub, but no luck. What am I doing wrong? Below is my error and the code
Error:
Type 'EventStackParams' does not satisfy the constraint 'Record<string, object | undefined>'.Index signature is missing in type 'EventStackParams'.ts(2344)
Navigation.tsx:
// Imports: TypeScript Typesimport { EventStackParams } from '../types/types';// React Navigation: Stack Navigatorsconst RootStack = createStackNavigator();const EventsStack = createStackNavigator<EventStackParams>();// Events Navigatorconst EventsNavigator = () => (<EventsStack.Navigator initialRouteName="Events"><EventsStack.Screen name="Events" component={Events} options={{ title: '', headerShown: false, }} /><EventsStack.Screen name="EventDetails" component={EventDetails} options={{ title: '', headerShown: true, headerStyle: { elevation: 0, shadowOpacity: 0, borderBottomWidth: 0, }, }} /></EventsStack.Navigator>);
EventDetails.tsx
// Imports: Dependenciesimport { RouteProp } from '@react-navigation/native';// Imports: TypeScript Typesimport { ReduxState, EventStackParams } from '../../types/types';// React Hooks: React Navigationconst route = useRoute<RouteProp<EventStackParams, 'EventDetails'>>();
Types.tsx:
// TypeScript Type: Eventexport interface Event { eventTitle: string, eventDescription: string | null, eventStreet: string, eventLocation: string, eventLatitude: number, eventLongitude: number, eventDateStart: number, eventDateEnd: number, eventTimeStart: string, eventTimeEnd: string,};// TypeScript Type: Event Stack Paramsexport interface EventStackParams { Events: undefined, EventDetails: { item: Event, },};