React Native

React Native

This page show several ways to integrate ARCloud native module to React Native project.


Clone and run sample react native app with ARCloud module bridge.

Step 1 - Clone this git repo

Github - Graffity-Technologies/arcloud-sample-react-native

Step 2 - Put YOUR_ACCESS_TOKEN in ios/ARCloudIos.swift

iOS Bridge

You can learn more about iOS Native Modules (opens in a new tab) from official React Native.

Create an iOS native bridge for the ARCloud package by the following steps:

Step 1 - Open ios folder in Xcode

Step 2 - Add ARCloud view

import GraffityARCloudService
class ARCloudIos : NSObject {
  let graffityARCloud = GraffityARCloud(accessToken: "YOUR_ACCESS_TOKEN")
  static func requiresMainQueueSetup() -> Bool {
    return false
  func open() -> Void {
    DispatchQueue.main.async {
  func _open() -> Void {
    let arCloudVc  = ARCloudUIView(service: graffityARCloud)
    arCloudVc.modalPresentationStyle = .fullScreen
    let controller = RCTPresentedViewController();
    controller?.present(arCloudVc, animated: true, completion: nil)

Step 3 - Create Objective-C bridge to the previous swift

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface RCT_EXTERN_MODULE(ARCloudIos, NSObject)
#import <React/RCTBridgeModule.h>
#import <React/RCTViewManager.h>

React Native

Step 4 - Call the native module in React Native

import { NativeModules } from 'react-native';
const { ARCloudIos } = NativeModules;

Step 5 - Open ARCloud view anywhere with a button

import { NativeModules, Button } from 'react-native';
const { ARCloudIos } = NativeModules;
   title="Open ARCloud"
   onPress={() =>}

Android Bridge

You can learn more about Android Native Modules (opens in a new tab) from official React Native.

Create an Android native bridge for the ARCloud package by the following steps:

Step 1 - Create a custom native module to open ARCloud activity
package ...YOUR PACKAGE...;
import android.content.Intent;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
public class GraffityAndroidModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;
    private Intent intent;
    GraffityAndroidModule(ReactApplicationContext context) {
        reactContext = context;
    public String getName() {
        return "GraffityAndroidModule";
    public void openARActivity() {
        intent = new Intent(reactContext, ARCloudActivity.class);

Step 2 - Register the module by using ReactPackage
package ...YOUR PACKAGE...;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class GraffityARPackage implements ReactPackage {
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new GraffityAndroidModule(reactContext));
        return modules;

Step 3 - Create the button in React Native to open the registered module

import React from 'react';
import { NativeModules, Button } from 'react-native';
const { GraffityAndroidModule } = NativeModules;
export const AndroidModuleButton = () => {
  const onPress = () => {
  return (
      title="Open AR Android"

React Native Common Errors

  • Xcode node command not found - make sure you have node installed in your machine before running the command below:
ln -s $(which node) /usr/local/bin/node
  • enum clockid_t error - make sure you have no empty space in your $PWD path
// DO
// DON'T - somehow it got this error when space in your path
/Users/John Doe/React Project/ArApp