Question 34539 in React native Question posted in
The official React Native documentation can be found here.

No overload matches this call error: React Native Navigation

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>;
};
Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    If you want to go with the simpler and a bit hacker way.. just do this:

    navigation.navigate("YourRouteName" as never);
    Login or Signup to reply.
  3. 0

    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>>();
  //...
}
    Login or Signup to reply.
  4. 0

    This error usually occurs when you use a function incorrectly or miss input parameters. You need to check the syntax and make sure that all input parameters are passed in the correct data type.

    If the error occurs during navigation, check if you have registered all screens and routes correctly. If there are any issues, refer to the documentation of the routing library or review your source code to identify the specific error.

    If you are unable to resolve the issue on your own, seek help from the programming community.

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

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

const navigation = useNavigation<NativeStackNavigationProp<ParamListBase>>();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search