I started an application managed by Expo and installed the navigation dependencies.
I chose to use Typescript and therefore followed the typing recommendations in the documentation. I attach to this request the 3 main files.
This application works fine, however, in 'Screen' files the call to 'RootStackParamList'is in error according to VSCode.
I therefore allow myself to post on Stack before sending a ticket to Microsoft. Is this error legitimate or do I need to initiate a ticket with Microsoft support to let them know?
Thank you in advance
App.tsx
import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';import HomeScreen from './src/screens/HomeScreen';import SettingsScreen from './src/screens/SettingsScreen';type RootStackParamList = { Home: undefined, Settings: undefined; };const Stack = createStackNavigator<RootStackParamList>();function App() { return (<NavigationContainer><Stack.Navigator initialRouteName="Home"><Stack.Screen name="Home" component={HomeScreen} options={{ title: "Accueil" }} /><Stack.Screen name="Settings" component={SettingsScreen} options={{ title: "Paramètres" }} /></Stack.Navigator></NavigationContainer> );}export default App;
./src/screens/HomeScreen.tsx
import * as React from 'react';import { StyleSheet, Text, View, Button } from 'react-native';import { StackNavigationProp } from '@react-navigation/stack';// #region typagetype ProfileScreenNavigationProp = StackNavigationProp< RootStackParamList, // VSCode Error: Cannot find name 'RootStackParamList''Home'>;type Props = { navigation: ProfileScreenNavigationProp;};//#endregionfunction HomeScreen({ navigation }: Props) { return (<View style={styles.container}><Text>Home Screen</Text><Button title="Paramètres" onPress={() => navigation.navigate('Settings')} /></View> );}const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, });export default HomeScreen;
./src/screens/SettingsScreen.tsx
import * as React from 'react';import { StyleSheet, Text, View } from 'react-native';import { StackNavigationProp } from '@react-navigation/stack';// #region typagetype ProfileScreenNavigationProp = StackNavigationProp< RootStackParamList, // VSCode Error: Cannot find name 'RootStackParamList''Home'>;type Props = { navigation: ProfileScreenNavigationProp;};//#endregionfunction SettingsScreen({ navigation }: Props) { return (<View style={styles.container}><Text>Settings Screen</Text></View> );}const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, });export default SettingsScreen;