Quick Start
React Native

React Native

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

TL;DR

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

ARCloudIos.swift
import GraffityARCloudService
 
@objc(ARCloudIos)
class ARCloudIos : NSObject {
  let graffityARCloud = GraffityARCloud(accessToken: "YOUR_ACCESS_TOKEN")
  
  @objc
  static func requiresMainQueueSetup() -> Bool {
    return false
  }
  
  @objc
  func open() -> Void {
    DispatchQueue.main.async {
      self._open()
    }
  }
  
  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

ARCloudIos.m
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
 
@interface RCT_EXTERN_MODULE(ARCloudIos, NSObject)
 
RCT_EXTERN_METHOD(open)
 
@end
tabsapp-Bridging-Header.h
#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;
 
...
 
<Button
   title="Open ARCloud"
   onPress={() => ARCloudIos.open()}
/>

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

GraffityAndroidModule.java
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;
import com.graffity.arcloud.ar.ARCloudActivity;
 
public class GraffityAndroidModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;
    private Intent intent;
 
    GraffityAndroidModule(ReactApplicationContext context) {
        super(context);
        reactContext = context;
    }
 
    @Override
    public String getName() {
        return "GraffityAndroidModule";
    }
 
    @ReactMethod
    public void openARActivity() {
        intent = new Intent(reactContext, ARCloudActivity.class);
        intent.setFlags((Intent.FLAG_ACTIVITY_NEW_TASK));
        reactContext.startActivity(intent);
    }
}

Step 2 - Register the module by using ReactPackage

GraffityARPackage.java
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 {
 
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
 
    @Override
    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

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

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
/Users/JohnDoe/ReactProject/ArApp
 
// DON'T - somehow it got this error when space in your path
/Users/John Doe/React Project/ArApp
Android SDKFlutter