why firebase data is not display on screen by using flatlist in react native

Question

but when i display data by using console.log it display properly import React,{useState,useEffect,Component} from 'react'; import {StyleSheet,View,Text,TextInput,TouchableOpacity, Button, FlatList} from 'react-native'; import { DataTable } from 'react-native-paper'; import {fire} from '../config/fire'; import { ListItem, SearchBar } from 'react-native-elements'; function Donorlist(){ const[Donors,setDonors]=useState([]); const fetchDonors=async()=>{ const response=fire.firebase_.firestore().collection('Donors'); const data=await response.get(); data.docs.forEach(item=>{ setDonors([...Donors,item.data()]); //console.log("hI I AM IN DONORS FETCH LIST"); })

}
useEffect(()=>{
    fetchDonors();
    
},[])
return (
    <View>
      <FlatList
      data={Donors}
      renderItem={({item})=>(
        console.log(item.name),
        <Text>
        {item.name}
      </Text>      )}/>

            
      {
             
            
           /*
             Donors.map((Donor,index)=>{
          return(
               console.log(Donor),
            <View className="blog-container">
             <Text>Donor List</Text>
             
            <DataTable>
<DataTable.Header>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }} >Name</DataTable.Title>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }}  >Email</DataTable.Title>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }}  >Phone</DataTable.Title>
      <DataTable.Title
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }}  >Country</DataTable.Title>
      <DataTable.Title 
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }} >State</DataTable.Title>
      <DataTable.Title >City</DataTable.Title>
      <DataTable.Title 
      style={{
        width: 100, height: 100, backgroundColor: 'powderblue'
      }} >Pin</DataTable.Title>     
    </DataTable.Header>
     <DataTable.Row>
    <DataTable.Cell ><Text>{Donor.name}</Text></DataTable.Cell>
      <DataTable.Cell >{Donor.email}</DataTable.Cell>
      <DataTable.Cell >{Donor.phone}</DataTable.Cell>
      <DataTable.Cell >{Donor.name}</DataTable.Cell>
      <DataTable.Cell >{Donor.email}</DataTable.Cell>
      <DataTable.Cell >{Donor.phone}</DataTable.Cell>
      <DataTable.Cell >{Donor.phone}</DataTable.Cell>

      
     </DataTable.Row> 
    
    <DataTable.Pagination
      page={1}
      numberOfPages={3}

      onPageChange={page => {
        console.log(page);
      }}
      label="1-2 of 6"
    />


</DataTable>
<View>
  <Text>List Data</Text>
<Text>{Donors.name}</Text>
  </View>

</View>
      
      )
        })*/
      }
      

    </View>
  );
}
export default Donorlist;

Answer 1

some reasons

1)your text component in render item not bounded any view try this <View> <Text>{item.name}</Text> </View>

2. keyExtractor={item=>item.key} add this in flatlist in which key is string value which is unique in your data like id or something

this is my code which may be help you

const itembuilder=({item,index})=>

{

 return(

   <View
        style={{
        margin:10,borderRadius:20,shadowOpacity:0.5,
        shadowOffset:{height:-15,width:15},
        shadowColor:'#FFF8DC'
        ,justifyContent:'center',shadowRadius:25,elevation:15,
        height:200,
        marginBottom:20,
        backgroundColor:'white'}}>
        
       <Text>{item.name}</Text>

       </View>
        
    )
}
 <FlatList
    
    
    style={{height:500}}
    data={product}
    keyExtractor={item=>item.key}
    renderItem={itembuilder}
    >

    </FlatList>

Answer 2

add console.log(item) in itembuilder so you can see data is coming or not

Answer 3

   const itembuilder=({item,index})=>

{

  console.log(item)//will provide data comes in each array object
 return(

   <View
        style={{
        margin:10,borderRadius:20,shadowOpacity:0.5,
        shadowOffset:{height:-15,width:15},
        shadowColor:'#FFF8DC'
        ,justifyContent:'center',shadowRadius:25,elevation:15,
        height:200,
        marginBottom:20,
        backgroundColor:'white'}}>
        
       <Text>{item.name}</Text>
        <Text>{item.email}</Text>//data inside each array object
         <Text>{item.phone}</Text>    
       </View>
        
    )
}
 <FlatList
    
    
    style={{height:500}}
    data={product}
    keyExtractor={item=>item.key}
    renderItem={itembuilder}
    >

    </FlatList>

Answer 4

Try this method for fetching Donors

const fetchDonors = async () => { 
  const response = await firebase.firestore().collection('Donors').get(); 
  const data = response.docs.map(doc => doc.data());)
  setDonors(prev => [...prev,...data];
}