{"_id":"@abhishekdragon/react-native-unity-view","_rev":"1-390a77d9f9e9280afe4af771621035b0","name":"@abhishekdragon/react-native-unity-view","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abhishekdragon/react-native-unity-view","title":"React Native Unity View","version":"1.0.0","description":"Embed Unity Player inside a React Native app","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"rimraf dist/ && tsc"},"repository":{"type":"git","url":"git+https://github.com/kuabhish/react-native-unity-view.git","baseUrl":"https://github.com/kuabhish/react-native-unity-view"},"keywords":["react-native"],"author":{"name":"Abhishek kumar","email":"abhi.vickycool@gmail.com"},"license":"MIT","licenseFilename":"LICENSE","peerDependencies":{"react":"^16.8.1","react-native":">=0.60.0"},"devDependencies":{"@types/prop-types":"^15.7.3","@types/react":"^16.9.9","react":"^16.8.3","react-native":"^0.60.0","rimraf":"^3.0.0","typescript":"^3.6.4"},"bugs":{"url":"https://github.com/kuabhish/react-native-unity-view/issues"},"homepage":"https://github.com/kuabhish/react-native-unity-view#readme","directories":{"doc":"docs"},"dependencies":{},"gitHead":"28bdcd33ea78a4ff1bf5bd1bb1ac1aa40459f8f0","_id":"@abhishekdragon/react-native-unity-view@1.0.0","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-m/TnvZMzSJPC62XA/q042YwLx8DRcJII+1EibNGrzPQPTl4curOl6g65Mxd6KdnXoNdVAL0KPEoolM5w1mnSBA==","shasum":"eb91c0a98de2eea714321a370f56892a005bc3e4","tarball":"https://registry.npmjs.org/@abhishekdragon/react-native-unity-view/-/react-native-unity-view-1.0.0.tgz","fileCount":71,"unpackedSize":549826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKotoCRA9TVsSAnZWagAAbKcP/jrKbliV9NHv9XGLFV0a\nHzQezhT3MQ83s0OAB12OxMOFUlDkZe9qOOaOBWXB8hdwdLKp2q6sUCqe+e/n\nlKFaI734YEvbsG0wsUXELqdelEcorvXJIQCuWyXzaOPmS6LYzNMLpjIvWxP2\nbFZs8bEsAJkJ8SOnvhWeVA7HXOtjoKnhOQ6hlUZkO+DvC9U4iVpTbWU8Umss\nB2sWDvY/Bvk/JJozS4IMXGgi8hfAMaBBHp2DOrnB+aXKrbgQtaJBAgAkUWOi\nPXv2OA9mKwaM2R+P6DZsGwv+V/Ji/xOhd9bUMt/szjynQ4HJcFOrWbl1y+MR\nLk823x+YhQdFHPwrLReZ53eZ1hHBp75JGZDa3Q0e7oZXhLgQx1zJ4Y4SHros\nj30O2gHWyIxkfyzE29vL2KVfDyiFy5aYZnXaAPpssLjj3MMxBTpDT88YZkHN\nmyqOd68vilBfZywUDRyEBXAGlp31f1vNWdFHQWhPa/PWFTrosmZyJwKNY9iG\nMRbuRxsBcSOUYqRutJ4BZX0ux5z0MFxHNKoTyYbm5xL7xYMPiB6FnPBYTxOb\nyoJCHl8HfFvTmkn94eHdOuYV3RnZpelE1xt/4/8tSjoil676M3B3dX3B8uKE\nUXSJSkTUl5x+/l7g86xSb/Opkhr17nnP6zUlH9fUxbz5W7FKDCHWBMRr3s47\nsmoU\r\n=5Psx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1dJgjzXsAxAqFboJKf3nFzHqB7973CIMLb5zLsDZ02AiA3TyxVQOhoM2bWMKY4Omvv05Gne8QYPZCApc0WRTXCjQ=="}]},"_npmUser":{"name":"abhishekdragon","email":"abhi.vickycool@gmail.com"},"maintainers":[{"name":"abhishekdragon","email":"abhi.vickycool@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-unity-view_1.0.0_1630178151948_0.6958694372489949"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-28T19:15:51.913Z","1.0.0":"2021-08-28T19:15:52.134Z","modified":"2022-04-04T10:59:23.329Z"},"maintainers":[{"name":"abhishekdragon","email":"abhi.vickycool@gmail.com"}],"description":"Embed Unity Player inside a React Native app","homepage":"https://github.com/kuabhish/react-native-unity-view#readme","keywords":["react-native"],"repository":{"type":"git","url":"git+https://github.com/kuabhish/react-native-unity-view.git","baseUrl":"https://github.com/kuabhish/react-native-unity-view"},"author":{"name":"Abhishek kumar","email":"abhi.vickycool@gmail.com"},"bugs":{"url":"https://github.com/kuabhish/react-native-unity-view/issues"},"license":"MIT","readme":"# react-native-unity-view\r\n\r\nIntegrate unity3d within a React Native app. Add a react native component to show unity. Works on both iOS and Android.\r\n\r\n__*If you're using a Unity version older than 2019.3 you can only export to android*__\r\n\r\n## Notice\r\n\r\nThis is a fork of [https://github.com/f111fei/react-native-unity-view](https://github.com/f111fei/react-native-unity-view)\r\nto make it work with React Native >= 0.60.\r\n\r\n**This project may or may not be updated depending on the further use of it at my workplace, however feel free to fork it** \r\n\r\n## Install\r\n\r\n`yarn add @asmadsen/react-native-unity-view`\r\n\r\n## Configuration\r\n\r\nSince this project uses the exported data from Unity you will have do some extra configuring than a normal React Native module.\r\n\r\n### Configuring Unity\r\n\r\nTo configure Unity to add the exported files somewhere accessible to your app we use some build scripts. And the default\r\nconfiguration expects that you place your Unity Project in the following position relative to our app.\r\n\r\n```\r\n.\r\n├── android\r\n├── ios\r\n├── unity\r\n│   └── <Your Unity Project>    // Example: Cube\r\n├── node_modules\r\n├── package.json\r\n└── README.md\r\n```\r\n\r\n#### Add Unity Build scripts\r\n\r\nCopy [Build.cs](/template/Build.cs) and [XCodePostBuild.cs](/template/XCodePostBuild.cs) and place them in \r\n`unity/<Your Unity Project>/Assets/Scripts/Editor/`\r\n\r\n*If you want to place your Unity Project somewhere else you will have to change the following paths which is relative to\r\nthe Untiy Project*\r\n\r\n* [Line 21: Build.cs](template/Build.cs#L21)\r\n* [Line 65: Build.cs](template/Build.cs#L65)\r\n* [Line 56: XCodePostBuild.cs](template/XCodePostBuild.cs#L56)\r\n\r\n#### Player Settings\r\n\r\n1. Open your Unity Project\r\n2. Go to Player settings (File => Build Settings => Player Settings)\r\n3. Change `Product Name` to the name of your Xcode project. (`ios/${XcodeProjectName}.xcodeproj`)\r\n\r\n##### Additional changes for Android Platform\r\n\r\nUnder `Other Settings` make sure `Scripting Backend` is set to `IL2CPP`, and `ARM64` is checked under `Target Architectures`.\r\n\r\n![Android Configruation](docs/android-player-settings.png) \r\n\r\nUnder `Other Settings` make sure `Auto Graphics API` is unchecked, and the list only contains `OpenGLES3` and `OpenGLES2` in that order.\r\n\r\n![Android graphics](docs/android-graphics.png) \r\n \r\n\r\n##### Additional changes for iOS Platform\r\n\r\nUnder `Other Settings` make sure `Auto Graphics API` is checked.\r\n\r\n![Player settings for iOS](docs/ios-player-settings.png)\r\n\r\n#### Now Unity is configured and ready\r\n\r\nNow you can export the Unity Project using `ReactNative => Export Android` or `ReactNative => Export IOS`.\r\n\r\n![Build dropdown](docs/unity-build.png)\r\n\r\nThen the exported artifacts will be placed in a folder called `UnityExport` inside either the `android` or the `ios` folder.\r\n\r\n### Adding UnityMessageManager Support\r\n\r\nAdd the contents of the [Assets](template/Assets) folder, to your Unity project.\r\n\r\n*You will have to rebuild for changes to appear in React Native.* \r\n\r\n### Configure Native Build\r\n\r\n#### Android Build\r\n\r\nTo allow for the project to recognize the `UnityExport` folder you will have to add two lines to `android/settings.gradle`.\r\n\r\n1. Add the following to the `android/build.gradle`\r\n```\r\nflatDir {\r\n    dirs \"${project(':UnityExport').projectDir}/libs\"\r\n}\r\n```\r\nSo it looks like this\r\n```\r\n// [..]\r\nallprojects {\r\n    repositories {\r\n        // [..]\r\n        flatDir {\r\n            dirs \"${project(':UnityExport').projectDir}/libs\"\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n2. Add these two lines to `android/settings.gradle`\r\n\r\n```\r\ninclude \":UnityExport\"\r\nproject(\":UnityExport\").projectDir = file(\"./UnityExport\")\r\n```\r\n\r\n##### After Unity Export\r\n\r\n#### iOS build\r\n\r\n1. Open your `ios/{PRODUCT_NAME}.xcworkspace` and add the exported project(`ios/UnityExport/Unity-Iphone.xcodeproj`) to the workspace root\r\n\r\n![Add unity ios project to ReactNative Ios workspace](docs/ios-add-unity-project.png)\r\n\r\n2. Select the `Unity-iPhone/Data` folder and change the Target Membership to UnityFramework\r\n\r\n![Set Target Membership of Data folder to UnityFramework](docs/ios-set-target-membership.png)\r\n\r\n3. Add `UnityFramework.framework` as a library to your Project\r\n\r\n![Add UnityFramework to project](docs/ios-add-unityframework.png)\r\n\r\n4. Modify `main.m`\r\n\r\n```objectivec\r\n#import \"UnityUtils.h\"\r\n\r\nint main(int argc, char * argv[]) {\r\n  @autoreleasepool {\r\n    InitArgs(argc, argv);\r\n    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));\r\n  }\r\n}\r\n```\r\n\r\n## Use in React Native\r\n\r\n### UnityView Props\r\n\r\n#### `onMessage`\r\n\r\nReceive message from Unity\r\n\r\n*Make sure you have added [UnityMessageManager](#adding-unitymessagemanager-support)*\r\n\r\n##### Example:\r\n\r\n1. Send message from Unity\r\n```C#\r\nUnityMessageManager.Instance.SendMessageToRN(\"click\");\r\n```\r\n\r\n2. Receive message in React Native\r\n```javascript\r\nonMessage(event) {\r\n    console.log('OnUnityMessage: ' + event.nativeEvent.message);    // OnUnityMessage: click\r\n}\r\n\r\nrender() {\r\n    return (\r\n        <View style={[styles.container]}>\r\n            <UnityView\r\n                style={style.unity}\r\n                onMessage={this.onMessage.bind(this)}\r\n            />\r\n        </View>\r\n    );\r\n}\r\n```\r\n\r\n#### `onUnityMessage`\r\n\r\n[**Recommended**]Receive json message from unity.\r\n\r\n```\r\nonUnityMessage(handler) {\r\n    console.log(handler.name); // the message name\r\n    console.log(handler.data); // the message data\r\n    setTimeout(() => {\r\n      // You can also create a callback to Unity.\r\n      handler.send('I am callback!');\r\n    }, 2000);\r\n}\r\n\r\nrender() {\r\n    return (\r\n        <View style={[styles.container]}>\r\n            <UnityView\r\n                style={style.unity}\r\n                onUnityMessage={this.onMessage.bind(this)}\r\n            />\r\n        </View>\r\n    );\r\n}\r\n```\r\n\r\n### UnityModule\r\n\r\n```\r\nimport { UnityModule } from 'react-native-unity-view';\r\n```\r\n\r\n#### `isReady(): Promise<boolean>`\r\n\r\nReturn whether is unity ready.\r\n\r\n#### `createUnity(): Promise<boolean>`\r\n\r\nManual init the Unity. Usually Unity is auto created when the first view is added.\r\n\r\n#### `postMessage(gameObject: string, methodName: string, message: string)`\r\n\r\nSend message to unity.\r\n\r\n* `gameObject` The Name of GameObject. Also can be a path string.\r\n* `methodName` Method name in GameObject instance.\r\n* `message` The message will post.\r\n\r\nExample:\r\n\r\n1. Add a message handle method in `MonoBehaviour`.\r\n\r\n```C#\r\npublic class Rotate : MonoBehaviour {\r\n    void handleMessage(string message) {\r\n\t\tDebug.Log(\"onMessage:\" + message);\r\n\t}\r\n}\r\n```\r\n\r\n2. Add Unity component to a GameObject.\r\n\r\n3. Send message use javascript.\r\n\r\n```javascript\r\nonToggleRotate() {\r\n    if (this.unity) {\r\n      // gameobject param also can be 'Cube'.\r\n      UnityModule.postMessage('GameObject/Cube', 'toggleRotate', 'message');\r\n    }\r\n}\r\n\r\nrender() {\r\n    return (\r\n        <View style={[styles.container]}>\r\n            <UnityView\r\n                ref={(ref) => this.unity = ref}\r\n                style={style.unity}\r\n            />\r\n            <Button label=\"Toggle Rotate\" onPress={this.onToggleRotate.bind(this)} />\r\n        </View>\r\n    );\r\n}\r\n\r\n```\r\n\r\n#### `postMessageToUnityManager(message: string | UnityViewMessage)`\r\n\r\nSend message to `UnityMessageManager`.\r\n\r\nPlease copy [`UnityMessageManager.cs`](https://github.com/f111fei/react-native-unity-demo/blob/master/unity/Cube/Assets/Scripts/UnityMessageManager.cs) to your unity project and rebuild first.\r\n\r\nSame to `postMessage('UnityMessageManager', 'onMessage', message)`\r\n\r\nThis is recommended to use.\r\n\r\n* `message` The message will post.\r\n\r\nExample:\r\n\r\n1. Add a message handle method in C#.\r\n\r\n```javascript\r\nvoid Awake()\r\n{\r\n    UnityMessageManager.Instance.OnMessage += toggleRotate;\r\n}\r\n\r\nvoid onDestroy()\r\n{\r\n    UnityMessageManager.Instance.OnMessage -= toggleRotate;\r\n}\r\n\r\nvoid toggleRotate(string message)\r\n{\r\n    Debug.Log(\"onMessage:\" + message);\r\n    canRotate = !canRotate;\r\n}\r\n```\r\n\r\n2. Send message use javascript.\r\n\r\n```\r\nonToggleRotate() {\r\n    UnityModule.postMessageToUnityManager('message');\r\n}\r\n\r\nrender() {\r\n    return (\r\n        <View style={[styles.container]}>\r\n            <UnityView\r\n                ref={(ref) => this.unity = ref}\r\n                style={style.unity}\r\n            />\r\n            <Button label=\"Toggle Rotate\" onPress={this.onToggleRotate.bind(this)} />\r\n        </View>\r\n    );\r\n}\r\n```\r\n\r\n#### `addMessageListener(listener: (message: string | MessageHandler) => void): number`\r\n\r\nReceive string and json message from unity.\r\n\r\n#### `addStringMessageListener(listener: (message: string) => void): number`\r\n\r\nOnly receive string message from unity.\r\n\r\n#### `addUnityMessageListener(listener: (handler: MessageHandler) => void): number`\r\n\r\nOnly receive json message from unity.\r\n\r\n#### `pause()`\r\n\r\nPause the unity player.\r\n\r\n#### `resume()`\r\n\r\nResume the unity player.\r\n\r\n\r\n### Example Code\r\n\r\n```\r\nimport React from 'react';\r\nimport { StyleSheet, Image, View, Dimensions } from 'react-native';\r\nimport UnityView from 'react-native-unity-view';\r\n\r\nexport default class App extends React.Component<Props, State> {\r\n    render() {\r\n    return (\r\n      <View style={styles.container}>\r\n        <UnityView style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, }} /> : null}\r\n        <Text style={styles.welcome}>\r\n          Welcome to React Native!\r\n        </Text>\r\n      </View>\r\n    );\r\n  }\r\n}\r\n```\r\n","readmeFilename":"README.md"}