typescript navigation navigate param error

Question

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;

....................................................................................................................................................................................................

Boubaker Kalfat · Accepted Answer · 2022-02-22 22:09:06Z

1

Make sure that you added Profile in RootStackParams:

export type RootStackParams = {
 Profile: {
  screen: Screen;
 };
 Explore: undefined
}

answered Feb 22, 2022 at 22:09

Boubaker Kalfat

656 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

typescript navigation navigate param error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related