How to make an ARKit app in 5 minutes using React Native

In WWDC 2017 Apple released ARKit, following Google and Facebook into Augmented Reality. This is a big move since the almost-everywhere iPhone will become the first widespread AR device. Developers will have a chance to test their AR products on the public. It is also an amazing thing that any personal developers can use ARKit to write their own AR app.

Apple has made ARKit very easy to use, but it still requires quite a lot of efforts to properly set it up and run the first demo, especially for those who are not very familiar with 3D programming. What we are going to show you in this article is, with the help of React Native and react-native-arkit, you can skip the non-trivial setting-ups and will be able to write your AR app in just 5 minutes.

I will not go into the details of how ARKit works because they are not necessary. Probably the best way to understand it is to have it running on your iPhone and see the results with your eyes. Afterward, if you are interested in its mechanism, you can refer to the official ARKit documentation for the tech details.

Prerequisites

1. iOS 11 beta, Xcode 9 beta, and devices with A9+ processors

ARKit is still in beta stage so you need to have an Apple developer account and upgrade your iPhone/iPad to iOS 11 beta. If you haven’t done yet, please enroll in Apple Beta Software Program and follow this instruction to upgrade your device.

Note: ARKit requires A9 or later processors, which means you need to have iPhone 6s/7/SE or iPad 2017/Pro.

You also need to install Xcode 9 beta to build the ARKit app. Please download it from here.

2. React Native

Facebook introduced React Native as a cross-platform library for developing iOS/Android app using JavaScript. If this is your first time using it, please go to the Getting Started and follow the Building Projects with Native Code part to install React Native and run the first demo. You also want to know how to Run React Native Apps On Devices since you cannot run ARKit on simulators. Following these tutorials should take you no more than half an hour.

Run the first ARKit app

Now its time to write our first ARKit app! Go through the instructions below and most of them should be straightforward.

  • Create a new React Native project and install react-native-arkit
react-native init MyFirstARKitApp
cd MyFirstARKitApp
npm install --save react-native-arkit
  • Link react-native-arkit so that we can call native codes using JavaScript
react-native link react-native-arkit
  • Open index.ios.js and replace everything with the following
// index.ios.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import { ARKit } from 'react-native-arkit';
export default class App extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<ARKit
style={{ flex: 1 }}
debug // debug mode will show feature points detected and 3D axis
planeDetection // turn on plane detection
lightEstimation // turn on light estimation
>
<ARKit.Box
pos={{ x: 0, y: 0, z: 0 }}
shape={{ width: 0.1, height: 0.1, length: 0.1, chamfer: 0.01 }}
/>
</ARKit>
</View>
);
}
}
AppRegistry.registerComponent('MyFirstARKitApp', () => App);
  • Go to the ios folder and make sure to use Xcode 9 beta to open MyFirstARKitApp.xcodeproj. ARKit will use the camera to record, analyze, and display the reality, so we need to add a privacy setting to give it the access. Open Info.plist and add the Privacy — Camera Usage Description key with a reminder to the users such as “ARKit requires camera access.”
  • In Xcode, press <Cmd> + <Shift> + ,, select the Building Configuration to be Release, and close the popup dialog. Connect your iPhone to the computer and click the Run button. Voila! We just made our first ARKit app!

Open the app and wait for a few seconds to allow ARKit to initialize. Then you should be able to see a cube attached to a 3D axis floating in front of you. You can move your iPhone a little bit, and see the cube staying fixed in the space, as it does exist in the reality. This is the main feature of ARKit. It achieves this basically because it has an algorithm to track your iPhone’s motion and back-calculate where to display the object on the screen so that it feels like the object is staying at a fixed position in the reality.

Something more

Now we can add more objects into the scene. ARKit supports 9 basic geometries. Open index.ios.js and modify the ARKit component

<ARKit
style={{ flex: 1 }}
debug
planeDetection
lightEstimation
>
<
ARKit.Box
pos={{ x: 0, y: 0, z: 0 }}
shape={{ width: 0.1, height: 0.1, length: 0.1, chamfer: 0.01 }}
/>
<
ARKit.Sphere
pos={{ x: 0.2, y: 0, z: 0 }}
shape={{ radius: 0.05 }}
/>
<
ARKit.Cylinder
pos={{ x: 0.4, y: 0, z: 0 }}
shape={{ radius: 0.05, height: 0.1 }}
/>
<
ARKit.Cone
pos={{ x: 0, y: 0.2, z: 0 }}
shape={{ topR: 0, bottomR: 0.05, height: 0.1 }}
/>
<
ARKit.Pyramid
pos={{ x: 0.2, y: 0.15, z: 0 }}
shape={{ width: 0.1, height: 0.1, length: 0.1 }}
/>
<
ARKit.Tube
pos={{ x: 0.4, y: 0.2, z: 0 }}
shape={{ innerR: 0.03, outerR: 0.05, height: 0.1 }}
/>
<
ARKit.Torus
pos={{ x: 0, y: 0.4, z: 0 }}
shape={{ ringR: 0.06, pipeR: 0.02 }}
/>
<
ARKit.Capsule
pos={{ x: 0.2, y: 0.4, z: 0 }}
shape={{ capR: 0.02, height: 0.06 }}
/>
<
ARKit.Plane
pos={{ x: 0.4, y: 0.4, z: 0 }}
shape={{ width: 0.1, height: 0.1 }}
/>
</
ARKit>

Rebuild the app and you will be able to see the 9 geometries in front of you. I believe those parameters are quite self-explanatory and you are welcome to play with them to construct a fancier composite object.

The other two big features ARKit has is plane detection and light estimation. They are also supported by react-native-arkit. Our first app is actually doing those in the background. Try switching between bright and dark environments and you will see the lighting of the objects is adapting to the background. However, for plane detection we need some extra work to set it up, and I’ll explain how to do it in the next article.

I hope you are happy playing with ARKit so far. It is really simple right? I am still working on porting more features of ARKit into react-native-arkit, and some more effects such as Transmission Gate and Physically Based Rendering will be possible in React Native very soon. I will post further tutorial articles to show how to implement them. You are also welcomed to check my GitHub repo for the most recent updates.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.