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'>) {
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
navigationandrouteprops 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) {