Having an issue rendering flatlist from firestore data?

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:

enter image description here

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?

17 thoughts on “Having an issue rendering flatlist from firestore data?”

Leave a Comment