A quick overview of how the project was created and the folder structure.
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.
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.
These are the icons and the splash image assets of your React Native project.
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.
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.
The ^EventEmitter.ts^ is a simple TypeScript class for publishing and subscribing to messages.
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.
Apply for a grant of AUKI tokens to get your project off the ground, and work directly with the Auki Labs team to get your creation to market. Successful applicants may be granted up to 100k USD worth of AUKI tokens, and development and marketing support from the Auki Labs team.
