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.
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)
Steps
- 1.Download the ARwayKit SDK project from GitHub as a ZIP. You can contact us for access to the ARwayKit SDK.
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.
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".
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]
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
- 1.Export Unity app to
[project_root]/unity/builds/android- 1.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.gradleallprojects {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.xmlto 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.gradlematches 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- 1.Build Unity app to
[project_root]/unity/builds/ios - 2.Add
Unity-iPhone.xcodeprojto 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.Add
UnityFramework.frameworktoGeneral/ sectionFrameworks, Libraries, and Embedded Content - 4.Select Data folder and set a checkbox in the "Target Membership" section to "UnityFramework"
- 5.You need to select the NativeCallProxy.h inside the
Unity-iPhone/Libraries/Plugins/iOSfolder of the Unity-iPhone project and change UnityFramework’s target membership from Project to Public. - 6.In
Build Phasesremove UnityFramework.framework fromLinked Binary With Libraries - 7.In Build Phases move Embedded Frameworks before Compile Sources ( drag and drop )
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;
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
}
}
}