The current state of Augmented Reality and React (Native)

I code along

and continue watching the video. Things were going well, although the expo platform updates so often, it took a bit of reorganizing to follow the flow of the video. And then we get up to the cool — part accessing the camera. I could not wait to see how this worked in action. So I set it all up.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node
yum install watchman
npm install -g react-native-cli
npm install -g react-viro-cli
npm install -g react-viro-cli

And started working off the documentation

react-viro init ViroSample

Downloaded the Viro app

10pm: Smooth Sailing

Off the bat everything was working well, the Viro sample project, worked as promised and the next step in the documentation was to add components. This looked pretty easy, since its react it all worked by importing different materials

./HelloWorldSceneAR.jsimport {
...
ViroBox,
ViroMaterials,
} from 'react-viro';
<ViroBox position={[0, -.5, -1]} scale={[.3, .3, .1]} materials={["grid"]} />ViroMaterials.createMaterials({   grid: {     diffuseTexture: require('./res/grid_bg.jpg'),
},
});

Adding 3D objects to the scene

Continuing to in the documentation I started adding 3D objects you need to import components Viro3DObject, ViroAmbientLight and ViroSpotLight.

import {
...
Viro3DObject,
ViroAmbientLight,
ViroSpotLight,
} from 'react-viro';
<Viro3DObject source={require('./res/emoji_smile/emoji_smile.vrx')}            position={[-.5, .5, -1]} scale={[.2, .2, .2]} type="VRX" />

Create an AR Plane

For it to be AR It needs to be positioned well in space, and Viro offers a great solution. In order to do so import ViroARPlaneSelector into the import statement of your react app. And next add the following code into your ViroARPlaneSelector

<ViroARPlaneSelector />

Image Recognition

I finished the documentation and started working on image recognition and tying in

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store