navigation.navigate('Home') showing some error in typescript

user_16471715 0
Viewed 17376

When I use useNavigation or from props { navigation } for navigate between screen using navigation.navigate('Home') the typescript return error Argument of type '"Main"' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: never; key?: string | undefined; params: never; merge?: boolean | undefined; }' what does it mean?

below is my code:

import React from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';

const Home: React.FC = () => {
  const navigation = useNavigation();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button onPress={() => navigation.navigate('Main')}>Navigate</Button>
    </View>
  );
};

export default React.memo(Home);

previously i used react navigation v5 and working find with that method

thanks for your help

react-navigation react-native
6 Answers

Maybe you want to do something like this:

export type RootStackParamList = {
  Main: undefined;
  Home: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();

export const RootNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="Main">
      <Stack.Screen
        name="Main"
        component={Main}
      />
      <Stack.Screen
        name="Home"
        component={Home}
      />
    </Stack.Navigator>
  );
};

then in your code to do something like this:

type homeScreenProp = StackNavigationProp<RootStackParamList, 'Home'>;

const Home: React.FC = () => {
  const navigation = useNavigation<homeScreenProp>();

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button onPress={() => navigation.navigate('Main')}>Navigate</Button>
    </View>
  );
};
user_115884670

This is because you must specify this type, as this will ensure type-safety.

Solution:

1 - Type checking the navigator

// root.routes.tsx    

import { createStackNavigator } from '@react-navigation/stack';
    
export type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Feed: { sort: 'latest' | 'top' } | undefined;
};
    
const RootStack = createStackNavigator<RootStackParamList>();

2 - Specify a global type for your root navigator

// navigation.d.ts

import { RootStackParamList } from '../routes/root.routes';

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

3 - Use it!

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

const navigation = useNavigation();

navigation.navigate('Home');

Refs:

user_140418400

I solved this problem, it's simple:

type Nav = {
  navigate: (value: string) => void;
}

const { navigate } = useNavigation<Nav>()

function foo() {
  navigate("Home")
}
user_164493090

While the other answers cover a good amount, I think I may add to this by describing usage in the useNavigation hook as well as passing the {navigation} through props to a screen.

First, setup the Stack Navigator:

/**
* Types for Stack Navigator.
*/
export type StackParamList = {
  Main: undefined;
  Home: undefined;
};

const Stack = createStackNavigator<StackParamList>();
  • When using the useNavigation hook:
import { StackNavigationProp } from "@react-navigation/stack";

/**
 * Types for the Stack Navigator.
 */
export type StackNavigation = StackNavigationProp<StackParamList>;

const navigation = useNavigation<StackNavigation>();
  • When passing the navigation down as a prop in a screen:
/**
 * Types for passing the navigation props to screens in the Bottom Tab Navigator.
*/
export type StackNavigationProps = {
  navigation: StackNavigation;
};

const SomeScreenInTheStack = ({ navigation }: StackNavigationProps) => {
...
}

Hope this is useful to someone!

user_107966800

For more details, you can refer this article.

user_86591160

You can just put a Type on the screen name. Just like:

const handleContinue = () => navigation.navigate('Login' as never);
user_183099520
Related