I'm doing Expo React Native Application using Firestore Database. I'm following the below Tutorial. Tutorial

    function ViewServices  () {
   
 
    const navigation =useNavigation();
    const [FullData, setFullData] = useState([]);
    const [driverData, setDriverData] = useState([]);

    // Retrieving Data 
    useEffect(() => { 
     
    firebase.firestore().collection('driver')
    .get()
    .then(snapshot => {
          if (snapshot.empty) {
          console.log('Empty');
          return;
          }
          snapshot.forEach(doc => {
            driverData.push(
              {                           
              id: doc.id,        
            });          
         });
         {      
              driverData? driverData.map((point) => (
              firebase.firestore().collection('driver')
              .doc(point.id)
              .collection('personal')
              .get()
              .then(snapshot => {
                  if (snapshot.empty) {
                  alert('Nothing To Show');
                  return;
                  }
                  snapshot.forEach(doc => {
                    FullData.push(
                      {  
                       id : doc.id,                       
                       name: (doc.data().firstname),
                       school: (doc.data().lastname),                                     
                      });          
                  }); 
                  setFullData(FullData);
                       
                })   
              .catch(err => {
                  console.log('Error getting documents', err);
              })        
              ))
          : null}               
        })   
      .catch(err => {
          console.log('Error getting documents', err);
      });
     }, []);
     
      return(          
     <FlatList
      data={FullData}
      renderItem={({ item }) => (
        <View style={{ height: 50, flex: 1, alignItems: 'center', 
          justifyContent: 'center' }}>
          <Text>User ID: {item.id}</Text>
          <Text>User Name: {item.name}</Text>
        </View>
      )}
    />
    )}

However the data are retrieved fine. But the lists are only shown when I manually press Refresh (Ctrl S)

How can I retrieve the lists when the screen loads? Please let me know.

CodePudding user response：

I found a solution.

The problem happened because the components are firstly rendered before the data fetching. That's why it required manual refresh.

I have added Activity Indicator component and it will be loaded until the data fetched. After the data successfully fetched, activity indicator will be replaced with flat list component.

function ViewServices  () {

**const [loading, setLoading] = useState(true)**
const navigation =useNavigation();
const [FullData, setFullData] = useState([]);
const [driverData, setDriverData] = useState([]);

// Retrieving Data 
useEffect(() => { 
 
firebase.firestore().collection('driver')
.get()
.then(snapshot => {
      if (snapshot.empty) {
      console.log('Empty');
      return;
      }
      snapshot.forEach(doc => {
        driverData.push(
          {                           
          id: doc.id,        
        });          
     });
     {      
          driverData? driverData.map((point) => (
          firebase.firestore().collection('driver')
          .doc(point.id)
          .collection('personal')
          .get()
          .then(snapshot => {
              if (snapshot.empty) {
              alert('Nothing To Show');
              return;
              }
              snapshot.forEach(doc => {
                FullData.push(
                  {  
                   id : doc.id,                       
                   name: (doc.data().firstname),
                   school: (doc.data().lastname),                                     
                  });          
              }); 
              setFullData(FullData);
              **setLoading(false);** 
                   
            })   
          .catch(err => {
              console.log('Error getting documents', err);
          })        
          ))
      : null}               
    })   
  .catch(err => {
      console.log('Error getting documents', err);
  });
 }, []);

**if (loading) { 
return (
<ActivityIndicator  size="large" color="#00ff00" justifyContent= "center"/>
)
}**

else{

  return(          
 <FlatList
  data={FullData}
  renderItem={({ item }) => (
    <View style={{ height: 50, flex: 1, alignItems: 'center', 
      justifyContent: 'center' }}>
      <Text>User ID: {item.id}</Text>
      <Text>User Name: {item.name}</Text>
    </View>
  )}
/>
)
}   
}