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

React Navigation + TypeScript Error: Type 'EventStackParams' does not satisfy the constraint 'Record'

$
0
0

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,  },};

Viewing all articles
Browse latest Browse all 6287

Trending Articles



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