Tutorial: Build an AR Mobile App for iOS with Screenshot Functionality

The two main technologies we will use are Viro React and React Native

Photo by UNIBOA on Unsplash

I recently worked on a development team to create an Augmented Reality (AR) mobile app called go.bARk. go.bARK uses Viro React and React Native to render a virtual dog in your real space. It is a fun, enjoyable game that allows a user to own a virtual dog, take care of it, and connect with friends. When my team began developing go.bARk, we didn’t really know what was possible with the technology stack we chose, and we did a lot of research to make our vision come to life. One feature we decided we wanted our app to have was screenshot functionality. We wanted users to be able to take pictures of their virtual dog and save those pictures to their phone so they could share them with friends. In order to achieve this vision, I had to carefully analyze code examples we had found on the internet. With the intention of saving another developer some time, I created this tutorial on how to implement screenshot functionality into an AR Viro React App. Enjoy! *Note: The screenshot instructions only work for iOS devices*

• First, follow the instructions on Viro React’s website to set up your Viro Sample App. Once you have the CLI installed, you can cd into the folder where you’d like your project to be stored and then run react-viro init ViroScreenshotDemo.
• As the instructions explain, you’ll be running your app on your phone using the Viro Media app. In your terminal, run npm start, and on your phone, open the app, click the menu bar, enter the testbed, and input the ngrok link from your terminal or your computer’s IP address (I prefer to use my IP address so I don’t have to enter different ngrok links if I quit running my program). You should see the option to select AR or VR, if you select AR, you’ll see your camera turns on and “Hello World” shows up!
• [Optional] Next, follow these instructions to learn how to render 3-d objects in your sample app. This is what my js > HelloWorldSceneAR.js looks like after following the AR tutorial (If you copy-paste this part, make sure you download the zipped folder from the instructions page so you have the assets in your project):

• Now we have an AR scene set up! We will do the rest of our work in App.js in the root of the project. In App.js, we need to do some modifications in order to view a screenshot button on top of the AR scene. Set up a basic overlay screen inside the render function and use Dimensions from react-native in order to get the AR scene to fill the dimensions of the screen:

• At this point, you can use App.js to display anything you want on top of the AR scene — A menu bar, icons, you name it! In this tutorial, we’re going to add a screenshot icon and screenshot functionality. Let’s start by adding a little camera icon to the bottom of our overlay. In the render function, after the <View> that wraps the ViroARSceneNavigator, let’s put our camera icon:

• This looks pretty cool, but our camera icon doesn’t do anything…yet. Time to add a screenshot function that will save screenshots to a user’s iOS device! To do this, we need to npm install uuid-random and add this as an import at the top. Then we need to add videoUrl to the state, write the function, bind it to this, and attach it to the icon:

• When you click the camera icon, then navigate to your phone’s photos, you’ll see your screenshots are being saved! Again, this is pretty awesome! But, the user doesn’t have a visual cue to know that they’ve taken a screenshot…yet. Let’s create a banner that pops up after a screenshot has been taken!

• Now, when you run the app and click the camera icon, you’ll see the green banner come across the bottom of the screen and in your photos you’ll see the screenshot has saved!

And that’s all for now! Here is the source code if you’d like to see exactly how I cleaned up the sample/tutorial provided by Viro React. Overall, Viro React can be challenging to work with because the code is not well-maintained, but you can build some really amazing apps with it. The possibilities are truly endless! I can’t wait to see what you make, happy coding!