Integrating Parse and React Native for iOS

Adding Location Queries

Querying locations is really easy to do with Parse, since Parse supports a GeoPoint data type and provides API methods to peform a variety of geo-based queries, such as searching for locations within a certain radius.

Go to your Data Browser and add a column named location of type GeoPoint:

You’ll need to add some location data for your initial row.

Double-click in the location field and add 37.277455 for latitude area and -121.937503 for the longitude:

Head back to SearchPage.js and modify getInitialState as follows:

getInitialState: function() {
  return {
    searchString: 'Bay Area',
    isLoading: false,
    message: '',
    queryName: null,
    queryGeo: {},
  };
},

This adds a new queryGeo state to hold location data.

Next, modify _executeQuery to take in location data like so:

_executeQuery: function(nameSearchQuery, geoSearchQuery) {
  this.setState({
    isLoading: true,
    message: '',
    queryName: nameSearchQuery,
    queryGeo: geoSearchQuery,
  });
},

Here, you’ve added an additional parameter for the location-based query and then add whatever’s passed in to the current state.

Next, modify onSearchPressed to pass an empty location to _executeQuery:

onSearchPressed: function() {
  this._executeQuery(this.state.searchString, {});
},

The search button is for when you’re searching by place name rather than by location, which means you can just pass in an empty object for the geoSearchQuery.

Modify onLocationPressed to finally make use of this precious location data by passing it on to _executeQuery:

onLocationPressed: function() {
  navigator.geolocation.getCurrentPosition(
    location => {
      this._executeQuery(
        null,
        {
          latitude: location.coords.latitude,
          longitude: location.coords.longitude,
        }
      );
    },
    error => {
      this.setState({
        message: 'There was a problem with obtaining your locaton: ' + error
      });
  });
},

This time, the updated call to _executeQuery passes in null for the search string and actual coordinates for the geoSearchQuery.

Finally, modify observe to add the location-based search filter:

observe: function(props, state) {
  var listingQuery = (new Parse.Query('Listing')).ascending('price');
  if (state.queryName) {
    listingQuery.equalTo('place_name', state.queryName.toLowerCase());
  } else 
  // 1
  if (state.queryGeo && state.queryGeo.latitude &&
      state.queryGeo.longitude) {
    // 2
    var geoPoint = new Parse.GeoPoint({
        latitude: state.queryGeo.latitude,
        longitude: state.queryGeo.longitude,
    });
    // 3
    listingQuery.withinMiles('location', geoPoint, 25);
  }
  return state.isLoading ? { listings: listingQuery } : null;
},

Taking each numbered comment in turn:

1. Here you check if this is a location query.
2. Next, you create a Parse.GeoPoint based on the location coordinates.
3. Finally, you add a filter for locations within 25 miles of the point of interest.

Before you can test the location-based search, you’ll need to specify a location that will yield results.

From the simulator menu, select Debug\Location\Apple to set your simulated location to a spot near Apple headquarters.

In the simulator, press Cmd+R. Tap Location, permit the app to receive location, then verify that you see the expected result:

Adding More Test Data

The folder you downloaded earlier contains a JSON test data file — Listing.json — that you can import instead of entering your own data.

To import this data go to your Data Browser and perform the following actions:

1. Click Import.
2. Drag Listing.json into the upload area.
3. Make sure the Custom option is selected and click Finish Import.
4. Dismiss the pop-up.

You should receive a confirmation email once it’s done; since you’re importing a very small amount of data, this should happen very quickly.

Once the import is complete, you’ll need to fix the image URLs. These will contain incorrect information and you need to upload the photos yourself. Go to all the newly imported rows and, one by one, delete the existing img_url entry, then upload the corresponding photo from the Media folder.

You’ll notice you have a duplicate for the “Grand mansion” property, since you created it manually and it’s also in the import file. Delete one of the copies to keep things clean.

In your simulator, press Cmd+R, click Location and verify that you see the additional results from your imported test data:

Where to Go From Here?

You can download the completed project here. Remember to update index.ios.js with your own Parse application and Javascript keys so you connect to your own data set!

You’ve only scratched the surface of what you can do with Parse+React; there’s a whole world out there beyond simply fetching data. You can save data and even use the underlying Parse JavaScript SDK APIs to create users and or add Parse analytics. Check out Parse+React on GitHub for more details.

For more information on Parse itself, check out our Parse Tutorial: Getting Started with Web Backends. If you want to hear more about React Native, have a listen at our podcast episode with Nick Lockwood, who works on the React Native team at Facebook.

If you have comments or questions, feel free to share them in the discussion below!