Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Navigation - RootStackParamList is in error in VSCode

$
0
0

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;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>