how do i pass the data to the details screen? Am trying but it is giving me this error : invalid attempt to destructure non-iterable instance - react-native

Question

Home Screen:
import React from 'react';
import {View,Text, Image,StyleSheet,TouchableOpacity} from 'react-native';
import {useNavigation} from '#react-navigation/native';
export default function Books({item}){
const firstUrl= 'https://carp-kenya.herokuapp.com';
var secondUrl= String(item.imageFile) ;
var urls= String (firstUrl+secondUrl);
const navigation = useNavigation();
const{Title,description,File}=item;
return (
<View style={styles.container1}>
<TouchableOpacity onPress={()=>navigation.navigate('DetailsScreen',{file:File,Description: description,Title:Title})} >
<Image style={styles.image} source={{uri: urls}}/>
<View style={styles.view2}>
<Text style={styles.title}> {Title}</Text>
</View>
</TouchableOpacity>
</View>
)
}
Source screen:-
import React,{useEffect,useState,useCallback} from 'react';
import {View, TouchableOpacity, Text, StyleSheet, SafeAreaView, FlatList, ActivityIndicator, Alert, ScrollView} from 'react-native';
import Books from '../resources/bookSource';
import {useNavigation} from '#react-navigation/native'
export default function RegistrationScreen({item}){
const [isLoading, setLoading] = useState(false);
const [user, setUser] = useState([]);
const [cat, setCat] = useState([]);
const [text,setText]=useState("");
const [ref, setRef]= useState([])
const [refreshing, setRefreshing] = useState(false);
const navigation = useNavigation();
const ActionNav =()=>{searchData('action')}
const DramaNav =()=>{searchData('drama')}
const InspirationalNav =()=>{searchData('inspirational')}
const EducationalNav =()=>{searchData('educational')}
useEffect(()=>{
fetchData()
},[])
const fetchData = () => {
setLoading(true);
fetch('https://carp-kenya.herokuapp.com/book_json_format/')
.then((response) => response.json())
.then((json) =>{setUser(json),
(setCat(json)),
(setRef(json)) })
.catch(() => Alert.alert('Something went wrong..', 'There was an error.'))
.finally(() => {
setLoading(false)
});
}
const searchData = (text) => {
const newData = cat.filter((item) => {
const itemData = item.category.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setUser(newData);
setText(text);
}
const onRefresh = useCallback(() => {
setRefreshing(true);
fetch('https://carp-kenya.herokuapp.com/book_json_format/')
.then((response) => response.json())
.then((json) =>setUser(json))
.catch(() => Alert.alert('Something went wrong..', 'There was an error.'))
.finally(() => {
setRefreshing(false)
});
}, []);
return(
<SafeAreaView >
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
<View style={styles.container}>
<TouchableOpacity style={styles.category} onPress={InspirationalNav}>
<Text style={styles.text}>Inspirational</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.category} onPress={EducationalNav}>
<Text style={styles.text}>Educative</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.category} onPress={DramaNav} >
<Text style={styles.text}>Drama</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.category} onPress={ActionNav}>
<Text style={styles.text}>Action</Text>
</TouchableOpacity>
</View>
</ScrollView>
{isLoading ? <ActivityIndicator style={styles.containers}/> :
<FlatList
data={user}
showsHorizontalScrollIndicator={false}
keyExtractor={({ id }, index) => id}
renderItem={( {item }) => (<Books item={item} />)
}
numColumns={3}
onRefresh={()=>onRefresh()}
refreshing={refreshing}
/>
}
</SafeAreaView>
);

Answer 1

Invalid attempt to destructure non-iterable instance
says the instance you are trying to iterate is not iterable. What you should do is checking whether the opt object is iterable and can be accessed in the JSX code.
Check how you are passing params props to Books please check and log it