@mythologi/react-native-unity

react-native-unity-play

Thanks to two projects react-native-unity and react-native-unity-view

I collected and modified the code that allows you to embed a UNITY project into the react native as a full-fledged component

EXAMPLE

GOOGLE DRIVE LINK

Getting started

$ npm install react-native-unity-play --save

Before build project in Unity

UNITY VERSION >= 2020.x

iOS

UNITY PLAYER SETTINGS

• Multitasking -> Requires Fullscreen -> no selection set !
• Status Bar -> Status Bar Hidden -> no selection set !

Android

BUILD SETTINGS

• Export project -> selection set !

UNITY PLAYER SETTINGS

• Resolution and Presentation -> Start in fullscreen mode -> no selection set !
• Resolution and Presentation -> Render outside safe area -> no selection set !

Installation

• Install package via npm
• Move your Unity project to unity folder at project root

iOS

• Run pod install
• Build Unity app to [project_root]/unity/builds/ios
• Add Unity-iPhone.xcodeproj to your workspace: Menu -> File -> Add Files to [workspace_name]... -> [project_root]/unity/builds/ios/Unity-iPhone.xcodeproj
• Add UnityFramework.framework to Frameworks, Libraries, and Embedded Content:
  • select your_app target in workspace
  • in General / Frameworks, Libraries, and Embedded Content press +
  • select Unity-iPhone/Products/UnityFramework.framework
  • in Build Phases remove UnityFramework.framework from Linked Frameworks and Libraries ( select it and press - )
  • in Build Phases move Embedded Frameworks before Compile Sources ( drag and drop )

Add following lines to your project main.m file (located at same folder with AppDelegate)

#import <UIKit/UIKit.h>
+++ #import <RNUnity/RNUnity.h>

#import "AppDelegate.h"

int main(int argc, char * argv[]) {
  @autoreleasepool {
    +++ [RNUnity setArgc:argc];
    +++ [RNUnity setArgv:argv];
    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
  }
}

Add following lines to your project AppDelegate.m file

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
+++ #import <RNUnity/RNUnity.h>

+++ - (void)applicationWillResignActive:(UIApplication *)application { [[[RNUnity ufw] appController] applicationWillResignActive: application]; }
+++ - (void)applicationDidEnterBackground:(UIApplication *)application { [[[RNUnity ufw] appController] applicationDidEnterBackground: application]; }
+++ - (void)applicationWillEnterForeground:(UIApplication *)application { [[[RNUnity ufw] appController] applicationWillEnterForeground: application]; }
+++ - (void)applicationDidBecomeActive:(UIApplication *)application { [[[RNUnity ufw] appController] applicationDidBecomeActive: application]; }
+++ - (void)applicationWillTerminate:(UIApplication *)application { [[[RNUnity ufw] appController] applicationWillTerminate: application]; }

@end

Android

• Create directory into android/app/libs

• Copy libs from <project_name>/unity/builds/android/unityLibrary/libs/* to android/app/libs

• Add ndk support into android/app/build.gradle

  defaultConfig {
      ...
      ndk {
          abiFilters "armeabi-v7a", "arm64-v8a"
      }
  }
  

• Append the following lines to android/settings.gradle:

  include ':unityLibrary'
  project(':unityLibrary').projectDir=new File('..\\unity\\builds\\android\\unityLibrary')
  

• Insert the following lines inside the dependencies block in android/app/build.gradle:

    implementation project(':unityLibrary')
    implementation files("${project(':unityLibrary').projectDir}/libs/unity-classes.jar")
  

• Add strings to res/values/strings.xml

  <string name="game_view_content_description">Game view</string>
  <string name="unity_root">unity_root</string>
  

• Update .MainActivity into AndroidManifest.xml

  <application
    ...
    android:extractNativeLibs="true"
  
  <activity
    android:name=".MainActivity"
    ...
    android:configChanges="mcc|mnc|locale|touchscreen|keyboard|keyboardHidden|navigation|orientation|screenLayout|uiMode|screenSize|smallestScreenSize|fontScale|layoutDirection|density"
    android:hardwareAccelerated="true"
  >
  

• Setup minSdkVersion greater than or equal to 21

• Remove <intent-filter>...</intent-filter> from <project_name>/unity/builds/android/unityLibrary/src/main/AndroidManifest.xml at unityLibrary to leave only integrated version.

• Add to android/gradle.properties

  unityStreamingAssets=.unity3d
  

• Add to build.gradle

  allprojects {
      repositories {
          flatDir {
              dirs "$rootDir/app/libs"
          }
  

• <project_name>/unity/builds/android/unityLibrary/src/main/AndroidManifest.xml delete android:icon="@mipmap/app_icon" and android:theme="@style/UnityThemeSelector" if they are installed

Usage

import { StyleSheet, View, Dimensions, Button } from 'react-native'
import UnityView, { UnityModule, UnityResponderView } from 'react-native-unity-play'

const { width, height } = Dimensions.get('window')

const App: () => Node = () => {
  const [isVisible, setVisible] = useState(false)
  let unityElement

  if (Platform.OS === 'android') {
    unityElement = <UnityView style={{ flex: 1 }} />
  } else {
    unityElement = <UnityResponderView fullScreen={true} style={{ width: width, height: height }} />
  }

  return (
    <View>
      {!isVisible && <Button title={'Start'} onPress={() => setVisible(true)} />}
      {isVisible && (
        <>
          {unityElement}
          <View
            style={{
              position: 'absolute',
              top: 45,
              left: 20,
              zIndex: 2,
            }}>
            <Button
              title={'Close'}
              onPress={() => {
                if (Platform.OS === 'android') {
                  UnityModule.quit()
                }
                setVisible(false)
              }}
              style={{ color: '#fff' }}
            />
          </View>
        </>
      )}
    </View>
  )
}