melbic/react-native-unity-view

Show an unity view in react native

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.

Example

See react-native-unity-demo

Preview

How to use

Install

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

react-native link react-native-unity-view

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.

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.

Use In React Native

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>
    );
}

Methods

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'.
      this.unity.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)

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() {
    if (this.unity) {
      this.unity.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>
    );
}

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!!!