expo-firestore-offline-persistence

❄️ Enable Firestore offline persistence in Expo/React Native apps without detaching from Expo.

Usage no npm install needed!

<script type="module">
  import expoFirestoreOfflinePersistence from 'https://cdn.skypack.dev/expo-firestore-offline-persistence';
</script>

README

expo-firestore-offline-persistence

Enable Firestore persistence in Expo/React Native apps without detaching. ❄️

Why?

Firebase/Firestore peristence doesn't currently work in Expo apps, unless you detach and use react-native-firebase.

This library lets you use Firestore without detaching from Expo, by polyfilling the Firestore JS SDK.

To learn more about Firestore peristence, see their offline mode docs: https://cloud.google.com/firestore/docs/manage-data/enable-offline

Installation

yarn add expo-firestore-offline-persistence

# or
npm install expo-firestore-offline-persistence

Install peer dependencies:

expo install expo-sqlite indexeddbshim

Usage

Import expo-firestore-offline-persistence root of your app. You should import this before you import firebase.

import 'expo-firestore-offline-persistence'

App.js

import React from 'react'
import { View } from 'react-native'

import 'expo-firestore-offline-persistence'

// ...

export default function App() {
  return <View />
}

And now, you can enable Firestore persistence like normal, as if you were using Firestore on web:

import 'expo-firestore-offline-persistence'

// ...

import * as firebase from 'firebase/app'
import 'firebase/firestore'

// You'll want to use the instance of Firestore you've already created, instead of firebase.firestore()
firebase.firestore().enablePersistence()

If you're using @nandorojo/swr-firestore, you can access fuego.db directly. Your App.js will look like this:

import * as React from 'react'

import 'expo-firestore-offline-persistence' // 👋 import this first
import 'firebase/firestore'

import { FuegoProvider, Fuego } from '@nandorojo/swr-firestore'

const fuego = new Fuego({
  // your firebase config here
})

fuego.db.enablePersistence()

export default function App() {
  return (
    <FuegoProvider fuego={fuego}>{/* Your app code here... */}</FuegoProvider>
  )
}

If you aren't familiar with @nandorojo/swr-firestore, I recommend you check it out. It makes querying Firestore in React/Expo apps way simpler.

Credit

I'd like to thank @nnatter, @brettz9, and @bulby97 for contributing to the gist that led to the creation of this library.

For more background on their great work: https://gist.github.com/zwily/e9e97e0f9f523a72c24c7df01d889482

License

MIT