ARwayKit SDK
❱ HOMEPAGE⚎ DEVELOPER PORTAL
  • Introduction
  • Change Log
  • FAQ
  • ARWAY SDK
    • Getting Started
    • Building from the Source Code
    • Integrating the Unity Package
    • Managing App Localizations
      • Enabling Right-to-Left (RTL) Text
    • Sample Scenes
      • Dashboard
      • AR Map Session
    • Branding the Sample App
      • Replacing ARway Logos in the Sample App
    • Third Party
    • SDK Upgrade Guide
      • 3.1.0 -> 3.1.4
      • 3.0.1 -> 3.1.0
      • 3.0.0 -> 3.0.1
      • 2.5.1 -> 3.0.0
      • 2.3.1 -> 2.5.1
      • 2.3 -> 2.3.1
    • Enhancing the Sample App
      • Instant Location Pin Navigation
      • Customizing the Default Navigation Arrow
      • Initializing AR Using an IAP
  • Maps Studio
    • Overview
    • Maps Studio
      • Creating a Map
      • Editing Map Details
      • Uploading Content
      • QR Codes
      • Image Access Points (IAPs)
      • Floorplans
      • Using the Editor
      • Occlusion
      • Analytics
  • ARwayKit SDK Integrations
    • Flutter
      • Quickstart in Flutter
    • React Native
      • Quickstart in React Native
    • Android Kotlin
      • Quickstart in Android Kotlin
    • Android Java
      • Quickstart in Android Java
    • iOS Swift
      • Quickstart in iOS Swift
  • Deep Linking
    • What is Deep Linking?
    • Creator Portal Changes
    • Modifying the SDK
    • Configuring Server Files
  • DEVELOPER FEEDBACK
    • Support
Powered by GitBook
On this page
  • Installed Versions
  • Download the ARwayKit SDK
  • Build the Project in Unity
  • Adding Folder from react-native-unity
  • Creating a Blank Project in React Native
  • Configuration
  • React Native Package
  • Configuring Unity
  • Android
  • iOS
  • Sample Code
  • Extras:
  1. ARwayKit SDK Integrations
  2. React Native

Quickstart in React Native

Integrate the ARwayKit SDK with React Native

PreviousReact NativeNextAndroid Kotlin

Last updated 10 months ago

In this quickstart guide, we will be integrating the ARwayKit SDK in React Native with the CLI.

Installed Versions

In this guide, we will be using the following versions of React, React Native, and Unity:

  • React version: 18.2.0

  • React-Native: 0.71.4

  • Unity: 2022.3.29f1 LST

  • Packages:

Download the ARwayKit SDK

Steps

  1. Download the ARwayKit SDK project from GitHub as a ZIP. You can for access to the ARwayKit SDK.

Build the Project in Unity

Before adding the sample app to React Native, make sure to follow the guide first to get your Unity environment ready.

Make sure to add the Account ID and Secret Key variables to the Unity project. Follow the guide for for instructions.

Adding Folder from react-native-unity

After copying the folder, your project will appear as below with the nested "NativeCallProxy" files.

.
├── unity-viewer-sdk-3.1.4
│   └── Assets
│       └── Plugins
│           └── iOS
│               └── NativeCallProxy.h
│               └── NativeCallProxy.mm
│   └── Library
│   └── Logs
│   └── Packages
│   └── Project Settings
│   └── UserSettings

Creating a Blank Project in React Native

Configuration

React Native Package

Add the following package to the React Native project:

npm install @azesmway/react-native-unity@0.4.0

Configuring Unity

The default configuration expects the Unity SDK to be in the following position in the React Native app. Move the Unity project into the below location in the React Native folder. You will need to create the folder "unity" and then paste the Unity project inside.

.
├── node_modules
├── unity
│   └── <Your Unity Project>    // Example: unity-viewer-sdk-3.1.4
├── App.tsx
├── app.json
├── babel.config.js
├── package.json
└── README.md

Android

  1. Export Unity app to [project_root]/unity/builds/android

    • Go to "File -> Build Settings" and change the platform to Android and make sure that "Export Project" is checked.

  2. Add the following lines to android/settings.gradle:

    + include ':unityLibrary'
    + project(':unityLibrary').projectDir=new File('..\\unity\\builds\\android\\unityLibrary')
  3. Add into android/build.gradle

    allprojects {
      repositories {
    +   flatDir {
    +     dirs "${project(':unityLibrary').projectDir}/libs"
    +   }
      }
    }
  4. Add into android/gradle.properties

    + unityStreamingAssets=.unity3d
  5. Add strings to android/app/src/main/res/values/strings.xml

    + <string name="game_view_content_description">Game view</string>
  6. Remove <intent-filter>...</intent-filter> from <project_name>/unity/builds/android/unityLibrary/src/main/AndroidManifest.xml to leave only integrated version.

  7. Copy the file [project_root]/unity/builds/android/local.propertiesto the folder [project_root]/android/

  8. Ensure that the minSdkVersion in android/build.gradle matches the minimum API level set in the ARwayKit Unity SDK. By default, the minimum is 24.

  9. Change the following line in unity\builds\android\unityLibrary\src\main\AndroidManifest.xml.

- <provider android:name="androidx.core.content.FileProvider" android:authorities="com.arway.sdkviewer.unitywebview.fileprovider" android:exported="false" android:grantUriPermissions="true">
+ <provider android:name="androidx.core.content.FileProvider" android:authorities="com.reactnativearwaysdk.fileprovider" android:exported="false" android:grantUriPermissions="true">

In the code above,com.arway.sdkviewer.unitywebview is replaced with com.reactnativearwaysdk. The new package name should match the namespace of your React Native package which can be found in theandroid/app/build.gradle

iOS

  1. Build the ARwayKit SDK from Unity File -> Build Settings -> Change Platform to iOS -> click Build on the bottom to the following folder in the React Native app [project_root]/unity/builds/ios

  2. After building the project, make sure that the pods are installed.

    • Go to your React Native folder, then go to ios then type pod install

  3. Add Unity-iPhone.xcodeproj to your XCode: press the right mouse button in the Left Navigator XCode -> Add Files to [project_name]... -> [project_root]/unity/builds/ios/Unity-iPhone.xcodeproj

  4. Add UnityFramework.framework to General / section Frameworks, Libraries, and Embedded Content

  5. Select Data folder and set a checkbox in the "Target Membership" section to "UnityFramework"

  6. You need to select the NativeCallProxy.h inside the Unity-iPhone/Libraries/Plugins/iOS folder of the Unity-iPhone project and change UnityFramework’s target membership from Project to Public.

    • This is required for the communication between React Native and Unity.

  7. In Build Phases remove UnityFramework.framework from Linked Binary With Libraries

  8. In Build Phases move Embedded Frameworks before Compile Sources ( drag and drop )

  9. In the React Native project, open the ios/{APP_NAME}/Info.plist and change the following key and string value to the <dict> to request authorization to the camera:

         <dict>
    +        <key>NSCameraUsageDescription</key> 
    +        <string>Used for AR Content and mapping</string> 
    +        <key>NSLocationWhenInUseUsageDescription</key> 
    +        <string>Used to attach maps with global coordinates and public map searching</string> 
    +        <key>NSMicrophoneUsageDescription</key> 
    +        <string>Used for creating audio content</string> 
    +        <key>NSPhotoLibraryAddUsageDescription</key> 
    +        <string>The app requires access to Photos to save media to it.</string> 
    +        <key>NSPhotoLibraryUsageDescription</key> 
    +        <string>The app requires access to Photos to interact with it.</string> 
         </dict>

Sample Code

Sample code to get started in React Native.

App.tsx
import React, {useRef, useEffect} from 'react';
import {View} from 'react-native';
import UnityView from '@azesmway/react-native-unity';
 
interface IMessage {
  gameObject: string;
  methodName: string;
  message: string;
}
 
const Unity = () => {
  const unityRef = useRef();
  const message: IMessage = {
    gameObject: 'GameObject',
    methodName: 'MessageRN',
    message: 'Send a message to Unity',
  };
 
  useEffect(() => {
    setTimeout(() => {
      if (unityRef && unityRef.current) {
        // @ts-ignore
        unityRef.current.postMessage(
          message.gameObject,
          message.methodName,
          message.message,
        );
      }
    }, 6000);
  }, []);
 
  return (
    <View style={{flex: 1}}>
     <UnityView
        // @ts-ignore
        ref={unityRef}
        style={{flex: 1}}
        onUnityMessage={result =>
          console.log('onUnityMessage', result.nativeEvent.message)
        }
      />
    </View>
  );
};
 
export default Unity;

Extras:

Here are some extra methods and APIs which you can implement to communicate to and from Unity.

OnEvent in Unity

Add this code to the ARwayKit Unity SDK:

using System;
using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine.UI;
using UnityEngine;

public class NativeAPI {
#if UNITY_IOS && !UNITY_EDITOR
  [DllImport("__Internal")]
  public static extern void sendMessageToMobileApp(string message);
#endif
}

public class ButtonBehavior : MonoBehaviour
{
  public void ButtonPressed()
  {
    if (Application.platform == RuntimePlatform.Android)
    {
      using (AndroidJavaClass jc = new AndroidJavaClass("com.azesmwayreactnativeunity.ReactNativeUnityViewManager"))
      {
        jc.CallStatic("sendMessageToMobileApp", "The button has been tapped!");
      }
    }
    else if (Application.platform == RuntimePlatform.IPhonePlayer)
    {
#if UNITY_IOS && !UNITY_EDITOR
      NativeAPI.sendMessageToMobileApp("The button has been tapped!");
#endif
    }
  }
}

To communicate between React Native and the Unity layer, you will need to copy the folder from the package repo and paste it into the ARwayKit SDK "Assets" folder.

If you have already created a React Native project, you may skip the installation instructions and proceed with the next steps. Otherwise, kindly refer to the for installation guidelines using the "React Native CLI".

In this project, the package will be used to embed the Unity SDK into React Native.

@azesmway/react-native-unity@0.4.0
contact us
Building from the Source Code
Building from the Source Code
"Plugins"
react-native-unity
React Native documentation
@azesmway/react-native-unity