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;