I am getting some type errors in the routing implementation when transforming javascript to typescript. I checked the docs and follow the instructions, but not getting rid of the errors related to navigation.
My basic structure is the following:
App.tsx
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './Screens/HomeScreen';
import {StudentInfoProps} from './types/StudentInfo';
export default function App(props: StudentInfoProps): React.JSX.Element {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="ReactNative">
<Stack.Screen
name="ReactNative"
component={HomeScreen} // Error 1
initialParams={{studentList: props.studentList}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
In the above, I am getting error in the component inside Stack.Screen component:
Type '({ route }: Props) => Element' is not assignable to type 'ScreenComponentType<ParamListBase, "ReactNative"> | undefined'.
Type '({ route }: Props) => Element' is not assignable to type 'FunctionComponent<{}>'
In the HomeScreen.tsx I am getting another error when passign the value of studentList to StudentsScreen:
import React, {useState} from 'react';
import {View, Text, StyleSheet, Pressable} from 'react-native';
import type {NativeStackScreenProps} from '@react-navigation/native-stack';
import StudentsScreen from './StudentsScreen';
import {StudentInfoProps} from '../types/studentInfo';
type RootStackParamList = {
ReactNative: {studentList: StudentInfoProps};
};
type Props = NativeStackScreenProps<RootStackParamList, 'ReactNative'>;
export default function HomeScreen({route}: Props): React.JSX.Element {
const [isPressed, setIsPressed] = useState<boolean>(false);
const {studentList} = route.params;
return (
<View>
<View>
<Text>React Native</Text>
</View>
<View>
<Pressable
style={styles.button}
onPress={() => {
setIsPressed(true);
}}>
<Text> Check student List</Text>
</Pressable>
</View>
<View>
{isPressed && <StudentsScreen studentList={studentList} //Error thrown />}
</View>
</View>
);
}
studentList is getting an error:
Type 'StudentInfoProps' is missing the following properties from type 'StudentInfo[]': length, pop, push, concat, and 29 more.ts(2740)
Here is my StudentInfo type:
StudentInfo.tsx:
export type StudentInfo = {
name: string;
course: string;
};
export type StudentInfoProps = {
studentList: StudentInfo[];
};