在本机反应中将功能从一个屏幕传递到另一个屏幕

Question

Im trying to pass a function handleNewFavourite (which updates my favouriteList state array) from my HomeScreen to my DetailsScreen via navigation params but Im getting the following error: Non-serializable values were found in the navigation state

How should I pass functions that modified the state between different stack screens?

HomeScreen code:

 <FlatList data={checkCategory()} renderItem={({item}) => ( <TouchableOpacity onPress={() => navigation.navigate('Details', { item, handleNewFavourite, }) }> <LessonCard lesson={item} /> </TouchableOpacity> )} />

DetailScreen code:

 const LessonDetails = ({lesson, handleNewFavourite}: LessonProps) => { const [favourite, setFavourite] = useState<boolean>(lesson.favourite); return ( <LessonDetailsContainer> <LessonDetailsInfoContainer> <LessonDetailsCategoryHead> <LessonDetailsCategory>{lesson.category}</LessonDetailsCategory> <TouchableOpacity onPress={() => { setFavourite(!favourite); handleNewFavourite(lesson); }}> <LessonDetailsFavouriteIcon> {favourite ? '❤️' : '🤍'} </LessonDetailsFavouriteIcon> </TouchableOpacity> </LessonDetailsCategoryHead> <LessonDetailsTitle>{lesson.title}</LessonDetailsTitle> <LessonDetailsAuthor>{lesson?.author}</LessonDetailsAuthor> </LessonDetailsInfoContainer> <LessonDetailsCardImage source={{ uri: lesson.image, }} /> <LessonDetailsContentContainer> <LessonDetailsDescriptionText> {lesson.content} </LessonDetailsDescriptionText> </LessonDetailsContentContainer> </LessonDetailsContainer> ); }; export default LessonDetails;

Answer 1

For situation like this, you should learn global state management. ( Context API - Redux etc. )

Answer 2

I think you are disrupting in the wrong way the parameters passed to DetailScreen it should be something like this:

const LessonDetails = ({route}: LessonProps) => {
      const {lesson, handleNewFavourite} = route.params;
// The rest of your component here
}

As the documentation here suggested. But as @omerfarukose mentioned is not a bad idea to use state management in this particular scenario