Run Games Within Your React Native Apps
Software Architect & Consultant
Web / Mobile / VR / AR / IoT / Blockchain
Developing games is hard
Rendering
AI
Physics engine
Sound engine
Networking
Concept art
Creative assets
Level design
Animations
Gameplay mechanics
Post processing
Features for mobile
https://unity.com/features/mobile
React Native and native code
React Native and Unity
JS
Native
Unity as a library
Demo
GameObject in Unity
Method name to call
Payload
In Unity
Native iOS Plugin
Unity Native Plugins (iOS)
NativeCallProxy.h
In Unity Project under Assets/Plugins/iOS create two files
Unity Native Plugins (iOS)
NativeCallProxy.mm
Sending message to Native in Unity
ButtonBehavior.cs
public static extern void sendMessageToMobileApp(string message);
NativeAPI.sendMessageToMobileApp("The button has been tapped!");
Assign script to gameObject in Unity and click handler to button in Unity
Receiving message from RN in Unity
We need to parse JSON we receive from RN
RNInterop.cs
RNInterop.cs
RN Integration steps (iOS)
Build Unity Project for iOS into folder within your RN project
unity/builds/ios
Open Xcode workspace of your React Native project
ios/rnunitynative.xcworkspace
right click and add Files to workspace. Select Unity Project
Add UnityFramework to Embedded Frameworks,
Remove UnityFramework from Build Phases Link Binary with Libraries
Drag and drop Embed Frameworks before Compile sources
1. Change Data membership to be UnityFramework
2.Change build products path for UnityFramework to be your RN ios build folder
Do it every time after you build Unity Project
3.Change Native Plugins Target membership to UnityFramework & Public
4.Build UnityFramework separately
Integrate with React Native
Create
ReactNativeUnityViewManager.mm
Expose module to JS
Export view property to be callback
Create separate class for ReactNativeUnityView
Expose postMessage method to JS
Send events to JS
Make sure we run on main thread
UnityFramework API to call method by name
ReactNativeUnityView.mm
Framework wrapper to handle loading and options
Getting back to JS side
Let's get to the cool news.
There is a library for that! 😉
No need to write Native code
Still need to do all the setup and build steps
Now you know how it actually works 🎉
Helpful links
Demo code
Learn unity
Unity Asset store
Questions
Reach out on twitter @vladimirnovick or schedule consulting at vnovick.com
Run Games Within your React Native Apps
By Vladimir Novick
