Initial setup

‍

The project was created with Expo by following this tutorial. For embedding Unity as a library into a React Native project, we use @azesmway/react-native-unity. For the posemesh-enabled AR app, we use a slightly modified version of the Simple persistant AR experience tutorial where the "Place Cube" button is rendered in React Native instead of Unity.

‍

Project structure

‍

app

Expo router uses this folder to structure the pages in a way that is similar to a website.

^index.js^ is the initial react-native view that displays an instruction text and a button to open the AR view.

Clicking that button opens the ^unity.js^ view that shows a button to place cubes in AR. It uses ^/providers/unityprovider^ to subscribe to and post messages to Unity. When the posemesh SDK in Unity detects a QR code and finishes the calibration, it will post the ^qr_code_scanned^ message to react-native. The ^unity.js^ view handles that message by enabling the "Place Cube" button, which posts a ^place_button_click^ message from react-native to Unity.

All the pages are wrapped around ^_layout.js^. In this example, we use ^_layout.js^ to wrap all the pages with ^<UnityProvider>^ from ^providers/unityprovider.js^, which essentially means that the Unity view is always active in the background. Your app might prefer a different scenario; for example, you might want to initialize the Unity view only when a certain react-native page is opened. In that case, you'd remove the ^<UnityProvider>^ from ^_layout.js^ and wrap only that specific page with it.

‍

assets

These are the icons and the splash image assets of your React Native project.

‍

providers

The ^unityprovider.js^ script uses ^UnityView^ from ^@azesmway/react-native-unity^ to show a full screen embedded Unity view, and ^EventEmitter^ from ^utils/EventEmitter.ts^ to implement a simple mechanism to send and receive events between Unity and react-native.

‍

unity

The ^unity/builds/ios^ folder contains the ^UnityFramework.framework^ that contains the embedded Unity AR project. You don't need to put the full ^Unity-iPhone^ project here, only the ^UnityFramework.framework^ that you'll build.

‍

utils

The ^EventEmitter.ts^ is a simple TypeScript class for publishing and subscribing to messages.

‍

Bridging Unity and React Native

‍

In this example, we use a simple ^ReactNativeBridge.cs^ script to subscribe to and push messages on the Unity side. You can add write a more complex logic for handling messages; just make sure that the GameObject name to which the script is attached and the method name match what's called from the React Native side.