Links

Quickstart in React Native

Integrate the ARwayKit SDK with React Native
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: 2021.3.1f1 or Above (LTS)

Download the ARwayKit SDK

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

Build the Project in Unity

In Unity select File -> Build Settings -> Build -> Select iOS/Android -> Build and Run
Make sure to add the Account ID and Secret Key variables to the Unity project. Follow the guide for Integrating Unity Packages for instructions.

Creating a Blank Project in React Native

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 React Native documentation for installation guidelines using the "React Native CLI".

Configuration

React Native Package

In this project, the package @azesmway/react-native-unity will be used to embed the Unity SDK into React Native.
Add the following package to the React Native project:
npm install @azesmway/[email protected]

Configuring Unity

The default configuration expects the Unity SDK to be in the following position in the React Native app.
.
├── node_modules
├── unity
│ └── <Your Unity Project> // Example: ARwayKit-Unity-SDK
├── App.tsx
├── app.json
├── babel.config.js
├── package.json
└── README.md

Android

  1. 1.
    Export Unity app to [project_root]/unity/builds/android
    1. 1.
      Go to "File -> Build Settings" and change the platform to Android and make sure that "Export Project" is checked.
  2. 2.
    Add the following lines to android/settings.gradle:
    + include ':unityLibrary'
    + project(':unityLibrary').projectDir=new File('..\\unity\\builds\\android\\unityLibrary')
  3. 3.
    Add into android/build.gradle
    allprojects {
    repositories {
    + flatDir {
    + dirs "${project(':unityLibrary').projectDir}/libs"
    + }
    }
    }
  4. 4.
    Add into android/gradle.properties
    + unityStreamingAssets=.unity3d
  5. 5.
    Add strings to android/app/src/main/res/values/strings.xml
    + <string name="game_view_content_description">Game view</string>
  6. 6.
    Remove <intent-filter>...</intent-filter> from <project_name>/unity/builds/android/unityLibrary/src/main/AndroidManifest.xml to leave only integrated version.
  7. 7.
    Copy the file [project_root]/unity/builds/android/local.propertiesto the folder [project_root]/android/
  8. 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. 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. 1.
    Build Unity app to [project_root]/unity/builds/ios
  2. 2.
    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
  3. 3.
    Add UnityFramework.framework to General / section Frameworks, Libraries, and Embedded Content
  4. 4.
    Select Data folder and set a checkbox in the "Target Membership" section to "UnityFramework"
  5. 5.
    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.
  6. 6.
    In Build Phases remove UnityFramework.framework from Linked Binary With Libraries
  7. 7.
    In Build Phases move Embedded Frameworks before Compile Sources ( drag and drop )

Sample Code

Sample code to get started in React Native.
import React, { useRef, useEffect } from 'react';
import UnityView from '@azesmway/react-native-unity';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
interface IMessage {
gameObject: string;
methodName: string;
message: string;
}
function 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>
);
};
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Unity" component={Unity} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;

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
}
}
}