Geoqueries

10min
Using React Native geolocation to perform geoqueries using Parse
Introduction
In this guide, you will perform geoqueries in Parse using the React Native geolocation. You will implement a React Native component using these queries and learn how to set up and query realistic data using Back4App and React Native.
Prerequisites
To complete this tutorial, you will need:
A React Native App created and connected to Back4App.
If you want to test/use the screen layout provided by this guide, you should set up thereact-native-paper﻿library and also react-native-geolocation-service.
Goal
Perform Geoqueries using geopoints stored on Back4App and React Native geolocation.
- Understanding the Parse.Query class
Any Parse query operation uses the Parse.Query object type, which will help you retrieve specific data from your database throughout your app. It is crucial to know that a Parse.Query will only resolve after calling a retrieve method (like Parse.Query.find or Parse.Query.get), so a query can be set up and several modifiers can be chained before actually being called.
To create a new Parse.Query, you need to pass as a parameter the desired Parse.Object subclass, which is the one that will contain your query results. An example query can be seen below, in which a fictional Profile subclass is being queried.
JS
 // This will create your query
 let parseQuery = new Parse.Query("Profile");
 // The query will resolve only after calling this method
 let queryResult = await parseQuery.find();
 // This will create your query
 let parseQuery = new Parse.Query("Profile");
 // The query will resolve only after calling this method
 let queryResult = await parseQuery.find();
﻿
You can read more about the Parse.Query class here at the official documentation.
- Save some data on Back4App
Let’s create a City class, which will be the target of our queries in this guide. On Parse JS Console is possible to run JavaScript code directly, querying and updating your application database contents using the JS SDK commands. Run the code below from your JS Console and insert the data on Back4App.
Here is how the JS Console looks like in your dashboard:
﻿
Go ahead and create the City class with the following example content:
JS
// Add City objects and create table
// Note how GeoPoints are created, passing latitude and longitude as arguments
// Montevideo
City = new Parse.Object('City');
City.set('name', 'Montevideo - Uruguay');
City.set('location', new Parse.GeoPoint(-34.85553195363169, -56.207280375137955));
await City.save();

// Brasília
City = new Parse.Object('City');
City.set('name', 'Brasília - Brazil');
City.set('location', new Parse.GeoPoint(-15.79485821477289, -47.88391074690196));
await City.save();

// Bogotá
City = new Parse.Object('City');
City.set('name', 'Bogotá - Colombia');
City.set('location', new Parse.GeoPoint(4.69139880891712, -74.06936691331047));
await City.save();

// Mexico City
City = new Parse.Object('City');
City.set('name', 'Mexico City - Mexico');
City.set('location', new Parse.GeoPoint(19.400977162618933, -99.13311378164776));
await City.save();

// Washington, D.C.
City = new Parse.Object('City');
City.set('name', 'Washington, D.C. - USA');
City.set('location', new Parse.GeoPoint(38.930727220189944, -77.04626261880388));
await City.save();

// Ottawa
City = new Parse.Object('City');
City.set('name', 'Ottawa - Canada');
City.set('location', new Parse.GeoPoint(45.41102167733425, -75.695414598736));
await City.save();

console.log('Success!');
// Add City objects and create table
// Note how GeoPoints are created, passing latitude and longitude as arguments
// Montevideo
City = new Parse.Object('City');
City.set('name', 'Montevideo - Uruguay');
City.set('location', new Parse.GeoPoint(-34.85553195363169, -56.207280375137955));
await City.save();

// Brasília
City = new Parse.Object('City');
City.set('name', 'Brasília - Brazil');
City.set('location', new Parse.GeoPoint(-15.79485821477289, -47.88391074690196));
await City.save();

// Bogotá
City = new Parse.Object('City');
City.set('name', 'Bogotá - Colombia');
City.set('location', new Parse.GeoPoint(4.69139880891712, -74.06936691331047));
await City.save();

// Mexico City
City = new Parse.Object('City');
City.set('name', 'Mexico City - Mexico');
City.set('location', new Parse.GeoPoint(19.400977162618933, -99.13311378164776));
await City.save();

// Washington, D.C.
City = new Parse.Object('City');
City.set('name', 'Washington, D.C. - USA');
City.set('location', new Parse.GeoPoint(38.930727220189944, -77.04626261880388));
await City.save();

// Ottawa
City = new Parse.Object('City');
City.set('name', 'Ottawa - Canada');
City.set('location', new Parse.GeoPoint(45.41102167733425, -75.695414598736));
await City.save();

console.log('Success!');
﻿
- Query the data
Now that you have a populated class, we can now perform some GeoPoint queries in it. Let’s begin by ordering City results by the nearest from Kingston in Jamaica (latitude 18.01808695059913 and longitude -76.79894232253473), using the Parse.Query.near method:
JS
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint for the query
let kingstonGeoPoint = new Parse.GeoPoint(18.018086950599134, -76.79894232253473);

// `near` will order results based on distance between the GeoPoint type field from the class and the GeoPoint argument
parseQuery.near('location', kingstonGeoPoint);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint for the query
let kingstonGeoPoint = new Parse.GeoPoint(18.018086950599134, -76.79894232253473);

// `near` will order results based on distance between the GeoPoint type field from the class and the GeoPoint argument
parseQuery.near('location', kingstonGeoPoint);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
Let’s now query using the methodParse.Query.withinKilometers, which will retrieve all results whose GeoPoint field is located within the max distance. Kingston will be used once again as a reference and the distance limit will be 3000 km.
JS
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint for the query
let kingstonGeoPoint = new Parse.GeoPoint(18.018086950599134, -76.79894232253473);

// You can also use `withinMiles` and `withinRadians` the same way,
// but with different measuring unities
parseQuery.withinKilometers('location', kingstonGeoPoint, 3000);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint for the query
let kingstonGeoPoint = new Parse.GeoPoint(18.018086950599134, -76.79894232253473);

// You can also use `withinMiles` and `withinRadians` the same way,
// but with different measuring unities
parseQuery.withinKilometers('location', kingstonGeoPoint, 3000);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
Another useful query method isParse.Query.withinPolygon, which will query results whose GeoPoint field value is within the specified polygon, composed of an array of GeoPoints (at least three). If the polygon path is open, it will be closed automatically by Parse connecting the last and first points.
For this example, you will be using a simple polygon that roughly contains the South American continent, composed of 5 distant GeoPoints in the ocean.
JS
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint polygon for the query
let geoPoint1 = new Parse.GeoPoint(15.822238344514378, -72.42845934415942);
let geoPoint2 = new Parse.GeoPoint(-0.7433770196268968, -97.44765968406668);
let geoPoint3 = new Parse.GeoPoint(-59.997149373299166, -76.52969196322749);
let geoPoint4 = new Parse.GeoPoint(-9.488786415007201, -18.346101586021952);
let geoPoint5 = new Parse.GeoPoint(15.414859532811047, -60.00625459569375);

// Note that the polygon is merely an array of GeoPoint objects and that the first and last are not connected, so Parse connects them for you
parseQuery.withinPolygon('location', [geoPoint1, geoPoint2, geoPoint3, geoPoint4, geoPoint5]);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
// Create your query
let parseQuery = new Parse.Query('City');

// Create our GeoPoint polygon for the query
let geoPoint1 = new Parse.GeoPoint(15.822238344514378, -72.42845934415942);
let geoPoint2 = new Parse.GeoPoint(-0.7433770196268968, -97.44765968406668);
let geoPoint3 = new Parse.GeoPoint(-59.997149373299166, -76.52969196322749);
let geoPoint4 = new Parse.GeoPoint(-9.488786415007201, -18.346101586021952);
let geoPoint5 = new Parse.GeoPoint(15.414859532811047, -60.00625459569375);

// Note that the polygon is merely an array of GeoPoint objects and that the first and last are not connected, so Parse connects them for you
parseQuery.withinPolygon('location', [geoPoint1, geoPoint2, geoPoint3, geoPoint4, geoPoint5]);

// The query will resolve only after calling this method, retrieving
// an array of `Parse.Objects`
let queryResults = await parseQuery.find();

// Let's show the results
for (let result of queryResults) {
 // You access `Parse.Objects` attributes by using `.get`
 console.log(result.get('name'));
};
﻿
- Query from a React Native component
Let’s now use our example queries inside a component in React Native, with a simple interface having a list showing results and also 3 buttons for calling the queries. The component also retrieves the device’s current location using react-native-geolocation-service, so the queries will be using real data.
This is how the component code is laid out, note the doQuery functions, containing the example code form before.
JavaScript
TypeScript
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 Image,
 View,
 PermissionsAndroid,
 Platform,
 ScrollView,
 StyleSheet,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';
import Geolocation from 'react-native-geolocation-service';

export const QueryList: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);

 // This function asks for location permission on iOS and Android
 const requestLocationPermissions = async () => {
   if (Platform.OS === 'ios') {
     // iOS can be asked always, since the OS handles if user already gave permission
     await Geolocation.requestAuthorization('whenInUse');
   } else if (Platform.OS === 'android') {
     let permissionCheck: boolean = await PermissionsAndroid.check(
       PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
     );
     // Only asks for permission on Android if not given before
     if (permissionCheck !== true) {
       await PermissionsAndroid.request(
         PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
         {
           title: 'Location Permission Request',
           message:
             'This app needs you permission for using your location for querying GeoPoints in Parse!',
           buttonPositive: 'OK',
         },
       );
     }
   }
 };

 const doQueryNear = async function (): Promise<boolean> {
   // Request location permissions
   await requestLocationPermissions();
   // Get current location and create the GeoPoint for the query
   Geolocation.getCurrentPosition(
     async (currentPosition: {
       coords: {latitude: number; longitude: number};
     }) => {
       // Create our GeoPoint
       let currentLocationGeoPoint: Parse.GeoPoint = new Parse.GeoPoint(
         currentPosition.coords.latitude,
         currentPosition.coords.longitude,
       );

       // Create our query
       let parseQuery: Parse.Query = new Parse.Query('City');

       // `near` will order results based on distance between the GeoPoint type field from the class and the GeoPoint argument
       parseQuery.near('location', currentLocationGeoPoint);

       try {
         let results: [Parse.Object] = await parseQuery.find();
         // Set query results to state variable
         setQueryResults(results);
       } catch (error) {
         // Error can be caused by lack of Internet connection
         Alert.alert('Error!', error.message);
       }
     },
     _error => {
       Alert.alert(
         'Error!',
         'This app needs your location permission to query this!',
       );
     },
     {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
   );
   return true;
 };

 const doQueryWithinKilometers = async function (): Promise<boolean> {
   // Request location permissions
   await requestLocationPermissions();
   // Get current location and create the GeoPoint for the query
   Geolocation.getCurrentPosition(
     async (currentPosition: {
       coords: {latitude: number; longitude: number};
     }) => {
       // Create our GeoPoint
       let currentLocationGeoPoint: Parse.GeoPoint = new Parse.GeoPoint(
         currentPosition.coords.latitude,
         currentPosition.coords.longitude,
       );

       // Create our query
       let parseQuery: Parse.Query = new Parse.Query('City');

       // You can also use `withinMiles` and `withinRadians` the same way,
       // but with different measuring unities
       parseQuery.withinKilometers('location', currentLocationGeoPoint, 3000);

       try {
         let results: [Parse.Object] = await parseQuery.find();
         // Set query results to state variable
         setQueryResults(results);
       } catch (error) {
         // Error can be caused by lack of Internet connection
         Alert.alert('Error!', error.message);
       }
     },
     _error => {
       Alert.alert(
         'Error!',
         'This app needs your location permission to query this!',
       );
     },
     {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
   );
   return true;
 };

 const doQueryWithinPolygon = async function (): Promise<boolean> {
   // Create our GeoPoint polygon points
   let geoPoint1: Parse.GeoPoint = new Parse.GeoPoint(
15.822.238.344.514.300,00
-7.242.845.934.415.940,00
   );
   let geoPoint2: Parse.GeoPoint = new Parse.GeoPoint(
     -0.7433770196268968,
-9.744.765.968.406.660,00
   );
   let geoPoint3: Parse.GeoPoint = new Parse.GeoPoint(
-59.997.149.373.299.100,00
-7.652.969.196.322.740,00
   );
   let geoPoint4: Parse.GeoPoint = new Parse.GeoPoint(
-9.488.786.415.007.200,00
-18.346.101.586.021.900,00
   );
   let geoPoint5: Parse.GeoPoint = new Parse.GeoPoint(
15.414.859.532.811.000,00
-6.000.625.459.569.370,00
   );

   // Create our query
   let parseQuery: Parse.Query = new Parse.Query('City');

   // Note that the polygon is merely an array of GeoPoint objects and that the first and last are not connected, so Parse connects them for you
   parseQuery.withinPolygon('location', [
     geoPoint1,
     geoPoint2,
     geoPoint3,
     geoPoint4,
     geoPoint5,
   ]);

   try {
     let results: [Parse.Object] = await parseQuery.find();
     // Set query results to state variable
     setQueryResults(results);
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
   }
 };

 const clearQueryResults = async function (): Promise<boolean> {
   setQueryResults(null);
   return true;
 };

 return (
   <>
     <View style={Styles.header}>
       <Image
         style={Styles.header_logo}
         source={ {
           uri:
             'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
         } }
       />
       <PaperText style={Styles.header_text}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' GeoPoint Queries'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Result List'}</Title>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={result.get('name')}
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>{'Query buttons'}</Title>
         <PaperButton
           onPress={() => doQueryNear()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Near'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryWithinKilometers()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Within KM'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryWithinPolygon()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Within Polygon'}
         </PaperButton>
         <PaperButton
           onPress={() => clearQueryResults()}
           mode="contained"
           icon="delete"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Clear Results'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
});
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 Image,
 View,
 PermissionsAndroid,
 Platform,
 ScrollView,
 StyleSheet,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';
import Geolocation from 'react-native-geolocation-service';

export const QueryList: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);

 // This function asks for location permission on iOS and Android
 const requestLocationPermissions = async () => {
   if (Platform.OS === 'ios') {
     // iOS can be asked always, since the OS handles if user already gave permission
     await Geolocation.requestAuthorization('whenInUse');
   } else if (Platform.OS === 'android') {
     let permissionCheck: boolean = await PermissionsAndroid.check(
       PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
     );
     // Only asks for permission on Android if not given before
     if (permissionCheck !== true) {
       await PermissionsAndroid.request(
         PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
         {
           title: 'Location Permission Request',
           message:
             'This app needs you permission for using your location for querying GeoPoints in Parse!',
           buttonPositive: 'OK',
         },
       );
     }
   }
 };

 const doQueryNear = async function (): Promise<boolean> {
   // Request location permissions
   await requestLocationPermissions();
   // Get current location and create the GeoPoint for the query
   Geolocation.getCurrentPosition(
     async (currentPosition: {
       coords: {latitude: number; longitude: number};
     }) => {
       // Create our GeoPoint
       let currentLocationGeoPoint: Parse.GeoPoint = new Parse.GeoPoint(
         currentPosition.coords.latitude,
         currentPosition.coords.longitude,
       );

       // Create our query
       let parseQuery: Parse.Query = new Parse.Query('City');

       // `near` will order results based on distance between the GeoPoint type field from the class and the GeoPoint argument
       parseQuery.near('location', currentLocationGeoPoint);

       try {
         let results: [Parse.Object] = await parseQuery.find();
         // Set query results to state variable
         setQueryResults(results);
       } catch (error) {
         // Error can be caused by lack of Internet connection
         Alert.alert('Error!', error.message);
       }
     },
     _error => {
       Alert.alert(
         'Error!',
         'This app needs your location permission to query this!',
       );
     },
     {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
   );
   return true;
 };

 const doQueryWithinKilometers = async function (): Promise<boolean> {
   // Request location permissions
   await requestLocationPermissions();
   // Get current location and create the GeoPoint for the query
   Geolocation.getCurrentPosition(
     async (currentPosition: {
       coords: {latitude: number; longitude: number};
     }) => {
       // Create our GeoPoint
       let currentLocationGeoPoint: Parse.GeoPoint = new Parse.GeoPoint(
         currentPosition.coords.latitude,
         currentPosition.coords.longitude,
       );

       // Create our query
       let parseQuery: Parse.Query = new Parse.Query('City');

       // You can also use `withinMiles` and `withinRadians` the same way,
       // but with different measuring unities
       parseQuery.withinKilometers('location', currentLocationGeoPoint, 3000);

       try {
         let results: [Parse.Object] = await parseQuery.find();
         // Set query results to state variable
         setQueryResults(results);
       } catch (error) {
         // Error can be caused by lack of Internet connection
         Alert.alert('Error!', error.message);
       }
     },
     _error => {
       Alert.alert(
         'Error!',
         'This app needs your location permission to query this!',
       );
     },
     {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
   );
   return true;
 };

 const doQueryWithinPolygon = async function (): Promise<boolean> {
   // Create our GeoPoint polygon points
   let geoPoint1: Parse.GeoPoint = new Parse.GeoPoint(
15.822.238.344.514.300,00
-7.242.845.934.415.940,00
   );
   let geoPoint2: Parse.GeoPoint = new Parse.GeoPoint(
     -0.7433770196268968,
-9.744.765.968.406.660,00
   );
   let geoPoint3: Parse.GeoPoint = new Parse.GeoPoint(
-59.997.149.373.299.100,00
-7.652.969.196.322.740,00
   );
   let geoPoint4: Parse.GeoPoint = new Parse.GeoPoint(
-9.488.786.415.007.200,00
-18.346.101.586.021.900,00
   );
   let geoPoint5: Parse.GeoPoint = new Parse.GeoPoint(
15.414.859.532.811.000,00
-6.000.625.459.569.370,00
   );

   // Create our query
   let parseQuery: Parse.Query = new Parse.Query('City');

   // Note that the polygon is merely an array of GeoPoint objects and that the first and last are not connected, so Parse connects them for you
   parseQuery.withinPolygon('location', [
     geoPoint1,
     geoPoint2,
     geoPoint3,
     geoPoint4,
     geoPoint5,
   ]);

   try {
     let results: [Parse.Object] = await parseQuery.find();
     // Set query results to state variable
     setQueryResults(results);
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
   }
 };

 const clearQueryResults = async function (): Promise<boolean> {
   setQueryResults(null);
   return true;
 };

 return (
   <>
     <View style={Styles.header}>
       <Image
         style={Styles.header_logo}
         source={ {
           uri:
             'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
         } }
       />
       <PaperText style={Styles.header_text}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' GeoPoint Queries'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Result List'}</Title>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={result.get('name')}
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>{'Query buttons'}</Title>
         <PaperButton
           onPress={() => doQueryNear()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Near'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryWithinKilometers()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Within KM'}
         </PaperButton>
         <PaperButton
           onPress={() => doQueryWithinPolygon()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Within Polygon'}
         </PaperButton>
         <PaperButton
           onPress={() => clearQueryResults()}
           mode="contained"
           icon="delete"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Clear Results'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
});
﻿
This is how the component should look like after rendering and querying one of the query functions:
﻿
Conclusion
At the end of this guide, you learned how GeoPoint data queries work on Parse and how to perform them on Back4App from a React Native App. In the next guide, you will check how to create and manage users in Parse.
Updated 29 Mar 2024
Did this page help you?
Relational Queries
Join Queries
Geoqueries

Using React Native geolocation to perform geoqueries using Parse

Introduction

Prerequisites

Goal

1 - Understanding the Parse.Query class

2 - Save some data on Back4App

3 - Query the data

4 - Query from a React Native component

Conclusion
