Merge pull request #112 from Jpoliachik/main

azesmway · web-flow · commit 3a2b96d9c8f6 · 2024-05-08T16:36:51.000+03:00
Add Expo Plugin and update README
diff --git a/README.md b/README.md
@@ -1,19 +1,22 @@
 # @azesmway/react-native-unity
 
-The plugin that allows you to embed a UNITY project into the react native as a full-fledged component
+The plugin that allows you to embed a Unity project into React Native as a full-fledged component. The plugin now supports the new architecture.
 
-### ATTENTION!
+> [!IMPORTANT]
+> For iOS, it is no longer necessary to embed a project created with Unity. Only the built `UnityFramework` is used. It should be placed in the plugin folder at the path - `<YOUR_RN_PROJECT>/unity/builds/ios`
 
-The plugin now supports the new architecture as well.
-For iOS, it is no longer necessary to embed a project created with Unity. Only the built UnityFramework.framework is used. It should be placed in the plugin folder at the path -
-```<YOUR_PROJECT>/unity/builds/ios```.
-
-### IOS ONLY!!! If you used a previous version of the plugin - then be sure to delete everything that was related to Unity in the main react native project!
+## Device Support:
 
+| Platform         | Supported |
+| ---------------- | --------- |
+| iOS Simulator    | ❌        |
+| iOS Device       | ✅        |
+| Android Emulator | ✅        |
+| Android Device   | ✅        |
 
 # Installation
 
-## RN
+## Install this package in your react-native project:
 
 ```sh
 npm install @azesmway/react-native-unity
@@ -23,16 +26,16 @@ or
 yarn add @azesmway/react-native-unity
 ```
 
-## Unity
-
-1. Copy from folder "unity" to <Unity_Project_Name> folder and rebuild unity project.
+## Configure your Unity project:
 
-#### OnEvent in Unity
+1. Copy the contents of the folder `unity` to the root of your Unity project. This folder contains the necessary scripts and settings for the Unity project. You can find these files in your react-native project under `node_modules/@azesmway/react-native-unity/unity`. This is necessary to ensure iOS has access to the `NativeCallProxy` class from this library.
 
-Add this code:
+2. (optional) If you're following along with the example, you can add the following code to the `ButtonBehavior.cs` script in your Unity project. This allows the button press in Unity to communicate with your react-native app.
 
-```js
+<details>
+<summary>ButtonBehavior.cs</summary>
 
+```csharp
 using System;
 using System.Collections;
 using System.Collections.Generic;
@@ -66,58 +69,68 @@ public class ButtonBehavior : MonoBehaviour
     }
   }
 }
-
 ```
 
-## iOS
+</details>
+
+## Export iOS Unity Project:
+
+After you've moved the files from the `unity` folder to your Unity project, you can export the iOS unity project by following these steps:
 
-1. Build Unity project for ios in ANY folder - just not the main RN project folder!!!
-2. Open the created project in XCode
-3. Select Data folder and set a checkbox in the "Target Membership" section to "UnityFramework" ![image info](./docs/step1.jpg)
-4. You need to select the NativeCallProxy.h inside the `Unity-iPhone/Libraries/Plugins/iOS` folder of the Unity-iPhone project and change UnityFramework’s target membership from Project to Public. Don’t forget this step! ![image info](./docs/step2.jpg)
-5. If required - sign the project ```UnityFramework.framework``` and build a framework ![image info](./docs/step3.jpg)
-6. Open the folder with the built framework (by right-clicking) and move it to the plugin folder (```<YOUR_PROJECT>/unity/builds/ios```) ![image info](./docs/step4.jpg)
-7. Execute the command in the root of the main RN project ```rm -rf ios/Pods && rm -f ios/Podfile.lock && npx pod-install```
+1. Open your Unity project
+2. Build Unity project for ios in ANY folder - just not the main RN project folder!!!
+3. Open the created project in XCode
+4. Select Data folder and set a checkbox in the "Target Membership" section to "UnityFramework" ![image info](./docs/step1.jpg)
+5. You need to select the NativeCallProxy.h inside the `Unity-iPhone/Libraries/Plugins/iOS` folder of the Unity-iPhone project and change UnityFramework’s target membership from Project to Public. Don’t forget this step! (if you don't see these files in your Xcode project, you didn't copy over the `unity` folder to your Unity project correctly in previous steps) ![image info](./docs/step2.jpg)
+6. If required - sign the project `UnityFramework.framework` and build a framework ![image info](./docs/step3.jpg)
+7. Open the folder with the built framework (by right-clicking) and move it to the plugin folder (`<YOUR_RN_PROJECT>/unity/builds/ios`) ![image info](./docs/step4.jpg)
+8. Remove your `Pods` cache and lockfile with this command in the root of the main RN project `rm -rf ios/Pods && rm -f ios/Podfile.lock && npx pod-install`
 
 ### Android
 
-1. Export Unity app to `[project_root]/unity/builds/android`
-2. Add the following lines to `android/settings.gradle`:
-   ```gradle
+1. Open your Unity project
+2. Export Unity app to `<YOUR_RN_PROJECT>/unity/builds/android`
+3. Remove `<intent-filter>...</intent-filter>` from `<YOUR_RN_PROJECT>/unity/builds/android/unityLibrary/src/main/AndroidManifest.xml` at unityLibrary to leave only integrated version.
+
+If you're using expo, you're done. The built-in expo plugin will handle the rest. If you're not using expo, you'll need to follow the steps below.
+
+1. Add the following lines to `android/settings.gradle`:
+   ```groovy
    include ':unityLibrary'
    project(':unityLibrary').projectDir=new File('..\\unity\\builds\\android\\unityLibrary')
    ```
-3. Add into `android/build.gradle`
-    ```gradle
-    allprojects {
-      repositories {
-        // this
-        flatDir {
-            dirs "${project(':unityLibrary').projectDir}/libs"
-        }
-    // ...
-    ```
-4. Add into `android/gradle.properties`
-    ```gradle
-    unityStreamingAssets=.unity3d
-    ```
-5. Add strings to ``android/app/src/main/res/values/strings.xml``
-
-    ```javascript
-    <string name="game_view_content_description">Game view</string>
-    ```
-6. Remove `<intent-filter>...</intent-filter>` from ``<project_name>/unity/builds/android/unityLibrary/src/main/AndroidManifest.xml`` at unityLibrary to leave only integrated version.
+2. Add into `android/build.gradle`
+   ```groovy
+   allprojects {
+     repositories {
+       // this
+       flatDir {
+           dirs "${project(':unityLibrary').projectDir}/libs"
+       }
+       // ...
+     }
+   }
+   ```
+3. Add into `android/gradle.properties`
+   ```gradle
+   unityStreamingAssets=.unity3d
+   ```
+4. Add strings to `android/app/src/main/res/values/strings.xml`
+
+   ```javascript
+   <string name="game_view_content_description">Game view</string>
+   ```
 
 # Known issues
 
-- Works only on real iOS devices.  Android emulators are capable of showing the UnityView.
-- On IOS the Unity view is waiting for a parent with dimensions greater than 0 (from RN side). Please take care of this because if it is not the case, your app will crash with the native message `MTLTextureDescriptor has width of zero`.
+- Does not work on the iOS simulator.
+- On iOS the Unity view is waiting for a parent with dimensions greater than 0 (from RN side). Please take care of this because if it is not the case, your app will crash with the native message `MTLTextureDescriptor has width of zero`.
 
 # Usage
 
 ## Sample code
 
-```js
+```jsx
 import React, { useRef, useEffect } from 'react';
 
 import UnityView from '@azesmway/react-native-unity';
@@ -139,7 +152,11 @@ const Unity = () => {
         methodName: 'methodName',
         message: 'message',
       };
-      unityRef.current.postMessage(message.gameObject, message.methodName, message.message);
+      unityRef.current.postMessage(
+        message.gameObject,
+        message.methodName,
+        message.message
+      );
     }
   }, []);
 
@@ -149,30 +166,30 @@ const Unity = () => {
         ref={unityRef}
         style={{ flex: 1 }}
         onUnityMessage={(result) => {
-          console.log('onUnityMessage', result.nativeEvent.message)
+          console.log('onUnityMessage', result.nativeEvent.message);
         }}
       />
     </View>
   );
 };
 
 export default Unity;
-
 ```
 
 ## Props
-- `androidKeepPlayerMounted?: boolean` - if set to true, keep the player mounted even when the view that contains it has lost focus.  The player will be paused on blur and resumed on focus.  **FOR ANDROID:** has no effect on iOS.
-- `fullScreen?: boolean` - defaults to true.  If set to false, will not request full screen access.  **ANDROID ONLY**
+
+- `style: ViewStyle` - styles the UnityView. (Won't show on Android without dimensions. Recommended to give it `flex: 1` as in the example)
 - `onUnityMessage?: (event: NativeSyntheticEvent)` - receives a message from a Unity
-- `style: ViewStyle` - styles the UnityView.  (Won't show on Android without dimensions.  Recommended to give it `flex: 1` as in the example)
+- `androidKeepPlayerMounted?: boolean` - if set to true, keep the player mounted even when the view that contains it has lost focus. The player will be paused on blur and resumed on focus. **ANDROID ONLY**
+- `fullScreen?: boolean` - defaults to true. If set to false, will not request full screen access. **ANDROID ONLY**
 
 ## Methods
-- `postMessage(gameObject, methodName, message)` - sends a message to the Unity. **FOR IOS:** The native method of unity is used to send a message
-`sendMessageToGOWithName:(const char*)goName functionName:(const char*)name message:(const char*)msg;`, more details can be found in the [documentation](https://docs.unity3d.com/2021.1/Documentation/Manual/UnityasaLibrary-iOS.html)
 
+- `postMessage(gameObject, methodName, message)` - sends a message to the Unity. **FOR IOS:** The native method of unity is used to send a message
+  `sendMessageToGOWithName:(const char*)goName functionName:(const char*)name message:(const char*)msg;`, more details can be found in the [documentation](https://docs.unity3d.com/2021.1/Documentation/Manual/UnityasaLibrary-iOS.html)
 - `unloadUnity()` - the Unity is unloaded automatically when the react-native component is unmounted, but if you want to unload the Unity, you can call this method
 - `pauseUnity?: (pause: boolean)` - pause the Unity
-- `windowFocusChanged(hasFocus: boolean = false)` - simulate focus change (intended to be used to recover from black screen (not rendering) after remounting Unity view when `resumeUnity` does not work)  **ANDROID ONLY**
+- `windowFocusChanged(hasFocus: boolean = false)` - simulate focus change (intended to be used to recover from black screen (not rendering) after remounting Unity view when `resumeUnity` does not work) **ANDROID ONLY**
 
 # Contributing
 
diff --git a/app.plugin.js b/app.plugin.js
@@ -0,0 +1 @@
+module.exports = require('./plugin/build');
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.5.0",
+    "@expo/config-plugins": "^7.9.1",
     "@react-native/eslint-config": "^0.72.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
diff --git a/plugin/src/index.ts b/plugin/src/index.ts
@@ -0,0 +1,77 @@
+import {
+  AndroidConfig,
+  ConfigPlugin,
+  withGradleProperties,
+  withProjectBuildGradle,
+  withSettingsGradle,
+  withStringsXml,
+} from 'expo/config-plugins';
+
+const withUnity: ConfigPlugin<{ name?: string }> = (
+  config,
+  { name = 'react-native-unity' } = {}
+) => {
+  config.name = name;
+  config = withProjectBuildGradleMod(config);
+  config = withSettingsGradleMod(config);
+  config = withGradlePropertiesMod(config);
+  config = withStringsXMLMod(config);
+  return config;
+};
+
+const REPOSITORIES_END_LINE = `maven { url 'https://www.jitpack.io' }`;
+
+const withProjectBuildGradleMod: ConfigPlugin = (config) =>
+  withProjectBuildGradle(config, (modConfig) => {
+    if (modConfig.modResults.contents.includes(REPOSITORIES_END_LINE)) {
+      // use the last known line in expo's build.gradle file to append the newline after
+      modConfig.modResults.contents = modConfig.modResults.contents.replace(
+        REPOSITORIES_END_LINE,
+        REPOSITORIES_END_LINE +
+          '\nflatDir { dirs "${project(\':unityLibrary\').projectDir}/libs" }\n'
+      );
+    } else {
+      throw new Error(
+        'Failed to find the end of repositories in the android/build.gradle file`'
+      );
+    }
+    return modConfig;
+  });
+
+const withSettingsGradleMod: ConfigPlugin = (config) =>
+  withSettingsGradle(config, (modConfig) => {
+    modConfig.modResults.contents += `
+include ':unityLibrary'
+project(':unityLibrary').projectDir=new File('../unity/builds/android/unityLibrary')
+    `;
+    return modConfig;
+  });
+
+const withGradlePropertiesMod: ConfigPlugin = (config) =>
+  withGradleProperties(config, (modConfig) => {
+    modConfig.modResults.push({
+      type: 'property',
+      key: 'unityStreamingAssets',
+      value: '.unity3d',
+    });
+    return modConfig;
+  });
+
+// add string
+const withStringsXMLMod: ConfigPlugin = (config) =>
+  withStringsXml(config, (config) => {
+    config.modResults = AndroidConfig.Strings.setStringItem(
+      [
+        {
+          _: 'Game View',
+          $: {
+            name: 'game_view_content_description',
+          },
+        },
+      ],
+      config.modResults
+    );
+    return config;
+  });
+
+export default withUnity;
diff --git a/plugin/tsconfig.json b/plugin/tsconfig.json
@@ -0,0 +1,9 @@
+{
+    "extends": "expo-module-scripts/tsconfig.plugin",
+    "compilerOptions": {
+      "outDir": "build",
+      "rootDir": "src"
+    },
+    "include": ["./src"],
+    "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+  }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+module.exports = require('./plugin/build');`