Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Jenna Kim
    This message was deleted
    3 replies
    @gregfenton I’m guessing it doesn’t make much sense to post my question I already posted in redux-firestore here again…? :)
    Let me ask the question differently: in the Redux Persist section of the doc (https://react-redux-firebase.com/docs/integrations/redux-persist.html) if I just added import β€˜firebase/firestore’ below import firebase from 'firebase/app’ would I be able to use firestore as the storage engine for redux-persist that way?
    16 replies
    Hi all, I'm new to firebase with redux. Wondering if anyone knows if there's a good way to wait for redux-firestore to get the documents after firing onAuthStateChanged(user => if(user){do stuff}) when signing in?
    10 replies
    Dawson Botsford

    Hi folks, I've just drained a day with a react-native error I'm getting in redux-firestore. I'd appreciate any help on this, and if we cannot fix it in a day or so, we're reverting all the redux-firebase integration I just worked so hard on.

    The error we're seeing in both iOS and Android builds on Circle Fastlane is (view the full build here:

    > Task :app:bundleReleaseJsAndAssets
    error Unable to resolve module `babel-runtime/helpers/extends` from `node_modules/redux-firestore/lib/enhancer.js`: babel-runtime/helpers/extends could not be found within the project.
    Error: Unable to resolve module `babel-runtime/helpers/extends` from `node_modules/redux-firestore/lib/enhancer.js`: babel-runtime/helpers/extends could not be found within the project.
    If you are sure the module exists, try these steps:
    If you are sure the module exists, try these steps:
     1. Clear watchman watches: watchman watch-del-all
     1. Clear watchman watches: watchman watch-del-all
     2. Delete node_modules: rm -rf node_modules and run yarn install
     2. Delete node_modules: rm -rf node_modules and run yarn install
     3. Reset Metro's cache: yarn start --reset-cache
     3. Reset Metro's cache: yarn start --reset-cache
     4. Remove the cache: rm -rf /tmp/metro-*. Run CLI with --verbose flag for more details.
     4. Remove the cache: rm -rf /tmp/metro-*
        at ModuleResolver.resolveDependency (/home/circleci/mobile/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
        at ResolutionRequest.resolveDependency (/home/circleci/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
        at DependencyGraph.resolveDependency (/home/circleci/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
        at Object.resolve (/home/circleci/mobile/node_modules/metro/src/lib/transformHelpers.js:267:42)
        at dependencies.map.result (/home/circleci/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31)
        at Array.map (<anonymous>)
        at resolveDependencies (/home/circleci/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
        at /home/circleci/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
        at Generator.next (<anonymous>)
        at asyncGeneratorStep (/home/circleci/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
    > Task :app:bundleReleaseJsAndAssets FAILED
    FAILURE: Build failed with an exception.

    I followed the instructions with watchman del, rm -rf node_modules, etc. with no changes in this error. Here are the versions we're using:

    npm ls --depth 0
    β”œβ”€β”€ @babel/core@7.11.6
    β”œβ”€β”€ @babel/runtime@7.11.2
    β”œβ”€β”€ @react-native-community/async-storage@1.12.1
    β”œβ”€β”€ @react-native-community/datetimepicker@3.0.3
    β”œβ”€β”€ @react-native-community/eslint-config@2.0.0
    β”œβ”€β”€ @react-native-community/masked-view@0.1.10
    β”œβ”€β”€ @react-native-community/picker@1.7.0
    β”œβ”€β”€ @react-native-community/slider@3.0.3
    β”œβ”€β”€ @react-native-community/viewpager@4.1.6
    β”œβ”€β”€ @react-native-firebase/analytics@7.6.7
    β”œβ”€β”€ @react-native-firebase/app@8.4.5
    β”œβ”€β”€ @react-native-firebase/auth@9.3.0
    β”œβ”€β”€ @react-native-firebase/dynamic-links@7.5.9
    β”œβ”€β”€ @react-native-firebase/firestore@7.8.6
    β”œβ”€β”€ @react-native-firebase/functions@7.4.8
    β”œβ”€β”€ @react-native-firebase/messaging@7.9.0
    β”œβ”€β”€ @react-native-firebase/storage@7.4.9
    β”œβ”€β”€ @react-navigation/core@5.12.5
    β”œβ”€β”€ @react-navigation/material-top-tabs@5.2.19
    β”œβ”€β”€ @react-navigation/native@5.7.6
    β”œβ”€β”€ @react-navigation/stack@5.9.3
    β”œβ”€β”€ @segment/analytics-react-native@1.3.1
    β”œβ”€β”€ @types/jest@26.0.14
    β”œβ”€β”€ @types/lodash@4.14.162
    β”œβ”€β”€ @types/react@16.9.52
    β”œβ”€β”€ @types/react-instantsearch-native@6.3.0
    β”œβ”€β”€ @types/react-native@0.63.25
    β”œβ”€β”€ @types/react-native-vector-icons@6.4.6
    β”œβ”€β”€ @types/react-native-video@5.0.3
    β”œβ”€β”€ @types/react-redux@7.1.9
    β”œβ”€β”€ @types/react-test-renderer@16.9.3
    β”œβ”€β”€ @types/uuid@3.4.0
    β”œβ”€β”€ algoliasearch@4.5.1
    β”œβ”€β”€ babel-jest@26.5.2
    β”œβ”€β”€ eslint@7.11.0
    β”œβ”€β”€ eslint-config-airbnb@18.2.0
    β”œβ”€β”€ eslint-config-prettier@6.12.0
    β”œβ”€β”€ eslint-config-standard@14.1.1
    β”œβ”€β”€ eslint-plugin-import@2.22.1
    β”œβ”€β”€ eslint-plugin-jsx-a11y@6.3.1
    β”œβ”€β”€ eslint-plugin-node@11.1.0
    β”œβ”€β”€ eslint-plugin-prettier@3.1.4
    β”œβ”€β”€ eslint-plugin-promise@4.2.1
    β”œβ”€β”€ eslint-plugin-react@7.21.4
    β”œβ”€β”€ eslint-plugin-react-hooks@4.1.2
    β”œβ”€β”€ eslint-plugin-react-native@3.10.0
    β”œβ”€β”€ UNMET PEER DEPENDENCY eslint-plugin-standard@>=4.0.0
    β”œβ”€β”€ husky@4.3.0
    β”œβ”€β”€ jest@26.5.3
    β”œβ”€β”€ jetifier@1.6.6
    β”œβ”€β”€ lint-staged@10.4.0
    β”œβ”€β”€ lodash@4.17.20
    β”œβ”€β”€ metro-react-native-babel-preset@0.63.0
    β”œβ”€β”€ moment@2.29.1
    β”œβ”€β”€ prettier@2.1.2
    β”œβ”€β”€ prop-types@15.7.2
    β”œβ”€β”€ react@16.13.1
    β”œβ”€β”€ UNMET PEER DEPENDENCY react-dom@*
    β”œβ”€β”€ react-firestore@1.0.1
    β”œβ”€β”€ react-instantsearch-native@6.7.0
    β”œβ”€β”€ UNMET PEER DEPENDENCY react-native@0.63.3
    β”œβ”€β”€ react-native-actionsheet@2.4.2
    β”œβ”€β”€ react-native-appearance@0.3.4
    β”œβ”€β”€ react-native-autocomplete-input@4.2.0
    β”œβ”€β”€ react-native-awesome-alerts@1.4.1
    β”œβ”€β”€ react-native-background-timer@2.4.1
    β”œβ”€β”€ react-native-camera@3.40.0
    β”œβ”€β”€ react-native-contacts@6.0.1
    β”œβ”€β”€ react-native-country-picker-modal@2.0.0
    β”œβ”€β”€ react-native-create-thumbnail@1.2.1
    β”œβ”€β”€ react-native-device-info@6.2.0
    β”œβ”€β”€ react-native-dropdown-picker@3.7.0
    β”œβ”€β”€ react-native-fast-image@8.3.2
    β”œβ”€β”€ react-native-fs@2.16.6
    β”œβ”€β”€ react-native-gesture-handler@1.8.0
    β”œβ”€β”€ react-native-haptic-feedback@1.11.0
    β”œβ”€β”€ react-native-image-crop-picker@0.34.1
    β”œβ”€β”€ react-native-image-picker@2.3.4
    β”œβ”€β”€ react-native-in-app-message@1.0.32
    β”œβ”€β”€ react-native-iphone-x-helper@1.2.1
    β”œβ”€β”€ react-native-linear-gradient@2.5.6
    β”œβ”€β”€ react-native-mixpanel@1.2.3
    β”œβ”€β”€ react-native-modal@11.5.6
    β”œβ”€β”€ react-native-modal-datetime-picker@9.0.0
    β”œβ”€β”€ react-native-mov-to-mp4@0.2.2
    β”œβ”€β”€ react-native-permissions@2.2.2
    β”œβ”€β”€ react-native-popup-menu@0.15.9
    β”œβ”€β”€ react-native-pose@0.9.1
    β”œβ”€β”€ react-native-progress@4.1.2
    β”œβ”€β”€ react-native-reanimated@1.13.1
    β”œβ”€β”€ react-native-safe-area-context@3.1.8
    β”œβ”€β”€ react-native-screens@2.11.0
    β”œβ”€β”€ react-native-sms@1.11.0
    β”œβ”€β”€ react-native-snap-carousel@3.9.1
    β”œβ”€β”€ react-native-swiper@1.6.0
    β”œβ”€β”€ react-native-tab-view@2.15.2
    β”œβ”€β”€ react-native-track-player@2.0.0-rc13
    β”œβ”€β”€ react-native-vector-icons@7.1.0
    β”œβ”€β”€ react-native-video@5.1.0-alpha8
    β”œβ”€β”€ UNMET PEER DEPENDENCY react-native-web@*
    β”œβ”€β”€ UNMET PEER DEPENDENCY react-native-windows@>=0.62
    β”œβ”€β”€ react-redux@7.2.1
    β”œβ”€β”€ react-redux-firebase@3.7.0
    β”œβ”€β”€ react-test-renderer@16.13.1
    β”œβ”€β”€ redux@4.0.5
    β”œβ”€β”€ redux-firestore@1.0.0-alpha.2
    β”œβ”€β”€ redux-persist@6.0.0
    β”œβ”€β”€ redux-promise-middleware@6.1.2
    β”œβ”€β”€ redux-thunk@2.3.0
    β”œβ”€β”€ rn-fetch-blob@0.12.0
    β”œβ”€β”€ typescript@4.0.3
    └── uuid@3.4.0
    Trevor Hartman
    has anyone played with optimistic updates? i'm building a chat feature and it's just too slow with useFirestoreConnect and a click handler that calls .add on a firestore collection
    Christian Garrovillo
    Is there a native way to reference multiple database instances?
    What is the correct way to use pagination with firestoreConnect? Currently we use this code in the component to set listener:
    [code] setUsersListener = (pageChange = 0, orderBy = null, orderDir = null) => {
    const { firestore } = this.props;
    if (this.usersListener) this.usersListener();
        console.log(`orderBy(${this.state.usersInfo.orderBy}, ${this.state.usersInfo.orderDir})`);
        let realDir = orderDir ? orderDir : this.state.usersInfo.orderDir;
        let q = firestore.collection('users')
        .where('company.id', '==', this.state.userData.company.id)
            orderBy ? orderBy : this.state.usersInfo.orderBy,
        if (pageChange > 0) {
            console.log('Going to next page');
            q = q
                    this.state.usersInfo.snapshots.length - 1
        } else if (pageChange < 0) {
            console.log('Going to previous page');
            q = q
        } else {
            console.log('Displaying first page', this.state.usersInfo.usersPerPage);
            q = q
        this.usersListener = q.onSnapshot((querySnapshot) => {
            const users = querySnapshot.docs.map((doc) => {
                return {
                    id: doc.id,
            let snapshots = [];
            querySnapshot.forEach((snapshot) => {
                usersInfo: {
    It needs snapshot for startAfter / endBefore but there is no snapshot in firestoreConnect function.
    Hello Everyone, This is about a small social media App. I'm using RRF to pull post docs from firestore and rendering on the UI using FlatList. How do I implement pagination? Right now, the PostFeed screen is pulling in all docs from post collection, I want to pull in 50 when the screen first mounts, then 50 more when you've scrolled to the bottom or last of the first 50 posts. How do I do this using RRF or another technique? Then I also want to pulling recent posts when the FlatList has been pulled to refresh. Is there a way to render the new posts in floating thumbnails at the top of the FlatList (just like twitter)?
    Pierre Gagliardi
    @Jsh007 hi you must use the limit query property then use onendreach on your flat list to call the next 50 with start property of query and limit to 50. Store the initial query in a state then add the scroll queries to the same state. You will got a paginated flat list.
    Larry Mickie

    Hello all! Im having an issue where my queries are taking a long time (feels like they are being blocked, running synchronously ) for example on a webpage load I might have 3-4 components load with firestoreconnect i.e.

            collection: 'users',
            where: [
              ['projectId', '==', `${props.match.params.spaceId}`],
              [`deletedAt`, '==', 0]
            storeAs: `workspaceMembers.${props.match.params.spaceId}`

    There's times when the view tasks around 45 secs - 3 mins until the "isLoaded" flag becomes true. If any one has had similar issues i'd love to learn how you fixed this.

    Elad Karni
    Hello! I'm new to React-Redux-Firebase and was wondering what the best way of getting some data from a collection is? I have a collection with a few documents, but only want certain documents depending on a property they have (if the userID they have matches the userID of the logged in user). What would the best way to achieve this? Would I need to make a new reducer?
    export default combineReducers({
      firestore: firestoreReducer,
      firebase: firebaseReducer,
      activities: activityReducer,

    Hi, I can't seem to get populate to work.

    I've followed the official examples on it - defined an enhance function outside of the App function and did export default enhance(App) at the end of the file, yet when I access the data in the store the owner keys in each todo from todos aren't replaced with the appropriate data. Does anyone have a working example app to share?

    Clarification - when i do const fb = useSelector(state => state.firebase.data); console.log(fb) both the owners and todos are already loaded (without me needing to call useFirebaseConnect('todos'); useFirebaseConnect('owners');.
    So it seems that it's a bug but I can't be sure.
    How can I use firestore in a thunk? I see most functions are all about getting data in the component, but what if I want to move all of my querrying to thunks instead of out in the individual components? I cannot use getFirebase().firestore as that doesn't exist, so how would I be able to query data from firestore if I'm not inside the component scope but in a thunk function? You seem to have a recipe for thunks but only for firebase, not firestore.
    @benomatis I am able to use Firestore with getFirebase.firestore().
    Sorry that’s getFirebase().firestore()
    Add getFirebase as an extraArgument to thunk as in the docs
    I import getFirebase from react-redux-firebase
    @rshibli what complicates things is that I use rematch, which is a redux framework, so setting that up specifically for this is a little beyond my skillset, but I'll try to figure it out somehow, maybe contact rematch support for that thanks
    πŸ‘πŸΎ good luck
    @rshibli I managed to implement it, however, using firestore that way doesn't give me the redux bindings, ie. the data I querry will not be stored in redux. I added redux-firestore to my config, and it works fine in the components, but it doesn't appear to have a similar method like getFirebase() in rrf. I know it's a differrent plugin, but I also understand you guys are connected (or have the same creators), and the other room isn't very active, so figured I'd ask here, maybe you know yourself, as I already have your attention :)
    @benomatis I'm not a contributor to these libraries, just a user. I may be able to help if you can show me how you set up your store.
    although i don't think i'm doing any querying in thunks, only writing to firestore.
    It's a rematch specific config, so not sure how that is going to help, but you asked for it :)
    import { init } from '@rematch/core'
    import * as models from './models'
    import firebase from 'firebase/app'
    import 'firebase/firestore'
    import 'firebase/auth'
    import { firebaseReducer } from 'react-redux-firebase'
    import { firestoreReducer } from 'redux-firestore'
    const config = {
        //... firebase config object
    if (typeof window !== 'undefined') {
        const db = firebase.firestore()
        //... localhost setup for firestore emulator
    const store = init({
        redux: {
            reducers: {
                firebase: firebaseReducer,
                firestore: firestoreReducer,
    export default store
    and here is what normally goes into App.js
    import React from "react"
    import { Provider, useSelector } from "react-redux"
    import { getPersistor } from '@rematch/persist'
    import { PersistGate } from 'redux-persist/lib/integration/react'
    import { ReactReduxFirebaseProvider, isLoaded } from 'react-redux-firebase'
    import { createFirestoreInstance } from 'redux-firestore'
    import firebase from 'firebase/app'
    import store from 'src/rematch'
    import Loading from 'src/components/UI/Loading/Loading'
    const persistor = getPersistor()
    const onBeforeLift = () => {
        // console.log('PersistGate.onBeforeLift')
    const rrfConfig = {
        userProfile: 'users',
        enableClaims: true,
        useFirestoreForProfile: true
    export const rrfProps = {
        config: rrfConfig,
        dispatch: store.dispatch,
    const AuthIsLoaded = ({ children }) => {
        const auth = useSelector(state => state.firebase.auth)
        if (!isLoaded(auth)) return <Loading />;
        return children
    export default ({ element }) => (
        <Provider store={store}>
                loading={<Loading />}
                <ReactReduxFirebaseProvider  {...rrfProps}>
    where are you setting up redux thunk as a middleware?
    I think you should be doing that in store = init({...})
    or in a plugin
    are you sure you should be using redux-thunk with rematch?
    sorry, rematch uses models, and inside models there are effects for async functions, similar to thunks (or I just don't have enough knowledge of what thunks do), this is the structure of a typical model:
    export default {
        state: {
            count: 0
        reducers: {
            updateCount(state, value) {
                return { ...state, count: value }
        effects: dispatch => ({
            async getCounts(payload, rootState) {
                //... do async stuff
    OK, sorry I thought your question was about redux-thunk, I don't think I can help you.
    ok, thanks anyway
    ЈанС ЏумСркоски
    :wave: all,
    Recently I started using "react-redux-firebase".
    I have list of items (each item has subcollection) and on user selection I take one item and store the data for its sub-collection as storeAs: 'activeItemSubcollection'
    But later if I go back and choose another item, I already have some data in activeItemSubcollection, and for less then e second (while new item data is fetched) I see the old item data. Does someone knows how can I clean 'activeItemSubcollection' while moving from one component to another (also I am changing routes, if this helps)
    how do I clear firestore (!) requesting and requested statuses? It looks like they remain, even though I do call the CLEAR_DATA actionType
    ЈанС ЏумСркоски
    @benomatis how do you use CLEAR_DATA actionType to clear firestore data ?
    @janedzumerko dispatch({ type: actionTypes.CLEAR_DATA })
    ЈанС ЏумСркоски
    Did you extended the requestedReducer with CLEAR_DATA ?
    @janedzumerko I honestly don't know how I'd go about to do that.
    Elad Karni

    Any ideas why this only works without the isCompleted check?

    useFirestoreConnect(() => [
          collection: `Firms/${firmId}/activities`,
          where: [
            ['clientId', '==', client.id],
            ['type', '==', 'task'],
            ['isCompleted', '==', 'false'], // Works if I remove this, but doesn't get the data I want
          storeAs: `${userId}/clients/${client.id}/incompleteTasks`,

    right now it returns []

    @EladKarni could it be that you look for a string as a value instead of a boolean?, ie. you have 'false' (with single quotes) while a boolean would be false (no quotes)... just a wild guess
    Any idea why I'm getting Uncaught Error: FIREBASE FATAL ERROR: Cannot parse Firebase url please use https://<YOUR FIREBASE>.firebaseio.com even though my firebaseconfig is copypasted from the console?
    Some parts like auth are already working but I'm getting that when I try to use useFirebaseConnect
    hell, even when I access the database url with my browser I can get data out with http requests
    ah, updated the firebase package ( from yesterdays version ) and it works
    Is there a reason that firebase.logout() clears data from firebase.data even though said data is not gated behind authentication