Having an issue rendering flatlist from firestore data?

Question

I am having an issue of rendering "following" posts of a user on my app.

Basically, first I get the current user posts, and all the users they are following posts, using this, then sort the array by date created:

getCollection = async (querySnapshot) => {
    const followingPosts = [];


    await Firebase.firestore()
    .collection('globalPosts')
    .where("uid", "==", Firebase.auth().currentUser.uid)
    .onSnapshot(function(query) {
        query.forEach((doc) =>  {
            const { 
                ..fields
                } = doc.data();
    
                followingPosts.push({
                    key: doc.id,
                    ..fields
                });

            console.log(followingPosts)
        })
    
    });

    querySnapshot.forEach(async (res) => {
        await Firebase.firestore()
        .collection('globalPosts')
        .where("uid", "==", res.data().uid)
        .onSnapshot(function(query) {
            query.forEach((doc) =>  {
                const { 
                    ..fields
                    } = doc.data();

        
                    followingPosts.push({
                        key: doc.id,
                        ..fields
                    });


                    console.log(followingPosts)
                
            })

            followingPosts.sort(function(a,b){ 

                return b.date_created.toDate() - a.date_created.toDate()
        
            })
        
        });

    });

    this.setState({
        followingPosts,
        isLoading: false, 
    });

And render using this:

 if(this.state.isLoading){
        return(
            <View style={styles.emptyContainer}>
                <ActivityIndicator size="large" color="#9E9E9E"/>
            </View>
        )
    }    

    if (this.state.followingPosts.length == 0) {
        return(
            <View style={styles.emptyContainer}>

                <Text style = {styles.buttonText}>follow people or post!</Text>
                <TouchableOpacity  
                style = {styles.button} 
                onPress={() => this.onShare()} >
                    <Text style = {styles.buttonText}>invite friends to follow</Text>
                </TouchableOpacity>

                
                <TouchableOpacity 
                    style = {styles.button} 
                 onPress={() => this.props.navigation.navigate('Create')} >
                    <Text style = {styles.buttonText}>post something!</Text>
                </TouchableOpacity>
                
            </View>
        )
    }

    return (
        <View style={styles.view}>
            <FlatList
                data={this.state.followingPosts}
                renderItem={renderItem}
                keyExtractor={item => item.key}
                contentContainerStyle={{ paddingBottom: 50 }}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
                onRefresh={this._refresh}
                refreshing={this.state.isLoading}
            />
        </View>   
    )

The problem is, I have a post!

I have a console.log(followingPosts) which shows me the array is not empty, but the posts are not showing up. I have this, in case the user has no posts:

if (this.state.followingPosts.length == 0) {
        return(
            <View style={styles.emptyContainer}>

                <Text style = {styles.buttonText}>follow people or post!</Text>
                <TouchableOpacity  
                style = {styles.button} 
                onPress={() => this.onShare()} >
                    <Text style = {styles.buttonText}>invite friends to follow</Text>
                </TouchableOpacity>

                
                <TouchableOpacity 
                    style = {styles.button} 
                 onPress={() => this.props.navigation.navigate('Create')} >
                    <Text style = {styles.buttonText}>post something!</Text>
                </TouchableOpacity>
                
            </View>
        )
    }

Which renders this:

But this should not be rendering, because the current user has posts, the followingPosts array length should NOT be zero!

I added console.log(this.state.followingPosts.length) in my "getCollection()" after I set state, and the length says zero, but it is PRINTING OUT THE POST WHICH JUST GOT ADDED TO THE ARRAY!

What is my issue?

Answer 1

THIS WAS ONE ISSUE, BUT CAUSES A CRASH IN MY APPLICATION WHEN A USER POSTS A NEW POST!

Still looking for a solution to that

The issue was where I was setting my state. Changing the query to this solved the issue:

 querySnapshot.forEach(async (res) => {
        await Firebase.firestore()
        .collection('globalPosts')
        .where("uid", "==", res.data().uid)
        .onSnapshot(function(query) {
            query.forEach((doc) =>  {
                const { 
                    ..Fields
                    } = doc.data();

        
                    followingPosts.push({
                        key: doc.id,
                        ..Fields
                    });


                
            })

            followingPosts.sort(function(a,b){ 

                return b.date_created.toDate() - a.date_created.toDate()
        
            })
        
        });

    });

    await Firebase.firestore()
    .collection('globalPosts')
    .where("uid", "==", Firebase.auth().currentUser.uid)
    .onSnapshot(function(query) {
        query.forEach((doc) =>  {
            const { 
                ..Fields
                } = doc.data();
    
                followingPosts.push({
                    key: doc.id,
                    ..Fields
                });

            console.log(followingPosts)
        })

        this.setState({
            followingPosts,
            isLoading: false, 
        })
    
    }.bind(this))

I added setting state to the query snapshot, instead of outside