[SOLVED] React native firestore statics page queries


I just want to make datatable for reporting. But I can’t get counts that I want.

I got city ids and there’s data related to cities.

I need to make datatable which one get counts about cities. I can get numbers on console.log but cant show on screen. How can I do that?

I tried things below:

  • I did GetDetails return snap.size didn’t work
  • I tried flatlist but didn’t work
  • I tried to call data with function but didn’t work


import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, ScrollView, FlatList } from 'react-native'
import firestore from '@react-native-firebase/firestore';
import { DataTable } from 'react-native-paper';

export default function TargetStaticsScreen() {

    const [zones, setZones] = useState([])

    function GetCities() {
        var z = [];
        firestore().collection('RandomZones').orderBy('City', 'asc').get().then(zones => {


    async function GetDetails({ cityid }) {
        let snap = await firestore().collection('RandomZones').doc(cityid).collection('targetlist').get()
        return (<DataTable.Cell key={cityid} numeric>{snap.size}</DataTable.Cell>

    function RemainingDots(cityid) {
        firestore().collection('RandomZones').doc(cityid).collection('targetlist').where('isUsed', '==', false).get().then(snap => {
            return snap.size;

    return (
            <Button title='getdata' onPress={() => GetCities()} />
                    <DataTable.Title numeric>Toplam Nokta</DataTable.Title>
                    <DataTable.Title numeric>Kalan Nokta</DataTable.Title>
                    <DataTable.Title numeric>Aktif Nokta</DataTable.Title>
                    <DataTable.Title numeric>Aktif Nokta Tutar</DataTable.Title>

                {zones.map((x) => {

                    return (
                        <DataTable.Row key={x.id}>
                            <GetDetails cityid={x.id} />
                            <DataTable.Cell numeric>{RemainingDots(x.id)}</DataTable.Cell>
                            <DataTable.Cell numeric>111</DataTable.Cell>
                            <DataTable.Cell numeric>111</DataTable.Cell>



Since the value you’re looking for is loaded asynchronously from the database, you’ll have to put it in a state variable to get the UI to update – very similarly to what you already do for setZones.

const [detailsForRegions, setDetailsForRegions] = useState({})


async function GetDetails(cityid) {
  firestore().collection('RandomZones').doc(cityid).collection('targetlist').get().then((snap) => {
    let data = detailsForRegions;
    data[cityid] = snap.size;

You should probably also trigger the loading of this data from the then of GetCities, rather than the UI rendering:

function GetCities() {
    var z = [];
    firestore().collection('RandomZones').orderBy('City', 'asc').get().then(zones => {
        zones.docs.map(zone => GetDetails(zone.id)); // 👈

This then:

  1. Asynchronously pulls in the details for each city.
  2. Sets them to the state as they come in, which in turn
  3. Rerenders the UI each time.

Answered By – Frank van Puffelen

Answer Checked By – Gilberto Lyons (BugsFixing Admin)

Leave a Reply

Your email address will not be published.