No overload matches this call error: React Native Navigation

Question

I'm pretty new to React Native and React Native Navigation. I'm getting an error stating:

    "message": "No overload matches this call.\n  Overload 1 of 2, '(...args: never): void', gave the following error.\n    Argument of type 'string' is not assignable to parameter of type 'never'.\n  Overload 2 of 2, '(options: never): void', gave the following error.\n    Argument of type 'string' is not assignable to parameter of type 'never'.",

in regards to 'Signup'. Previously, I wasn't getting this issue, and I can't seem to figure out why this is occurring. All of the examples that I've found don't pertain to problems with navigation. I tried adding <RootStackParamList> to navigation.navigate<RootStackParamList>('Conversation'), but that just caused another error, and adding it to useNavigation did nothing. I would really appreciate any help or advice on why I might be getting this issue. Thank you!

HomeScreen.tsx

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, FlatList, Alert } from 'react-native';
import { 
  Text, 
  TextInput, 
  Pressable, 
  ActivityIndicator, 
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { Text, View } from '../components/Themed';*/
import { useQuery, gql } from '@apollo/client';
import { RootStackParamList} from '../navigation/types';

export default function HomeScreen() {
  
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Pressable 
        onPress={() => {console.warn('navigate'); navigation.navigate('Signup')}} 
      >
        <Text 
            New here? Sign up
        </Text>
      </Pressable>   
    </View>
  );
}
);

types.tsx

import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';

export type RootStackParamList = {
  Home: undefined;
  Conversation: undefined;
  Login: undefined;
  Signup: undefined;
  NotFound: undefined;
  Splash: undefined;
};

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

Answer 1

When using native-stack, usage will look like this:

import {ParamListBase, useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';

const Component = () => {
  const navigation = useNavigation<NativeStackNavigationProp<ParamListBase>>();
  //...
}

Answer 2

The error you're seeing is at the Typescript level, so it won't prevent you from using the navigator. It tells you that the navigator isn't typed, so it's not expecting to navigate anywhere.

You can change the useNavigation call to look like this:

const { navigate } = useNavigation<StackNavigationProp<RootStackParamList>>();

and react-navigation will get the route names from your param list.