These are my slides from the React Amsterdam talk on building Augmented Reality & Virtual Reality applications using React Native & Viro Media

1. Building VR & AR
with React Native

2. @dabit3
Nader Dabit

3. 1. Layouts
2.Viro React API
3.Why Viro
Takeaways

4. Hype cycle

5. Why AR?

6. AR is winning

10. Building with React
React VR
Viro React
React Native AR Kit

11. VIRO MEDIA IS THE CREATOR OFVIROREACT AND
VIROCORE, PLATFORMS FOR DEVELOPERS TO BUILD
IMMERSIVE AUGMENTED REALITY (AR) ANDVIRTUAL
REALITY (VR) APPLICATIONS.

13. AR
ARKit

14. VR

16. Renderer runs natively on iOS &
Android hardware

17. ARKIT ARCORE
SLAM POSITIONAL TRACKING, POSING POSITIONAL TRACKING, POSING
DETECTION PLANES, HIT POINTS PLANES, HIT POINTS
DEVICES IPHONE SE, 6S/6S+, 7/7+, 8/8+, X | IPAD 2017 AND PRO SAMSUNG 8, PIXEL, TBA
EST. USERS (E2017) 200-500M 100M
TRACKING
RENDERING
SCENEKIT UNITY/UNREAL VIRO
3D RENDERING YES YES YES
LIGHTING, SHADOWS YES YES YES
PHYSICS, PARTICLES YES YES YES
LAYOUTS, ANIMATIONS YES YES YES
CROSS PLATFORM NO YES YES
REACT BASED NO NO YES

19. <div class=‘container’ />
.container {
margin: 20px;
}

21. <ViroText
position={[2, 0, -2]}
text=“Hello World”
/>

22. Getting Started

23. 1. Get API Key
2. Install CLI
npm install -g react-viro-cli
3. Generate project
react-viro init MyNewProject
Visit https://viromedia.com/
Getting Started

24. Building / Testing
1. Run directly on device
2. Download Viro Media app &
run on testbed device

25. API

26. import { ViroImage } from ‘react-viro’
<ViroImage
position={[2, 0, -2]}
height={2}
width={2}
source={require(“./path”)}
/>

27. Hello World

28. ViroBox,
ViroMaterials,
Import Components
<ViroBox position={[0, -.5, -1]} scale={[.3, .3, .1]}
materials={["grid"]} />
New Component in render()
ViroMaterials.createMaterials({
grid: {
diffuseTexture: require('./res/grid_bg.jpg'),
},
});
Add after class declaration
Adding a Box to a Scene

29. Viro3DObject,
ViroAmbientLight,
ViroSpotLight,
Import Components
<ViroAmbientLight color={"#aaaaaa"} />
<ViroSpotLight
innerAngle={5}
outerAngle={90}
direction={[0,-1,-.2]}
position={[0, 3, 1]}
color="#ffffff"
castsShadow={true} />
<Viro3DObject
source={require('./res/emoji_smile/emoji_smile.vrx')}
position={[-.5, -.5, -.5]}
scale={[.2, .2, .2]}
type="VRX" />
New Components in render()
Adding a 3D object to a Scene

31. ViroARPlaneSelector,
Import Components
<ViroARPlaneSelector>
</ViroARPlaneSelector>
New Component in render()
Plane Selector

32. Add Dinosaur to Plane Selector
<ViroARPlaneSelector>
<Viro3DObject
source={require('./res/emoji_sad/emoji_sad.vrx')}
position={[0, .25, 0]}
scale={[.2, .2, .2]}
type="VRX" />
</ViroARPlaneSelector>
Add Viro3DObject to ViroARPlaneSelector

33. Shadows & Lights
ViroSurface,
Import Component
<Viro3DObject
source={require('./res/
emoji_angry/emoji_angry.vrx')}
position={[0, .15, 0]}
scale={[.2, .2, .2]}
type="VRX"
lightReceivingBitMask={3}
shadowCastingBitMask={2} />
Update Component in ARPlaneSelector
Add Components in ARPlaneSelecteor
<ViroSpotLight
innerAngle={5}
outerAngle={45}
direction={[0,-1,-.2]}
position={[0, 3, 1]}
color="#ffffff"
castsShadow={true}
influenceBitMask={2}
shadowMapSize={2048}
shadowNearZ={2}
shadowFarZ={5}
shadowOpacity={.7} />
<ViroSurface
rotation={[-90,0,0]}
width={.5} height={.5}
arShadowReceiver={true}
lightReceivingBitMask={2} />

34. ViroAnimations,
Import Component
ViroAnimations.registerAnimations({
rotate: {
properties: {
rotateY: "+90"
},
duration: 250, //.25 seconds
},
});
Add to Viro component
Animate Objects
Register Animation
animation={{name: "rotate", run: true, loop: true}}

35. ViroNode
Import Components
onDrag(dragToPos, source) {
// dragtoPos[0]: x position,
// dragtoPos[1]: y position,
// dragtoPos[2]: z position
}
<ViroNode
position={this.state.positions}
dragType=“FixedToWorld"
onDrag={this.onDrag}
>
ViroNode
Interact with Objects

36. @dabit3
Nader Dabit