react-navigation ver6.0 shows an error when using navigation.navigate

Question

What I'm facing

When I'm using navigation.navigate('XXXPage'), react-navigation ver 6.0 shows the following error.

Argument of type 'string' 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 I did

I created the following file to declare interface RoomParamList.

• navigation.d.ts

import { CompositeScreenProps } from "@react-navigation/native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";

import { MainStackParamList } from "./MainNavigator";
import { SettingsStackParamList } from "./SettingsNavigator";

type RootNavigationProps = CompositeScreenProps<
  NativeStackScreenProps<MainStackParamList>,
  NativeStackScreenProps<SettingsStackParamList>
>;

declare global {
  namespace ReactNavigation {
    interface RoomParamList extends RootNavigationProps {}
  }
}

These are MainNavigator and SettingsNavigator.

• MainNavigator

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { MainPage } from "./main-navigator/MainPage";
import { SettingsNavigator } from "./SettingsNavigator";

export type MainStackParamList = {
  MainPage: undefined;
  SettingsPage: undefined;
};

const Stack = createNativeStackNavigator<MainStackParamList>();

export const MainNavigator = () => {
  return (
    <>
      <Stack.Navigator>
        <Stack.Screen
          name="MainPage"
          component={MainPage}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="SettingsPage"
          component={SettingsNavigator}
          options={{
            presentation: "transparentModal",
            headerShown: false,
          }}
        />
      </Stack.Navigator>
    </>
  );
};

• SettingsNavigator

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { SettingsPage } from "./settings-navigator/SettingPage";
import { SettingsEmailPage } from "./settings-navigator/SettingsEmailPage";
import { SettingsPasswordPage } from "./settings-navigator/SettingsPasswordPage";
import { SettingsUserAvatarPage } from "./settings-navigator/SettingsUserAvatarPage";
import { SettingsUsernamePage } from "./settings-navigator/SettingsUsernamePage";
import { DeleteAccountPage } from "./settings-navigator/DeleteAccountPage";

export type SettingsStackParamList = {
  SettingsPage: undefined;
  SettingsEmailPage: undefined;
  SettingsPasswordPage: undefined;
  SettingsBirthdayPage: undefined;
  SettingsProfilePage: undefined;
  SettingsUserAvatarPage: undefined;
  SettingsUsernamePage: undefined;
  DeleteAccountPage: undefined;
};

const Stack = createNativeStackNavigator<SettingsStackParamList>();

export const SettingsNavigator = () => {
  return (
    <>
      <Stack.Navigator
        initialRouteName={"SettingsPage"}
        screenOptions={{
          headerShown: true,
          headerLargeTitleShadowVisible: false,
          headerTransparent: true,
        }}>
        <Stack.Screen
          name="SettingsPage"
          component={SettingsPage}
          options={{
            headerShown: true,
            headerShadowVisible: false,
            headerTitle: "",
            headerLargeTitleShadowVisible: false,
            headerTransparent: true,
            contentStyle: {
              borderTopRightRadius: 12,
              borderTopLeftRadius: 12,
            },
          }}
        />
        <Stack.Screen
          name="SettingsUserAvatarPage"
          component={SettingsUserAvatarPage}
        />
        <Stack.Screen
          name="SettingsUsernamePage"
          component={SettingsUsernamePage}
        />
        <Stack.Screen name="SettingsEmailPage" component={SettingsEmailPage} />
        <Stack.Screen
          name="SettingsPasswordPage"
          component={SettingsPasswordPage}
        />
        <Stack.Screen name="DeleteAccountPage" component={DeleteAccountPage} />
      </Stack.Navigator>
    </>
  );
};

Technologies

• TypeScript(4.4.4)
• React(17.0.2)
• React Native(0.66.4)
• react navigation(6)

Answer 1

I had the same problem,I don´t why! It was working fine, then, suddenly the warning appeared!

You can solve that error/warning this way...

FIST STEP On your routes, just create and export a interface with your route names.

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

import { SignIn } from '../pages/SignIn'
import { SignUp } from '../pages/SignUp'


export type RootStackParamList = {
  SignIn: undefined
  SignUp: undefined
}

const { Navigator, Screen } = createNativeStackNavigator<RootStackParamList>()

export const AuthRoutes: React.FC = () => (
  <Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Screen name="SignIn" component={SignIn} />
    <Screen name="SignUp" component={SignUp} />
  </Navigator>

SECOND STEP Create in your src folder, another folder and name it @types. Here you are going to put some files to solve type problems.

Inside the @types, create anew file, and name it "navigation.d.ts" and past that code on it.

import { RootStackParamList } from '../routes/auth.routes'

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

After that, just user your navigation.navigate as you did.

 <Styles.CreateAccountButton
          onPress={() => navigation.navigate('SignUp')}>
          <Icon name="log-in" size={20} color="#159957" />
          <Styles.CreateAccountButtonText>
            Criar uma conta
          </Styles.CreateAccountButtonText>
        </Styles.CreateAccountButton>

THIRD STEP There is no third step! just relax and enjoy, the warnnig is gone!