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' }, })
Advertisement
Answer
You can filter the events data before setting it to the state
I am assuming, events have a owner
property which is the userId, it has an array of userIds in guests
property
loadEventsFromFirebase() { let data = [] this.querySnapshot.then(querySnapshot => { querySnapshot.docs.map(doc => { data.push(doc.data()) }) const allowedData = data.filter(d=> (d.owner == this.currentUser) || d.guests.includes(this.currentUser)); this.setState({ eventData: allowedData, fetch: false, }); }); }