Render component from array values in React Native - arrays

Question

I'm trying to render component/function from array values.
Main function
const GeneratedHistory = () => {
return (
<View style={styles.container}>
<View style={styles.headerWrapper}>
<Text variant="headlineLarge" style={styles.headersText}>Historia</Text>
<Text variant='labelMedium'>Generowane kody</Text>
</View>
<View style={styles.mainWrapper}>
<ScrollView>
{getItems()}
</ScrollView>
</View>
</View>
I retrieving values from Firestore and saves what i want to array named Items.
function getItems() {
const items = [];
try {
firebase.firestore().collection("Generated").where("username", "==", auth.currentUser.email)
.get().then((querySnapshot) => {
querySnapshot.forEach((doc) => {
items.push({
qrImage: doc.get("qrImage"),
qrText: doc.get("qrText"),
time: doc.get("time"),
})
});
items.map((item) => {
console.log(item.qrText)
})
});
} catch (error) {
alert('Error occured')
}
}
Nextly i map the array, printing to console and trying to render function named SingleElement.
function singleElement(text) {
return (
{text}
)
}
Logging to console work's fine, but i can't render the function.
Screen just stays white.

Answer 1

So, I have to use async function, in my case, I fetch the data when the window opens and save it to array.
useEffect(() => {
async function fetchData() {
todoRef
.onSnapshot(
querySnaphsot => {
const items = []
querySnaphsot.forEach((doc) => {
const { qrImage, qrText, time } = doc.data()
items.push({
id: doc.id,
qrImage,
qrText,
time,
})
setItems(items);
})
}
)
} fetchData()
}, [])
Then I map the elements and display them in the component.
items.map((item) => {
return <YourComponent key={item.id} text={item.qrText} time={item.time}>
</YourComponent>
})
}