Bear with me, I'm new in this React Native Typescript. I created a Higher Order Components that will allow dynamic navigation based on arguments passed.
Typescript throwing me an error message when I try to pass an argument instead of screen name string.
I wanted to do:-
navigate(screenName[0])// Ornavigate(screenTo)instead of:-
navigate('MyScreen')Below is part of my code:-
import React, { type ComponentType } from 'react';import { type NativeStackNavigationProp, type NativeStackScreenProps } from '@react-navigation/native-stack';type RootStackParamList = { Home: undefined; Category: undefined; AddCategory: undefined;};type Props = NativeStackScreenProps< RootStackParamList>;const withNavigationHeader = <P extends object>(WrappedComponent: ComponentType<P>, screenTo?: string) => { return (props: Props) => { const { navigate } = props.navigation; const screenName = ['AddCategory'] const testNavigate = (): void => { /** * This OK. */ navigate('AddCategory') /** * This is not OK. * TypeScript Error: No overload matches this call. Argument of type * '[string]' is not assignable to parameter of type * '[screen: "AddCategory"] | ... */ navigate(screenName[0]) /** * This is not OK. * TypeScript Error: No overload matches this call. Argument of type * '[string | undefined]' is not assignable to parameter of type * '[screen: "AddCategory"] | ... */ navigate(screenTo) } ... ...How can I achieve this? How can I pass argument of screen name instead of hardcoded screen name? And how can I type checking the screen name itself so that this HOC can only be used with registered screen?
I hope we can resolve this or else I'm just gonna use any type. Thank you for your time.
