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])
// Or
navigate(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.