I want to add param with typescript but I got this following 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)
How can I solve it ?
The error is on line : "navigation.navigate("Profile", { params });" at 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;
....................................................................................................................................................................................................
CodePudding user response:
Make sure that you added Profile
in RootStackParams
:
export type RootStackParams = {
Profile: {
screen: Screen;
};
Explore: undefined
}