npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-unity-view

v1.3.3

Published

Integrate unity3d within a React Native app. Add a react native component to show unity. Works on both iOS and Android.

Downloads

91

Readme

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

Recommend Clone The Demo Project to Learn API.

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

Preview

gif

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.

image

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.

image

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

image

  1. 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");
  1. 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);
	}
}
  1. Add Unity component to a GameObject.

  2. 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;
}
  1. 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!!!