Unity Integration in React Native
With varying needs, React Native implementations growing leaps and bounds, it is very important integrate cross platforms
Can we integrate a Unity Project in to a React Native project?
Yes, We can integrate Unity in to React using Native Components for both iOS and Android. So, that we can use the same development of unity in React and also we can communicate from React to Unity.
Install dependencies and set up the project
Create a Unity Project and a React Native Project.
Configuration
Since this project uses the exported data from Unity you will have do some extra configuring than a normal React Native module.
Configuring Unity
To configure Unity to add the exported files somewhere accessible to your app we use some build scripts. And the default configuration expects that you place your Unity Project in the following position relative to our app.
Add Unity Build Scripts
Name two files with Build.cs and XCodePostBuild.cs and place them in unity/< Your Unity Project >/Assets/Scripts/Editor/
PlayerSettings in Unity
1. Open Your Unity Project.
2. Go to Player settings (File => Build Settings => Player Settings)
3. Change Product Name to the name of your Xcode project. (ios/${XcodeProjectName}.xcodeproj)
Additional Changes for Android Platform
Under Other Settings make sure Scripting Backend is set to IL2CPP, and ARM64 is checked under Target Architectures.
Now Unity is configured and ready
Then the exported artifacts will be placed in a folder called UnityExport inside either the android or the ios folder.
Configure Native Build
Android Build
Download UnityExport and put it to android/ (may android source in UnityExport/Unity-iPhone.apk/unityLibrary). Make sure the android/UnityExport contains only libs, src, build.gradle, proguard-unity.txt
To allow for the project to recognize the UnityExport folder you will have to add two lines to android/settings.gradle.
1. Add the following to the android/build.gradle
So it looks like this
2. Add these two lines to android/settings.gradle
3. Update android/app/src/main/res/values/strings.xml
iOS build
Download UnityExport and put it to ios/UnityExport
1. Open your ios/{PRODUCT_NAME}.xcworkspace and add the exported project(ios/UnityExport/Unity-Iphone.xcodeproj) to the workspace root. Right click on Project navigator -> Add Files to project_name… -> Select ios/UnityExport/Unity-iPhone.xcodeproj
2. Select the Unity-iPhone/Data folder and change the Target Membership to UnityFramework
3. Select project_name project -> Select project_name target -> In General -> Add UnityFramework.framework with mode Embed & Sign to Frameworks, Libraris, and Embedded Contain
4. Update Podfile: Update valid architectures to arm64 arm64e
Use in React Native
UnityView Props
OnMessage
Receive messages from Unity Make sure you have added UnityMessageManager
Example:
1. Send message from Unity
UnityMessageManager.Instance.SendMessageToRN(“click”);
2. Receive message in React Native
onUnityMessage
UnityModule
Example Code
Build and run the application