React Native Firebase Firestore data fetching with empty spaces

Issue

I have created 3 documents in Firestore database, each document has different data.

but When I add different data on different document ids then I am getting blank spaces, and those spaces are generated automatically for other document ids which I already created previously.

Document 1 should be shown on First screen and document 2 should show on screen two. I mean each document's data should show on its own screen. please check the image link below-

First Screen



 import React, { useState, useEffect } from 'react';
    import {View, Button, Text, FlatList, StyleSheet, Pressable, TouchableOpacity} from 'react-native'
    import {firebase} from '../config';
    
    const Testing = ({ navigation }) =>{
      const [users, setUsers] = useState([]);
      const todoRef = firebase.firestore().collection('testing');
    
    
      useEffect(() => {
          todoRef.onSnapshot(
              querySnapshot => {
                  const users = []
                  querySnapshot.forEach((doc) => {
                      const {    One, Two, Three
                
                      } = doc.data()
                      users.push({
                          id: doc.id,
                          One, Two, Three
                        
                      })
                  })
                  setUsers(users)
              }
          )
      }, [])
    return (
    
       <View style={{ flex:1,}}>
       <FlatList 
      style={{height: '100%'}}
      data={users}
      numColumns={1}
      renderItem={({item}) => (
     <Pressable >
    <View style={styles.viewOne}>
      <View>
      <Text style={[styles.card, styles.title]}>{item.One}</Text>
    <Text style={styles.text}>{item.Two}</Text>
        <Text style={styles.text}>{item.Three}</Text>
    </View>
        </View>
         </Pressable>
    )} />
    </View>
    );}
    export default Testing;


*Second Screen*


import React, { useState, useEffect } from 'react';
import {View, Button, Text, FlatList, StyleSheet, Pressable, TouchableOpacity} from 'react-native'
import {firebase} from '../config';

const TestingDocs = ({ navigation }) =>{
  const [users, setUsers] = useState([]);
  const todoRef = firebase.firestore().collection('testing');


  useEffect(() => {
      todoRef.onSnapshot(
          querySnapshot => {
              const users = []
              querySnapshot.forEach((doc) => {
                  const {   DocsOne, DocsTwo, DocsThree, 
            
                  } = doc.data()
                  users.push({
                      id: doc.id,
                    DocsOne, DocsTwo, DocsThree, 
                    
                  })
              })
              setUsers(users)
          }
      )
  }, [])
return (

   <View style={{ flex:1,}}>
   <FlatList 
  style={{height: '100%'}}
  data={users}
  numColumns={1}
  renderItem={({item}) => (
 <Pressable >
<View style={styles.viewOne}>
  <View>
 <Text style={[styles.card, styles.title]}>{item.DocsOne}</Text>
<Text style={styles.text}>{item.DocsTwo}</Text>
    <Text style={styles.text}>{item.DocsThree}</Text>
</View>
    </View>
     </Pressable>
)} />
</View>
);}
export default TestingDocs;

Solution

You must have seen this Answer on your another Post :

It looks like you've incomplete or "optional" data in your backend. If you don't want to render empty fields you can conditionally render them.

For the users data that is missing both properties you can filter the data prop.

Example:

  <FlatList
      data={users.filter(({ One, five }) => One || five)}
      renderItem={({ item }) => (
        <View style={{ .... }}>
          {item.One && <Text>ID: {item.One}</Text>}
          {item.five && <Text>Name: {item.five}</Text>}
        </View>
      )}
    />

You can also refer to this Answer:

Its as a result of performance issues with the FlatList component but you can add the following props to your FlatList Component, it would help solve the problem. They are:
i. removeClippedSubviews. Set this to true, it comes with a default of false.
ii. windowSize. Set this to a number like say 30
iii. maxToRenderPerBatch. This controls the number of items rendered per batch, which is the next chunk of items rendered on every scroll.

<FlatList
            data={this.state.contacts}
            removeClippedSubviews={true}
            maxToRenderPerBatch={60}
            windowSize={30}
            ListHeaderComponent={headerComponent}
            contentContainerStyle={{ paddingBottom: 10 }}
            renderItem={({ item }) => (
              <View>
                {item}
              </View>
            )}
            numColumns={1}
            keyExtractor={(item, index) => String(index)}
          />

For more information, you can refer to the blog which explains how to use react hooks with firebase firestore.

Answered By - Divyani Yadav