`navigate` method type error

[thormengkheang]

Current behavior

I got type error while I write my custom navigateTo function.

function HomeScreen() {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();

  function navigateTo(
    screen: keyof RootStackParamList,
    params?: RootStackParamList[keyof RootStackParamList],
  ) {
    navigation.navigate(screen, params);
  }

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
    </View>
  );
}

import React from 'react';
import {Text, View} from 'react-native';
import {
  createStackNavigator,
  StackNavigationProp,
} from '@react-navigation/stack';
import {
  NavigationContainer,
  RouteProp,
  useNavigation,
  useRoute,
} from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();

  function navigateTo(
    screen: keyof RootStackParamList,
    params?: RootStackParamList[keyof RootStackParamList],
  ) {
    navigation.navigate(screen, params);
  }

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen() {
  const route = useRoute<RouteProp<RootStackParamList, 'Details'>>();
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Details Screen {route?.params?.userId}</Text>
    </View>
  );
}

type RootStackParamList = {
  Home: undefined;
  Details: {userId: string};
};

const Stack = createStackNavigator<RootStackParamList>();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Expected behavior

Should not have type error because with v5 the type is correct.

Reproduction

https://github.com/thormengkheang/TestRN

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/​bottom-tabs
• @react-navigation/​drawer
• @react-navigation/​material-bottom-tabs
• @react-navigation/​material-top-tabs
• @react-navigation/​stack
• @react-navigation/​native-stack
• react-native-tab-view
• flipper-plugin-react-navigation

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	^6.0.14
@react-navigation/stack	^6.3.5
react-native-safe-area-context	^3.4.1
react-native-screens	^3.1.0
react-native	0.69.5
yarn	1.22.19

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-tab-view
• flipper-plugin-react-navigation

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[AlekseyP18]

Also have the same issue.
When I provide a screenName through a function param, I get the same behaviour

[HER0PLAY]

@thormengkheang @AlekseyP18 did you guys get any solution?

[satya164]

#11982 (comment)

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.