fusetools / react-native-unity-play

Play an unity view in react native

react-native-unity-play

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

Getting started

Before build project in Unity

• UNITY VERSION >= 2020.x

iOS

UNITY PLAYER SETTINGS

1. Multitasking -> Requires Fullscreen -> no selection set !
2. Status Bar -> Status Bar Hidden -> no selection set !
3. Other Settings -> Target SDK -> select Device SDK or Simulator SDK

Android

BUILD SETTINGS

1. Export project -> selection set !

UNITY PLAYER SETTINGS

1. Resolution and Presentation -> Fullscreen Mode -> select Windowed
2. Resolution and Presentation -> Resizable Window -> selection set !
3. Resolution and Presentation -> Hide Navigation Bar -> no selection set !
4. Resolution and Presentation -> Render outside safe area -> no selection set !
5. Other Settings -> Scripting Backend -> select IL2CPP
6. Other Settings -> Target Architectures -> ARM64 -> selection set !

Installation

1. Install package via npm
2. Move your Unity project to unity folder at project root

iOS

1. Run pod install
2. Build Unity app to [project_root]/unity/builds/ios

NB: Remember to build the Xcode project generated by Unity first, because an intact UnityFramework.framework is required to successfully build your workspace afterwards.

3. Add Unity-iPhone.xcodeproj to your workspace: Menu -> File -> Add Files to [workspace_name]... -> [project_root]/unity/builds/ios/Unity-iPhone.xcodeproj
4. 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 )
5. Add Data to Copy Bundle Resources
   • select Unity-iPhone project in workspace
   • select UnityFramework in targets
   • in Build Phases add Data to Copy Bundle Resources

Objective-C

Click to expand!

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

Swift

Click to expand!

Make the following changes to your AppDelegate.swift file

@UIApplicationMain
class AppDelegate: UIApplicationDelegate {
  init() {
    RNUnity.initFromSwift()
  }

  func applicationWillResignActive(_ application: UIApplication) {
    RNUnity.applicationWillResignActive(application)
  }

  func applicationDidEnterBackground(_ application: UIApplication) {
    RNUnity.applicationDidEnterBackground(application)
  }

  func applicationWillEnterForeground(_ application: UIApplication) {
    RNUnity.applicationWillEnterForeground(application)
  }

  func applicationDidBecomeActive(_ application: UIApplication) {
    RNUnity.applicationDidBecomeActive(application)
  }

  func applicationWillTerminate(_ application: UIApplication) {
    RNUnity.applicationWillTerminate(application)
  }
}

Android

1. Create directory into android/app/libs

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

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

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

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

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

5. 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")

6. Add strings to res/values/strings.xml

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

7. 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"
   >

8. Setup minSdkVersion greater than or equal to 21

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

10. Add to android/gradle.properties

    unityStreamingAssets=.unity3d

11. Add to build.gradle

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

12. <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 } from 'react-native-unity-play'

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

const App: () => Node = () => {
  const [isVisible, setVisible] = useState(false)
  return (
    <View>
        {!isVisible && (
          <Button title={'Start'} onPress={() => setVisible(true)} />
        )}
        {isVisible && (
          <UnityView style={{width: width, height: height}}>
            <View
              style={{
                position: 'absolute',
                top: 45,
                left: 20,
                zIndex: 2,
              }}>
              <Button
                title={'Close'}
                onPress={() => {
                  setVisible(false)
                }}
                style={{color: '#fff'}}
              />
            </View>
          </UnityView>
        )}
    </View>
  )
}