In this workshop, taught at ChainReact2019 and will walk through creating basic Ikea like Store app where we will be able to see products in Augmented Reality, scale them, rotate, them, move around in real world and interact with them.

• Getting started with AR for React Native
• 3D coordinate systems
• Lighting and textures fundamentals
• Creating dedicated AR views in your React Native apps
• Creating AR content and positioning it in the real world
• Working with 3d models
• Working with UI in AR
• AR Portals
• User inputs and animations
• Applying Physics
• Getting AR data from GraphQL endpoint and rendering in your app
• Adding real time capabilities to your AR apps with GraphQL subscriptions

You'll be able to write AR in React Native for either iOS, Android, or both. Let's make sure your machine is ready to get rolling.

It's important that you are able to run a "Hello World" AR app using ViroReact BEFORE this workshop, even if you're not familiar with the steps.

We'll go over all the installation at the very beginning, but it's crucial you will have a basic setup, so you can focus on creating an app.

In this section you will put to test various AR capabilities

• Create 3 boxes and position them in pyramid in front of the viewer (ViroBox)

• Add Directional light (ViroDirectionalLight)

• Create 3 different materials with different lighting models and colors (ViroCreateMaterials)

• Use ARPlaneSelector and Portal to create walkable portal

• Create surface plane and add physics to these boxes

• Install latest ViroMedia app from AppStore or PlayStore

• Init react native with latest compatible release version from Viro docs

• react-native init chainReactARWorkshop --version [email protected]

• For this workshop we will be using osdnk/reanimated-bottom-sheet

  yarn add react-native-vector-icons
  yarn add react-navigation
  yarn add reanimated-bottom-sheet
  yarn add react-native-reanimated
  yarn add react-native-gesture-handler
  react-native link react-native-reanimated
  react-native link react-native-vector-icons
  react-native link react-native-gesture-handler

• Take Map example from reanimated-bottom-sheet and convert it to look according to our requirements.

  • Our app should have two screens - Home screen and Shop screen
  • Shop screen should show a view with cart on the top right corner with notifications
  • It will have reanimated-bottom-sheet for our store navigation

https://docs.viromedia.com/docs/integrating-with-react-native-projects

yarn add [email protected]

create Podfile under ios folder with:

platform :ios, '9.3'
target 'chainReactARWorkshop' do
  use_frameworks!
  pod 'ViroReact', :path => '../node_modules/react-viro/ios/'
  pod 'ViroKit', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/'
end

cd ios
pod install

• sign your app with valid AppleDeveloper account

• change ios target in Xcode to 9.3

• Fix GVRSDK error

• Build

https://docs.viromedia.com/docs/integrating-with-react-native-projects

• Create 2 Viro3dObjects in your scene and add shadows, scaling, rotation and onpress interactions with them.
• When pressing should present ViroText with more detailed data

Car:

Sofa:

• Add functionality - when different model is picked (Reset ARPlaneSelector or use manual Anchoring)

• model database. There should be products, price, description, 3d model for every product and it's scale, resources etc.

• create a screen with list of products that are in cart
• when clicking Buy, product will change it's state to in-cart