In my React Native project I have multiple screens, every screen I have to import these types and set is as props type in my screen over and over again.
import { RouteProp } from '@react-navigation/native' import { StackNavigationProp } from '@react-navigation/stack' import { NavigatorParameters } from '../references/types/navigators' type PropsType = { navigation: StackNavigationProp<NavigatorParameters, 'ChangeData'>, route: RouteProp<NavigatorParameters, 'ChangeData'> } function ChangeData({ navigation, route }: PropsType) {
Can it be more be simplified into like this? So from that I can only import one type only
import ScreenPropsPatternType from '../references/types/screen-props-pattern' function ChangeData({ navigation, route }: ScreenPropsPatternType<'ChangeData'>) {
Advertisement
Answer
The React Navigation lib offers a generic type already for this exact purpose:
Alternatively, you can also import a generic type to define types for both the
navigation
androute
props from the corresponding navigator:
In your case, it would look like this:
import { StackScreenProps } from '@react-navigation/stack'; import { NavigatorParameters } from '../references/types/navigators' type PropsType = StackScreenProps<NavigatorParameters, 'ChangeData'>; function ChangeData({ navigation, route }: PropsType) {
If you’d like to simplify this further, you could probably wrap it and export your own type. See the Generic Object Types documentation for more details on how this works.
import { StackScreenProps } from '@react-navigation/stack'; import { NavigatorParameters } from '../references/types/navigators' export type ScreenPropsPatternType<K extends keyof NavigatorParameters> = StackScreenProps<NavigatorParameters, K>;
So you’d be able to easily use it within screen components.
import { ScreenPropsPatternType } from '../references/types/screen-props-pattern'; type PropsType = ScreenPropsPatternType<'ChangeData'> & { // If you have any other custom props, this is totally optional. customProp: number; } function ChangeData({ navigation, route, customProp }: PropsType) {