How to render lists using React Native and Firestore - firebase

Question

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.

Answer 1

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>
)}
/>
)
}
}