In my Applikation I render a Expo FlatList to show created Events.
If the user has created or joined this event, he should be able to see the images. If not, they should be hidden.
I would now store the creator and the guests in the database and would have to compare this with the currentUser from the Firebase Auth beforehand.
However, I face the problem that I can’t tell the FlatList which items should be rendered and which shouldn’t.
Does anyone knows a solution for conditional render a FlatList?
Fullcode
import React, { Component } from 'react';
import { FlatList, Box, } from "native-base";
import { StyleSheet } from 'react-native'
import EventCard from "./EventCard.js";
import { collection, getDocs } from 'firebase/firestore';
import { firestore, auth } from '../firebase.js'
import { getStorage } from "firebase/storage"
export default class Events extends Component {
constructor(props) {
super(props);
this.currentUser = auth.currentUser
this.navigation = this.props.navigation
this.storage = getStorage()
this.querySnapshot = getDocs(collection(firestore, 'events'));
this.state = {
isLoading: true,
fetch: false,
eventData: {
adress: '',
hosts: '',
description: '',
eventtitle: '',
invitecode: '',
key: '',
timestamp: '',
owner: '',
}
}
}
componentDidMount() {
this.loadEventsFromFirebase()
}
// reload on pull down
onRefresh() {
this.setState({
fetch: true
});
this.loadEventsFromFirebase()
}
loadEventsFromFirebase() {
let data = []
this.querySnapshot.then(querySnapshot => {
querySnapshot.docs.map(doc => {
data.push(doc.data())
})
this.setState({
eventData: data,
fetch: false,
});
});
}
render() {
return (
<Box style={styles.container} _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }}>
<FlatList
showsVerticalScrollIndicator={false}
onRefresh={() => this.onRefresh()}
refreshing={this.state.fetch}
data={this.state.eventData}
keyExtractor={item => item.key}
renderItem={({ item }) => (<EventCard key={Date.now()} eventData={item} />
)}
/>
</Box>
)
}
}
const styles = StyleSheet.create({
container: {
alignSelf: 'stretch',
alignItems: 'center'
},
})
