Undefined is not a function (near ...snapshot.docChanges.forEach...)

[Nexuist]

Not sure why I'm getting this error, but here's my code:

const eventsRef = firebase.firestore().collection("events");
const locationsRef = firebase.firestore().collection("locations");
const geoFirestore = new GeoFirestore(locationsRef);
const query = geoFirestore.query({
    center: [this.state.region.latitude, this.state.region.longitude],
    radius: 1
});
query.on("ready", () => this.setState({ loading: false }));
query.on("key_entered", (key, coords, distance) => {
     console.log(key);
});

Both locations and events collections exist in my database, and I'm able to add new items without hassle:

const eventsRef = firebase.firestore().collection("events");
const locationsRef = firebase.firestore().collection("locations");
const geoFirestore = new GeoFirestore(locationsRef);
try {
      let docRef = await eventsRef.add({
        name: this.state.eventName,
        location: new firebase.firestore.GeoPoint(latitude, longitude),
        owner: `/users/${firebase.auth().currentUser.uid}`
     });
     await geoFirestore.set(docRef.id, [latitude, longitude]);
    } 
catch (err) {
    console.log(err);
    this.setState({
        loading: false
    });
    Alert.alert("Error", "Sorry, there was an error creating your event.");
}

According to the redbox the error is located around line 385 in query.js. I'm guessing this is related to the newer firebase package (5.0.1) that asks you to put this piece of code before anything else:

// Avoid deprecation warning
firebase.firestore().settings({
    timestampsInSnapshots: true
});

Kind of in a damned if I do and damned if I don't situation here; since not including that makes firebase crash my app and including it makes geofirestore crash my app!

Any suggestions?

[MichaelSolati]

@Nexuist you don't happen to have a sample report do you?

[Nexuist]

A sample report? I'm not sure what that is, but I can try to get one if you clarify.

[MichaelSolati]

Sorry, haha, I meant repo!!!!

[Nexuist]

I don't have a repo but here's a simple full blown example:

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants, MapView, Permissions, Location } from 'expo';
import * as firebase from "firebase";
require("firebase/firestore");
import { GeoFirestore } from "geofirestore";

// Fill in as appropriate
const FirebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
};

export default class App extends Component {
  state = {
    region: { latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }
  }

  async componentWillMount() {
    firebase.initializeApp(FirebaseConfig);
    // Avoid deprecation warning
    firebase.firestore().settings({
      timestampsInSnapshots: true
    });
    // Get the user's location
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    let location = await Location.getCurrentPositionAsync({});
    this.setState({
      region: {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01
      }
    });
    // Just a simple collection with one or two premade items
    const locationsRef = firebase.firestore().collection("locations");
    const geoFirestore = new GeoFirestore(locationsRef);
    const query = geoFirestore.query({
      center: [this.state.region.latitude, this.state.region.longitude],
      radius: 1
    });
    query.on("ready", () => this.setState({ loading: false }));
    query.on("key_entered", (key, coords, distance) => {
      console.log(key);
    });
  }

  render() {
    return (
      <MapView
        ref={map => (this._mapView = map)}
        style={styles.map}
        showsUserLocation={true}
        showsPointsOfInterest={false}
        followsUserLocation={true}
        provider="google"
        region={this.state.region}
      ></MapView>
    );
  }
}

const styles = StyleSheet.create({
  map: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  }
});

Interestingly the error seems to have changed a little:

Here's the error I get if I don't change those firestore settings:

Hope this helps. Andi

[vhuytdt]

help me !! new Geofirestore undefied

[MichaelSolati]

Unfortunately I'm not going to be able to jump on this at the moment. I'm prioritizing the support for custom data in version 2.0.0. Anyhoo, I will be looking into this come v2, and will probably be supporting different build typed (like for react native).

However I would appreciate if anyone could throw together a sample repository so I can take a look at and tinker with it as I get to this (hopefully come early June).

[Nexuist]

I ran into this problem. Basically all the new firestore stuff is separate from firebase itself, so you have to import it differently:

import * as firebase from "firebase";
require("firebase/firestore");

Firestore should be defined after that.

[MichaelSolati]

So this seems to be an issue with firebase 5.x.x. Which while "supported," I didn't take into account such a change to firestore. Anyway, based on feedback by @Nexuist this issue will be resolved in v1.2.0 as well as v2.0.0.

Yes v2.0.0 is coming and will be a drastic change, more along the lines of what you all wanted from geofire and version 1 of geofirestore...

[ebouJ]

@MichaelSolati what's the status of this issue. I want to use it on my React native app.

[MichaelSolati]

@ebouJ 1.2.0 was published last night where if you're using Firebase 5, you should be all good

[patpune]

So does geofirestore support react native ?

[MichaelSolati]

@patpune I don't officially support it, however when someone reports an issue where I see that I can make a simple or easy fix to support it, I will. there was an issue opened about a month or two ago which I was able to resolve and that RNF user said things were working well after that.

[patpune]

@MichaelSolati - Thanks - appreciate your response and outstanding work on this. I think this would merge to be the only one for ReactNative. I wonder why you say "I don't officially support it".

[MichaelSolati]

I don't write tests around it being the big reason, and I've also had difficulty in the past trying to set up my Mac to run/build for my phones (I don't know why, other native stuff works fine). Finally, for the interfaces/typings I require the official Firebase libraries as dependencies, I don't plan/intend on adding extra dependencies for non-official Firebase libraries/typings.