Usage with FlatLists
Using Cloud Firestore collections with FlatLists.
Cloud Firestore provides out of the box support for subscribing to realtime changes
on a collection of documents. Whilst building apps with Cloud Firestore, you can easily display lists of a collections
documents using a FlatList
.
A FlatList
accepts an array of data, and displays the results in a performance friendly scrollable list. By integrating
a realtime listener with the FlatList
, whenever data changes without our database it'll automatically and efficiently update
on our application.
Setup state
First, setup a component which will display the list of data. The component will have 2 separate states; loading
and
users
:
import React, { useState } from 'react';
import { ActivityIndicator } from 'react-native';
function Users() {
const [loading, setLoading] = useState(true); // Set loading to true on component mount
const [users, setUsers] = useState([]); // Initial empty array of users
if (loading) {
return <ActivityIndicator />;
}
// ...
}
useEffect
hook
Next, we'll setup a hook with useEffect
. This hook will trigger when our components mount, and we'll then subscribe to
the "Users" collection documents:
import React, { useState, useEffect } from 'react';
import { ActivityIndicator } from 'react-native';
import firestore from '@react-native-firebase/firestore';
function Users() {
const [loading, setLoading] = useState(true); // Set loading to true on component mount
const [users, setUsers] = useState([]); // Initial empty array of users
useEffect(() => {
const subscriber = firestore()
.collection('Users')
.onSnapshot(() => {
// see next step
});
// Unsubscribe from events when no longer in use
return () => subscriber();
}, []);
if (loading) {
return <ActivityIndicator />;
}
// ...
}
Transforming data
With our event handler setup, we can now iterate over the collection documents. Whilst iterating, we need to create an
array of data a FlatList
accepts. At a minimum, this is an object with a unique key
property. For this unique property,
we can use the id
of a document:
useEffect(() => {
const subscriber = firestore()
.collection('Users')
.onSnapshot(querySnapshot => {
const users = [];
querySnapshot.forEach(documentSnapshot => {
users.push({
...documentSnapshot.data(),
key: documentSnapshot.id,
});
});
setUsers(users);
setLoading(false);
});
// Unsubscribe from events when no longer in use
return () => subscriber();
}, []);
Once the initial set of documents is returned, we update the users
state with our raw object data and set the loading
state to false
. We can now
Integration
With the raw user data in local state, we can now pass this to the FlatList
:
import React, { useState, useEffect } from 'react';
import { ActivityIndicator, FlatList, View, Text } from 'react-native';
import firestore from '@react-native-firebase/firestore';
function Users() {
// ...
if (loading) {
return <ActivityIndicator />;
}
return (
<FlatList
data={users}
renderItem={({ item }) => (
<View style={{ height: 50, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>User ID: {item.id}</Text>
<Text>User Name: {item.name}</Text>
</View>
)}
/>
);
}
With little effort, our list will automatically update in realtime whenever a document is added/removed/modified! This functionality can be further manipulated to respond to user filters via Querying if required.