How to create a new generic object type that uses react-navigation's generics?

user_6463625 0
Viewed 471

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'>) {
react-native typescript reactjs javascript types
1 Answers

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 and route 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) {
user_12189800
Related