React Navigation Error - TypeScript - This Expression Is Not Callable

Question

I'm trying to find the best practice for this typescript issue I'm experiencing when I upgraded to React Navigation 5. The error I'm getting is

This expression is not callable.
  Each member of the union type '{ <RouteName extends "Stack1Screen1" | "Home">(...args: 
undefined extends SampleParamList1[RouteName] ? [RouteName] | [RouteName, 
SampleParamList1[RouteName]] : [...]): void; <RouteName extends "Stack1Screen1" | 
"Home">(route: { ...; } | { ...; }): void; } | { ...; }' has signatures, but none of those 
signatures are compatible with each other.ts(2349)

Here is the code I'm essentially using:

import { StackScreenProps } from '@react-navigation/stack';

export type SampleParamList1 = {
  Stack1Screen1: undefined;
  Home: undefined;
};
export type SampleParamList2 = {
  Stack2Screen2: undefined;
  Home: undefined;
};

type Props =
  | StackScreenProps<SampleParamList1, 'Stack1Screen1'>
  | StackScreenProps<SampleParamList2, 'Stack2Screen2'>;

const ThisScreen: React.FC<Props> = ({ navigation, route }) => {
  const navToHome = () => navigation.navigate('Home');
};

Hovering over the navigation.navigate('Home') function displays the error message. Any ideas on how to solve this? Thanks! :)

What is the sense of using two separate types to describe screen props in navigation stack? Why you can't simply merge into one? — Николай Гольцев
– Николай Гольцев, Commented Oct 29, 2020 at 16:01

anthony willis muñoz · Accepted Answer · 2020-10-29 15:26:55Z

I used something like this.

export type RandomParamList = {
    ScreenRandom1: undefined;
    ScreenRandom2: undefined | { screen: string }; // arguments
    ScreenRandom3: undefined | { screen?: string, params: { param1: string } };
} ;
export type HomeParamList = {
    HomeScreen1: undefined;
    HomeScreen2: undefined | { screen: string };
    HomeScreen3: undefined | { screen?: string, params: { param1: string } };
    HomeScreen4: undefined;
    HomeScreen5: undefined | { screen: string };
} & RandomParamList;

export type HomeNavProps<T extends keyof HomeParamList> = {
    navigation: StackNavigationProp<HomeParamList, T>;
    route: RouteProp<HomeParamList, T>;
};

const ThisScreen: React.FC<HomeNavProps> = ({ navigation, route }) => {
  const navToHome = () => navigation.navigate('HomeScreen1');
const navToHome = () => navigation.navigate('Home'); // you will get error that Home is not allowed
};

Collectives™ on Stack Overflow

React Navigation Error - TypeScript - This Expression Is Not Callable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related