Integrating Parse and React Native for iOS

React Native, introduced at the 2015 Facebook F8 Developer Conference, lets you build native iOS apps using the same concepts found in the popular JavaScript UI library React. The same event also gave us Parse+React, which brings the React view concepts to the data layer.

Parse supports rapid development of your mobile apps by handling your application’s infrastructure needs for you. Parse services include data storage, social integration, push notifications, and analytics, along with client SDKs for various platforms such as iOS, Android, and JavaScript. Parse+React is built on top of the JavaScript SDK and provides hooks into React to make it easy to query and store data on Parse.

In this tutorial, you’ll learn more about React and to use it to build native apps. You’ll build upon the sample PropertyFinder application from our introductory tutorial React Native: Building Apps with JavaScript. Be sure to check out that tutorial for all the React Native basics before continuing on here with integrating Parse.

Getting Started

To get started with the tutorial, download the starter project and unzip it.

This is essentially the same PropertyFinder application with one important difference. Can you spot the difference by looking at some of the JavaScript files?

The original application used ECMAScript 6 (ES6) but the starter project for this tutorial doesn’t. This is because Parse+React relies on mixins to bring Parse functionality into React objects, which isn’t supported for ES6 classes. A future update to React that adds supports for the key observe API will remove the need for using a mixin.

Make sure the React Native pre-requisites are installed. This should be the case if you worked through the previous tutorial.

In v8.0, React Native moved from using Node.js to io.js. If you don’t have io.js installed, set it up via homebrew by executing the following in a Terminal window:

brew unlink node
brew install iojs
brew link iojs --force

This removes node from your path, downloads the latest version of io.js, and tells homebrew to run io.js whenever you run node.

Next, verify that the starter project is set up correctly. Open Terminal, go to the ParseReactNative-PropertyFinder-Starter directory and execute the following command:

npm install

Next, open PropertyFinder.xcodeproj then build and run the project. The simulator will start and display the app’s home page. Test that you’re able to search for UK listings as you did in the previous tutorial:

If everything looks good, then you’re ready to integrate Parse+React with your app.

The Parse+React Structure

The Parse+React layer sits on top of both React Native and the Parse JavaScript SDK:

It’s available via npm or GitHub.

Parse+React brings the same simplicity to your data management that React brings to your view layers. To understand how this works, consider the React component lifecycle shown below:

Parse+React mimics this flow by hooking into your component’s lifecycle. You first set up queries you want to associate with your component. Parse+React then subscribes your component to receive the query results, fetches the data in the background, passes it back to your component and triggers the component’s render cycle like so:

Co-locating the Parse query in your component with the view makes it much easier to understand your code. You can look at your component code and see exactly how the queries tie into the view.

Modeling Your Property Data

In this tutorial you’ll take out the calls to the Nestoria API and replace them with calls to Parse. In the next few sections, you’ll see how to set up Parse to do this.

Creating Your Parse App

The first thing you should do is sign up for a free Parse account if you haven’t done so. Next, go to the Parse Dashboard and click Create a new App:

Name your app PropertyFinder, then click Create. You should see a success note as well as a link to grab your Parse application keys. Click that link and note your Application ID and JavaScript Key. You’ll need these later.

Click Core from the top menu to go to the Data Browser view, where you can see any data stored on Parse for your app. You should see a page stating that you have no classes to display. You’re going to take care of that by creating dummy data to represent property listings that you’ll pull into your app later on in the tutorial.

Defining your Schema

You can use the data displayed in the current PropertyFinder app to figure out what your schema should be.

Open SearchResults.js and examine the renderRow function. Look for the fields from the Nestoria API that display the data. Next, open PropertyView.js and look at the render function to determine if there’s any additional information you’ll need for your schema.

When you’re done, your list of required data elements should match the following:

• img_url
• price_formatted
• title
• property_type
• bedroom_number
• bathroom_number
• summary

Now you need to create a class in Parse with these fields to represent a property listing. In your Parse Data Browser, click Add Class and name your class Listing:

Once you click Create Class, you should see a new Listing class added to the left-hand side. There are other types of classes you can create, such as User, which has some special methods and properties not present in a custom class.

However, your custom class will serve the needs of your app just fine. Think of a Parse class as a database table; the columns you’ll define next are similar in concept to database columns.

Click + Col to add a new column:

Select File from the type selection, enter img_url, then click Create Column:

You should see a new column appear in the header of your class. Parse supports many data types including string, number, boolean, and binary data. Here you’re using the File type to store binary data that represents a property’s image.

Next, add a column to represent the price. To keep things simple, instead of naming the column price_formatted name it price, and select Number for the column type.

Now carry on and create columns for the rest of the fields as follows:

• title: Type String
• property_type: Type String
• bedroom_number: Type Number
• bathroom_number: Type Number
• summary: Type String

Verify that all the columns and their types look like the ones shown below:

You may have noticed some starter columns were already there when you added the class. Here’s what those are for:

• objectId: uniquely identifies a row. This ID is auto-generated.
• createdAt: contains the current timestamp when you add a new row.
• updatedAt: the time you modified a row.
• ACL: contains the permission information for a row. ACL stands for “access control list”.