React Native Flatlist not rendering but show ActivityIndicator - react-native

Question

My React Native Flatlist is not rendering. It does not show any error nor does the app crash. It just shows an ActivityIndicator
home.js
export default function Second({navigation}) {
const [loca, setLoca] = useState([]);
const Get = async () => {
const myDoc = collection(db, 'users');
const querySnapshot = await getDocs(myDoc);
querySnapshot.forEach(doc => {
console.log(doc.id, ' => ', doc.data());
setLoca({
id: doc.id,
fname: doc.data().fname,
});
console.log(loca);
});
};
const Logout = () => {
signOut(auth)
.then(() => {
// Sign-out successful.
console.log('log out');
navigation.navigate('Login');
})
.catch(error => {
// An error happened.
console.log(error);
});
};
useEffect(() => {
Get();
}, []);
const renderItemm = ({item}) => <Comp title={item.fname} />;
return (
<View style={styles.conn}>
<ImageBackground source={image} resizeMode="cover" style={{flex: 1}}>
<View style={{paddingHorizontal: 15}}>
<View style={styles.box}>
<View style={{justifyContent: 'space-between'}}>
<Text>HOME</Text>
<TouchableOpacity style={styles.box1} onPress={Logout}>
<Text>dd</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.box1}
onPress={() => navigation.navigate('Third')}></TouchableOpacity>
</View>
</View>
{loca.length > 0 ? (
<FlatList
data={loca}
renderItem={renderItemm}
keyExtractor={item => item.id}
/>
) : (
<ActivityIndicator />
)}
</View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
conn: {
//flexDirection: 'column',
flex: 1,
},
tt: {
color: 'white',
backgroundColor: '#4DA69B',
fontSize: 24,
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
},
box: {
marginTop: 10,
flexWrap: 'wrap',
flexDirection: 'row',
},
end: {
//justifyContent: 'space-between',
alignItems: 'flex-end',
marginBottom: 10,
},
box1: {
width: 48,
height: 48,
borderRadius: 24,
backgroundColor: '#67BE92',
marginTop: 10,
marginLeft: 10,
alignItems: 'flex-end',
},
boxxx: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
});
comp.js
const comp = (props) => {
return (
<View style={styles.conn}>
<View style={styles.box}>
<Text>{props.title}</Text>
</View>
</View>
);
};
export default comp;
const styles = StyleSheet.create({
conn: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
tt: {
color: 'white',
backgroundColor: '#4DA69B',
fontSize: 24,
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
},
box: {
flex: 1,
marginTop: 10,
borderRadius: 10,
width: '100%',
height: 115,
borderWidth: 1,
borderColor: '#67BE92',
backgroundColor: 'white',
flexDirection: 'row',
},
end: {
alignItems: 'flex-end',
marginBottom: 10,
},
box1: {
width: 48,
height: 48,
borderRadius: 24,
backgroundColor: '#67BE92',
marginTop: 10,
marginLeft: 10,
},
});
i dont slove this plobem it show ActivityIndicator not show flatlist I use my firebase data and console.lod(loca) show that data but flatlist not show
solve my flatlist and show in my project

Answer 1

The data passed to the FlatList should always be an array. So you should edit your code as follow:
const Get = async () => {
const myDoc = collection(db, 'users');
const querySnapshot = await getDocs(myDoc);
querySnapshot.forEach(doc => {
console.log(doc.id, ' => ', doc.data());
// I changed the below
setLoca([...loca, {
id: doc.id,
fname: doc.data().fname,
}]);
console.log(loca);
});
};
We are looping over querySnapshot, so this syntax "setLoca([...loca, {..}])" keeps the already saved data while looping.