Problem in rendering from firebase-React-Native - firebase

Question

I have this problem:
I have to render a FlatList mapping Firestore documents and I do like this:
componentDidMount();
{
const cat = [];
var db = firebase.firestore();
const ristoDoc = db.collection("ristoranti").where("telefono", "==", "3296812820");
ristoDoc.get().then((snapshot) => {
snapshot.forEach((doc) => {
this.setState({
id: doc.id,
});
});
});
db.collection("ristoranti")
.doc(this.state.id)
.collection("categorie")
.onSnapshot((querysnapshot) => {
querysnapshot.forEach((doc) => {
const data = doc.data();
this.setState({
nome: data,
});
cat.push(data);
});
this.setState({
categorie: cat,
});
});
}
And my FlatList:
<
FlatList horizontal = {
true
}
pagingEnabled = {
true
}
style = {
{
width: '100%',
height: '22%'
}
}
contentContainerStyle = {
{
height: '90%',
width: 100
}
}
data = {
this.state.categorie
}
renderItem = {
(item) =>
{
<View>
> <Text key={item.id}> {item.nome} </Text>
<View>
<TouchableOpacity onPress = {
() => this.setState(
{
visibileProdottoAdd: true
})
}>
<Text> + </Text> </TouchableOpacity> </View> </View>
But I have always the same error of the image []
I try all the day and nothing was changed I done a little error at item.name that a have curly braces in original code
Update
<FlatList
horizontal={true}
pagingEnabled={true}
style={{ width: "100%", height: "22%" }}
contentContainerStyle={{ height: "90%", width: 100 }}
data={this.state.categorie}
key={({ item }) => {
item.id;
}}
renderItem={({ item }) => {
<View
style={{
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
width: 200,
}}
>
<Text
key={item.id}
style={{
fontSize: 20,
color: "#C6C6C6",
marginBottom: 5,
width: "35%",
}}
>
{item.nome}
</Text>
<View
style={{
flexDirection: "row",
justifyContent: "flex-end",
alignItems: "center",
width: "60%",
}}
>
<TouchableOpacity
onPress={() =>
this.setState({ visibileProdottoAdd: true })
}
>
<Text style={{ fontSize: 20, color: "#66a3ff" }}>
+
</Text>
</TouchableOpacity>
</View>
</View>;
}}
></FlatList>
I edit my code in this version e nothing change, in componentdidmount function I try to test what was get from Firestore
componentDidMount() {
const cat = [];
var db = firebase.firestore();
const ristoDoc = db
.collection("ristoranti")
.where("telefono", "==", "3296812820");
ristoDoc.get().then((snapshot) => {
snapshot.forEach((doc) => {
this.setState({ id: doc.id });
});
});
db.collection("ristoranti")
.doc("qKEWUfZPsy2pu6IoFUio")
.collection("categorie")
.onSnapshot((querysnapshot) => {
querysnapshot.forEach((doc) => {
const data = doc.data();
this.setState({ nome: data });
cat.push(data);
cat.forEach(({i})=>{console.log(i.nome)})
});
this.setState({ categorie: cat });
});
The strange thing that it was an error on Expo Cli but in my Visual Studio console log i have my list of name.

Answer 1

You are doing a very simple mistake. I think Problem is in Render Item.
<FlatList
data={arr}
key={({ item }) => item}
onEndReached={({ index }) => handleLoadMore(index)}
renderItem={({item} ) => <RenderItem item={item} />}
/>
you are passing an item. you have to pass object {item}