RN: Build and run the project

Instructions on how to build and run the project.

Build and run the project

1. Build the UnityFramework

Follow steps 2-3 from this tutorial to prepare and build the Unity project as a framework. The resulting UnityFramework.framework file can be copied to the unity/builds/ios folder.

2. Generate and configure the Xcode workspace

First run:

npm install

Then:

npm run ios

This will generate the React Native Xcode workspace but will fail to run first time because we are still missing the Unity related components. Run the following command to install the necessary cocoa pods:

rm -rf ios/Pods && rm -f ios/Podfile.lock && npx pod-install

Open the generated ^.xcworkspace^ project in ^Xcode^, open ^Info.plist^, and add a new property ^Privacy - Camera Usage Description^ (or paste in the string ^NSCameraUsageDescription^); this is required in order to ask for permission to use the camera for AR.

Camera usage description

In your Unity project's Packages directory, find the ^Auki Labs ConjureKit/Runtime/Plugins/iOS/PosemeshAmplitude/PosemeshAmplitude.framework^ file.

PosemeshAmplitude.framework

Drag ^PosemeshAmplitude.framework^ into the ^Frameworks^ folder in Xcode's Project navigator view. Then in the project's general settings (open by clicking the project name at the top of the navigator), scroll down to the ^Frameworks, Libraries, and Embedded Content^ section and set the ^PosemeshAmplitude.framework^ embed mode to ^Embed & Sign^. Make sure you have properly configured the ^Signing & Capabilities^ settings too.

Embed & Sign

Clean the Xcode project by going to ^Product->Clean Build Folder^.

3. Run the app

To run the project on a connected device, run the following command and follow the instructions in the terminal.

npm run ios

4. Implement your own app logic

Depending on your React Native app logic you will probably want to modify the files in the ^providers^ and ^utils^ folders to handle more complex communication between the Unity and React Native layers. If you have an existing React Native project you would need to partially or fully copy these folders to your project, install the ^@azesmway/react-native-unity^ dependency, and display the Unity view wherever appropriate.

To add your own Unity project, build it as a framework and replace ^UnityFramework.framework^ in the ^unity/builds/ios^ folder with it.

Known limitations

If the Unity view has a React Native overlay, the tap event might not get through the React Native layer to Unity. For this you might need to have all the UI on either the React Native side or on the Unity side when displaying the AR view.

This is the end of this lesson

Need a refresher on the essentials?

Check out more lessons, DIY kits and essentials reading material at the developer learning centre homepage.

ポーズメッシュを構築するのにサポートが必要ですか?

プロジェクトをスタートさせるためにAUKIトークンの助成金を申請し、Auki Labsチームと直接連携して、あなたのクリエイションをマーケットへ。選ばれた申請者は最大10万米ドル相当のAUKIトークンの助成を受け、アウキラボチームによる開発、マーケティング支援を受けることができます。