Viro React

April 13, 2020

I recently made an Augmented Reality Easter Egg Hunt app for my kids to play. It took me a week of part-time work to get it done (with some help on design and graphics). A big reason for getting something up so quickly was the ViroReact, a library for rapidly developing cross-platform AR/VR experiences.

The technologies used in the app include:

  1. React Native - mobile development
  2. Redux - state management
  3. Viro React

Getting started with ViroReact was trivial based on the quick start. It’s the quick start that convinced me to try making the app in such a short space of time. The issue with the quick start is that it provides an example of code that runs within a sample app. Using the sample app, I quickly ran into problems when it came to customizing the experience, and the development workflow was a bit tedious. After wrangling with the example app for some time, I decided to work with a clean install of React Native.

I installed the latest version of React Native (v0.62 at the time of this writing). I set up the basic screens, and then I began setting up ViroReact based on the instructions provided in the documentation. There is a diff of changes to follow as well but I found it necessary to make some tweaks based on issues encountered.

Tweaks

You can see the full set of tweaks here

  1. I did NOT add the product flavors described to the build.gradle. It was messing up the build tools that React Native provides and I didn’t want that (the scripts expect InstallDebug target but setting up the product flavors changed the names of the target)
  2. Because I didn’t setup the product flavors I used the constant for the platform I was building for in the MainApplication class (i.e. packages.add(new ReactViroPackage(ReactViroPackage.ViroPlatform.AR));)
  3. I used a version of the library that was patched (react-viro@npm:@iskander508/react-viro@0.61.2) to fix issues with versions of react > 0.59 (https://github.com/viromedia/viro/issues/756)

Pros

  1. Once I got the lib going, it did work as advertised, and it was easy to create objects
  2. Adding interactivity was a breeze
  3. It has been open sourced (though it didn’t start that way).
  4. The concepts of the library were straight forward and easy to understand

Cons

  1. Getting it set up in an existing project was not easy or well explained (hence this post)
  2. The library uses a navigator as the base. This caused problems with the stack navigation I was trying to use and had the consequence of I couldn’t add elements to that screen that were not meant to be in the AR experience
  3. I noticed there was some importing of AWS SDKs to the source. They didn’t seem to affect things on android BUT the library tries to open something in the Amazon store (it repeatedly prompted on my daughter’s Fire tablet).
  4. At times items that were placed seemed to drift

It was a learning experience for sure, and I’ve put the code on GitHub for others to explore further. The biggest issue is that the placement of the eggs is not consistent. The kids love it, but it’s something I’d like to fix. The problem could lie with my approach, so I won’t hold this against ViroReact. I’d also like to improve usability by giving more feedback and I’d like to make it multiplayer as originally planned.