@humancollective/human-hooks-firebase-native

Built by Human.

A set of simple helpers for accessing Firebase Firestore data in realtime using React Contexts.

This is a pattern we use frequently for quickly building prototypes, new features, and database connections at Human. It's great for prototyping and it doesn't introduce a lot of complicated boilerplate code.

If you're looking for the Firebase Web SDK vesrion, you can also check out @humancollective/human-hooks-firebase.

Creating a secure realtime connection with Firestore is simple.

// in /src/components/OrdersList.tsx
import { useAuthedCollection } from '@humancollective/human-hooks-firebase';
import firebase from 'firebase';

import { Order } from '../types';

export const OrdersList = () => {
  // create a Firestore listener with the current user's ID
  // it will respond automatically to changes in auth / user!
  const orders = useAuthedCollection<Order>({
    getQueryRef: uid =>
      firebase
        .firestore()
        .collection('orders')
        .where('user', '==', uid),
    includeIds: true,
  });

  return orders ? (
    <div>
      {orders.map(({ id, name, totalCost }) => (
        <div key={id}>
          {name} - {totalCost}
        </div>
      ))}
    </div>
  ) : (
    <Loading />
  );
};

With just a few of lines of code, we've created a new context with a Firestore listener. That listener will return an empty array unless the user is logged in. If they're logged in, it will return all of the orders they own (note - this depends on your data model and security rules).

Usage

Installation

Install this library and firebase.

yarn add firebase @humancollective/human-hooks-firebase-native

Make sure you've also installed react-native-firebase and followed the installation instructions.

Include IDs

We can include the Firebase IDs in the collection response by setting the includeIds flag to true when we create the collection context.

Default Values

Default values can be specified using the defaultValue option when creating the collection context.

Hooks

• useAuth - returns { isLoggedIn: true } if the user is logged in.
• useAuthedCollection - a realtime array of values from a query or collection ref.
• useAuthedCollectionCount - a realtime value that tracks the size of a query or collection ref.
• useAuthedDocument - a realtime value returned from a document ref.