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;

Add extraData={Donors} props in your Flatlist and then check. — Kishan Bharda
when i print data on console screen by using console.log then it display data but in case of flatlist data not display why — Ganesh Hurgule

Mahendrasinh Gohil Mahendrasinh Gohil · Accepted Answer · 2021-05-20T10:41:04

some reasons

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

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>

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

1 Answers