I have a Cloud Firestore Collection (Locations) that have GeoPoint fields, and I want to query based on the current users location to find nearby places.
It appears that Cloud Firestore can't do this yet, but geofirestore seems to be the viable option. I'm trying to query the Cloud Firestore Collection (Locations) with the coordinates 34.0103, 118.4962. However, I'm getting the following error:
[2019-05-26T19:28:26.891Z] @firebase/firestore:, Firestore (6.0.4): INTERNAL UNHANDLED ERROR: , configureNetworkMonitoring
Here's what I've looked at:
- The data Collection (Locations) is loaded to Cloud Firestore is correct
- The Cloud Firestore GeoPoint is syntax & data is correct
- The Geoquery is not working
Cloud Firestore Data:
{
city: "Santa Monica",
geopoint: [34.0103, 118.4962],
location_id: "LA_00012",
location_name: "Santa Monica Pier",
state: "CA",
street: "200 Santa Monica Pier,
zip_code: "90401",
}
React Component (Search):
// Imports: Dependencies
import React, { Component } from 'react';
import { Button, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import 'firebase/firestore';
import { GeoCollectionReference, GeoFirestore, GeoQuery, GeoQuerySnapshot } from 'geofirestore';
// Screen: Search
class Search extends Component {
constructor (props) {
super(props);
this.state = {
location: null,
errorMessage: null,
};
}
// Get Nearest Locations
getNearestLocations = async () => {
try {
// Create Firestore Reference
const collection = firebase.firestore().collection('locations');
// Query Limit (10)
const limitQuery = collection.limit(10);
// Geo Query
const query = new GeoQuery(limitQuery).near({
center: new firebase.firestore.GeoPoint(34.0103, 118.4962),
radius: 10,
});
query.get().then((value) => {
value.docs.forEach(doc => {
console.log(doc);
});
});
}
catch (error) {
console.log(error);
}
}
render() {
return (
<SafeAreaView style={styles.container}>
<Text>Search</Text>
<Button title="Search" onPress={this.getNearestLocations} />
</SafeAreaView>
);
}
}
// Styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
// Exports
export default Search