Skip to content
Advertisement

FlatList conditional rendering if {user === owner || gues}

In my Applikation I render a Expo FlatList to show created Events.

List Preview

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,
        });
    });

}
Advertisement