React Navigation Typescript Dynamic Navigate On Runtime

34 views Asked by At

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.

0

There are 0 answers