react-native-unity-view

Integrate unity3d within a React Native app. Add a react native component to show unity. Works on both iOS and Android. Supports React Native 0.60.0 Auto-Linking for Android & iOS

Example

See react-native-unity-demo

Recommend Clone The Demo Project to Learn API.

Make sure you run the Demo properly before opening the Issue.

Preview

How to use

Install

npm install react-native-unity-view --save

Modify Pod file and add script

 post_install do |installer|
   installer.pods_project.targets.each do |target|
     if target.name == 'RNUnityView'
       target.build_configurations.each do |config|
         config.build_settings['HEADER_SEARCH_PATHS'] ||= "$(inherited)"\
                                                          " $(PODS_ROOT)/../../node_modules/React/**"\
                                                          " $(PODS_ROOT)/../../node_modules/react-native/React/**"\
                                                          " $(PODS_ROOT)/../UnityExport/Classes"\
                                                          " $(PODS_ROOT)/../UnityExport/Classes/Unity"\
                                                          " $(PODS_ROOT)/../UnityExport/Libraries"\
                                                          " $(PODS_ROOT)/../UnityExport/Libraries/libil2cpp/include"\
                                                          " $(PODS_ROOT)/../UnityExport/Libraries/bdwgc/include"
       end
     end
   end
 end

Add Unity Project

1. Create an unity project, Example: 'Cube'.
2. Create a folder named unity in react native project folder.
3. Move unity project folder to unity folder.

Now your project files should look like this.

.
├── android
├── ios
├── unity
│   └── <Your Unity Project>    // Example: Cube
├── node_modules
├── package.json
├── README.md

Configure Player Settings

1. First Open Unity Project.

2. Click Menu: File => Build Settings => Player Settings

3. Change Product Name to Name of the Xcode project, You can find it follow ios/${XcodeProjectName}.xcodeproj.

IOS Platform:

Other Settings find the Rendering part, uncheck the Auto Graphics API and select only OpenGLES2.

Add Unity Build Scripts and Export

Copy Build.cs and XCodePostBuild.cs to unity/<Your Unity Project>/Assets/Scripts/Editor/

Open your unity project in Unity Editor. Now you can export unity project with Build/Export Android or Build/Export IOS menu.

Android will export unity project to android/UnityExport.

IOS will export unity project to ios/UnityExport.

Add UnityMessageManager Support

Copy UnityMessageManager.cs to your unity project.

Copy Newtonsoft.Json to your unity project.

Copy link.xml to your unity project.

Configure Native Build

Android Build

Make alterations to the following files:

• android/settings.gradle

...
include ":UnityExport"
project(":UnityExport").projectDir = file("./UnityExport")

IOS Build

1. Open your react native project in XCode.

2. Copy File UnityConfig.xcconfig to ios/${XcodeProjectName}/.

3. Drag UnityConfig.xcconfig to XCode. Choose Create folder references.

4. Setting .xcconfig to project.

4. Go to Targets => Build Settings. Change Dead Code Stripping to YES.

5. Modify main.m

#import "UnityUtils.h"

int main(int argc, char * argv[]) {
  @autoreleasepool {
    InitArgs(argc, argv);
    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
  }
}

Do not run in the simulator

Use In React Native

UnityView Props

onMessage

Receive message from unity.

Please copy UnityMessageManager.cs to your unity project and rebuild first.

Example:

1. Send Message use C#.

UnityMessageManager.Instance.SendMessageToRN("click");

2. Receive Message in javascript

onMessage(event) {
    console.log('OnUnityMessage: ' + event.nativeEvent.message);    // OnUnityMessage: click
}

render() {
    return (
        <View style={[styles.container]}>
            <UnityView
                style={style.unity}
                onMessage={this.onMessage.bind(this)}
            />
        </View>
    );
}

onUnityMessage

[Recommended]Receive json message from unity.

onUnityMessage(handler) {
    console.log(handler.name); // the message name
    console.log(handler.data); // the message data
    setTimeout(() => {
      // You can also create a callback to Unity.
      handler.send('I am callback!');
    }, 2000);
}

render() {
    return (
        <View style={[styles.container]}>
            <UnityView
                style={style.unity}
                onUnityMessage={this.onMessage.bind(this)}
            />
        </View>
    );
}

UnityModule

import { UnityModule } from 'react-native-unity-view';

isReady(): Promise<boolean>

Return whether is unity ready.

createUnity(): Promise<boolean>

Manual init the Unity. Usually Unity is auto created when the first view is added.

postMessage(gameObject: string, methodName: string, message: string)

Send message to unity.

• gameObject The Name of GameObject. Also can be a path string.
• methodName Method name in GameObject instance.
• message The message will post.

Example:

1. Add a message handle method in MonoBehaviour.

public class Rotate : MonoBehaviour {
    void handleMessage(string message) {
		Debug.Log("onMessage:" + message);
	}
}

2. Add Unity component to a GameObject.

3. Send message use javascript.

onToggleRotate() {
    if (this.unity) {
      // gameobject param also can be 'Cube'.
      UnityModule.postMessage('GameObject/Cube', 'toggleRotate', 'message');
    }
}

render() {
    return (
        <View style={[styles.container]}>
            <UnityView
                ref={(ref) => this.unity = ref}
                style={style.unity}
            />
            <Button label="Toggle Rotate" onPress={this.onToggleRotate.bind(this)} />
        </View>
    );
}

postMessageToUnityManager(message: string | UnityViewMessage)

Send message to UnityMessageManager.

Please copy UnityMessageManager.cs to your unity project and rebuild first.

Same to postMessage('UnityMessageManager', 'onMessage', message)

This is recommended to use.

• message The message will post.

Example:

1. Add a message handle method in C#.

void Awake()
{
    UnityMessageManager.Instance.OnMessage += toggleRotate;
}

void onDestroy()
{
    UnityMessageManager.Instance.OnMessage -= toggleRotate;
}

void toggleRotate(string message)
{
    Debug.Log("onMessage:" + message);
    canRotate = !canRotate;
}

2. Send message use javascript.

onToggleRotate() {
    UnityModule.postMessageToUnityManager('message');
}

render() {
    return (
        <View style={[styles.container]}>
            <UnityView
                ref={(ref) => this.unity = ref}
                style={style.unity}
            />
            <Button label="Toggle Rotate" onPress={this.onToggleRotate.bind(this)} />
        </View>
    );
}

addMessageListener(listener: (message: string | MessageHandler) => void): number

Receive string and json message from unity.

addStringMessageListener(listener: (message: string) => void): number

Only receive string message from unity.

addUnityMessageListener(listener: (handler: MessageHandler) => void): number

Only receive json message from unity.

pause()

Pause the unity player.

Thanks @wezzle. See #13

resume()

Resume the unity player.

Example Code

import React from 'react';
import { StyleSheet, Image, View, Dimensions } from 'react-native';
import UnityView from 'react-native-unity-view';

export default class App extends React.Component<Props, State> {
    render() {
    return (
      <View style={styles.container}>
        <UnityView style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, }} /> : null}
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

Enjoy!!!