Quickstart in React Native
Integrate the ARwayKit SDK with React Native
Last updated
Integrate the ARwayKit SDK with React Native
Last updated
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: 2022.3.29f1 LST
Packages:
Steps
Download the ARwayKit SDK project from GitHub as a ZIP. You can for access to the ARwayKit SDK.
Before adding the sample app to React Native, make sure to follow the guide first to get your Unity environment ready.
After copying the folder, your project will appear as below with the nested "NativeCallProxy" files.
Add the following package to the React Native project:
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.
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.
Add the following lines to android/settings.gradle
:
Add into android/build.gradle
Add into android/gradle.properties
Add strings to android/app/src/main/res/values/strings.xml
Remove <intent-filter>...</intent-filter>
from <project_name>/unity/builds/android/unityLibrary/src/main/AndroidManifest.xml
to leave only integrated version.
Copy the file [project_root]/unity/builds/android/local.properties
to the folder [project_root]/android/
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.
Change the following line in unity\builds\android\unityLibrary\src\main\AndroidManifest.xml
.
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
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
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
Add UnityFramework.framework
to General
/ section Frameworks, Libraries, and Embedded Content
Select Data folder and set a checkbox in the "Target Membership" section to "UnityFramework"
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.
In Build Phases
remove UnityFramework.framework from Linked Binary With Libraries
In Build Phases move Embedded Frameworks before Compile Sources ( drag and drop )
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:
Sample code to get started in React Native.
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:
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.