Having trouble adding a param with TypeScript and encountering the following error:
Error: Argument of type '["Profile", { screen: Screen; }]' is not assignable to parameter of type '[screen: "Explore"] | [screen: "Explore", params: any]'.
Type '["Profile", { screen: Screen; }]' is not assignable to type '[screen: "Explore", params: any]'.
Type at position 0 in source is not compatible with type at position 0 in target.
Type '"Profile"' is not assignable to type '"Explore"'.ts(2345)
Any suggestions on how to resolve this issue?
The error seems to be occurring at line : "navigation.navigate("Profile", { params });" within the Explore file.
Explore
import { useNavigation } from '@react-navigation/core';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import React from 'react';
import { StyleSheet, Text, View, Pressable, ScrollView } from 'react-native';
import { RootStackParams } from '../../App';
import Card from '../components/Card';
type PropNav = NativeStackScreenProps<RootStackParams, 'Explore'>;
const Explore = ({ navigation }: PropNav) => {
console.log(navigation);
const handleNavigate = (params: string) => {
navigation.navigate('Profile', { params });
};
return (
<View>
<ScrollView>
<Card name="Zum Profil" onPress={(params) => handleNavigate(params)} />
</ScrollView>
</View>
)
};
export default Explore;
Card
import React from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';
type Props = {
name: string,
onPress: (params: string) => void
}
const Card = ({ name, onPress }: Props) => {
return (
<View>
<Pressable onPress={() => onPress('Sushi')}>
<Text>{ name }</Text>
</Pressable>
</View>
)
};
export default Card;
....................................................................................................................................................................................................