The Viro Developer Hub

Welcome to the Viro developer hub. You'll find comprehensive guides and sample code to help you start working with Viro as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started

Every react-viro release has a `Compatible with React Native` version

This means that we have extensively tested ViroReact to work with that version of react-native. While older or newer versions of react-native may work with Viro, there may be issues or differences that cause ViroReact to not work properly with older or newer versions of react-native.

New Testbed app

With this release we released a new version of the Testbed app for both iOS and Android. This new version is compatible with react-viro v2.15.0 and react-native v0.59.3. If you update the Testbed apps, you would be required to update your react-viro projects as per upgrade instructions below.

ViroReact v2.15.0
Latest release

(react-viro v2.15.0 | react-viro-cli v2.15.0 | Compatible with React Native v0.59.3)07/15/2019

New Features and Improvements

  • ARCore 1.10.0 support. issue
  • Migrate to AndroidX Support Library. issue

Bug Fixes

  • Fixed a memory leak/crash in ARAnchors.
  • Fixed a crash in ARPlanes.
  • Fixed an issue where roughness and metallic factors are ignored when using glTF models. issue
  • Other stability fixes.

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.15.0 project

Update package.json

  1. Update your react-viro package version to 2.15.0
  2. Delete the node_modules.
  3. Run npm install to install the updated versions.

ViroReact v2.14.0
(react-viro v2.14.0 | react-viro-cli v2.14.0 | Compatible with React Native v0.59.3)04/10/2019

New Features and Improvements

  • ARCore 1.7 support.
  • Updated to React Native 0.59.3.

Bug Fixes

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.14.0 project

Update package.json: Required steps if updating an existing app using react-viro version 2.13.0

  1. Update the dependencies and devDependencies section in your package.json to match packages and their version as following:
"dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.3",
    "react-viro": "2.14.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/runtime": "^7.4.3",
    "babel-jest": "^24.7.1",
    "jest": "^24.7.1",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
  },
  1. Delete the node_modules.
  2. Run npm install to install the updated versions.

Steps for Android: Required due to RN 0.59.3

  1. Open android/build.gradle file.
    • Under buildscript -> dependencies, change gradle classpath to classpath 'com.android.tools.build:gradle:3.3.0'
    • Under allprojects {, add the following snippet. This is needed as a workaround for https://issuetracker.google.com/117900475.
configurations.matching { it.name == '_internal_aapt2_binary' }.all { config ->
        config.resolutionStrategy.eachDependency { details ->
            details.useVersion("3.5.0-alpha03-5252756")
        }
    }
  1. Open android/gradle/wrapper/gradle-wrapper.properties and update distributionUrl to distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
  2. (May be required depending on earlier application setup) If you see a runtime crash and a message, "You need to use a Theme.AppCompat theme (or descendant) with this activity". Follow React-Native's instructions for fixing -> Updating Activity Theme

That's it! Sync your Android Project once these changes are done and start building.



ViroReact v2.13.0
(react-viro v2.13.0 | react-viro-cli v2.13.0 | Compatible with React Native v0.57.7)01/10/2019

New Features and Improvements

  • Updated to React Native 0.57.7.
  • Support for Android Target API level 28. Tested for Target API levels 26 - 28. We support Target API level 28 by default. If you are targeting 26 or 27 instead, see the note below for guidance.
  • Updated GVR SDK to v1.18.
  • Bug fixes.

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.13.0 project

Updating package.json

  1. Update the dependencies and devDependencies section in your package.json to match packages and their version as following:
 "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7",
    "react-viro": "2.13.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.1"
  },
  1. After updating the file, delete node_modules.
  2. Re-install node_modules to pick up new versions by running npm install.
  3. Check if your workspace has .babelrc file by running ls -a.
  4. If you do have .babelrc, edit the file to look like below:
{
  "presets": ["module:metro-react-native-babel-preset"]
}
  1. Open AndroidManifest.xml and add android:usesCleartextTraffic="true" inside the <application> section in the Manifest file. Note: This is needed to be able to connect to React-Native's package manager in debug builds. Not needed for release builds. For making sure you don't enable clear text traffic (HTTP network calls) in Production builds, look at Android's (Manifest Build Variables) docs to enable http calls only in debug builds, and not in production builds.
  2. If not already present at project root, create a file named metro.config.js and save it with the following contents:
'use strict';

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { assetExts }
  } = await getDefaultConfig();

  return {
    resolver: {
      assetExts: [...assetExts, "obj", "mtl", "JPG", "vrx", "hdr", "gltf", "glb", "bin", "arobject", "gif"]
    }
  };
})();

Note: Instructions for updating Android project to Target API level 28.

The following steps are needed to update your Android project to Target API Level 28. This is required as of November 2018: Google Play Store no longer accepts APKs built using any Target older than 26.

The instructions below are for Target 28. If due to other dependency issues you prefer Target 26 or 27 to Target 28, simply replace the Gradle version numbers below to what works best for your project setup.

  1. Now open android/build.gradle file.
    • If not already present, add google() under buildscript -> repositories and allprojects -> repositories sections.
    • Under buildscript -> dependencies, change gradle classpath to classpath 'com.android.tools.build:gradle:3.2.1'
  2. Open android/gradle/wrapper/gradle-wrapper.properties and update distributionUrl to distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-all.zip
  3. Open android/app/build.gradle and make the following changes
    • Update compileSdkVersion to compileSdkVersion 28
    • Update buildToolsVersion to buildToolsVersion '28.0.3'
    • Add flavorDimensions "platform" under buildToolsVersion, if not already present.
    • In the defaultConfig section, update targetSdkVersion to targetSdkVersion 28.
    • In the dependencies section, update compile 'com.android.support:appcompat-v7:25.0.0' to implementation 'com.android.support:appcompat-v7:28.0.0'
    • (Needed only if you are updating to target 28. Not needed for targets 26 or 27) Update our AWS dependencies (needed for key validation) to the following
        implementation 'com.amazonaws:aws-android-sdk-core:2.7.7'
        implementation 'com.amazonaws:aws-android-sdk-ddb:2.7.7'
        implementation 'com.amazonaws:aws-android-sdk-ddb-mapper:2.7.7'
        implementation 'com.amazonaws:aws-android-sdk-cognito:2.7.7'
        implementation 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.7.7'
      
    • Finally, change all compile tags in dependencies section to implementation.

That's it! Sync your Android Project once these changes are done and start building.



ViroReact v2.12.0
(react-viro v2.12.0 | react-viro-cli v2.12.0 | Compatible with React Native v0.55.1)11/15/2018

New Features and Improvements

  • ARCore 1.5 support!
  • Updated isARSupportedOnDevice() method to return an enum detailing ARCore's reason when AR is unavailable.
  • Support for enabling/disabling multisampling as a prop in Viro(X)SceneNavigator. Disabled by default.
  • Added unproject/project methods for Camera intrinsics.

Bug Fixes

  • Improved battery-life performance and reduced heat
  • Polyline rendering fixes (Github Issue #429)
  • Memory leak fixes (Github Issue #466)
  • Fixed looping and resetting issues with sound components
  • Adreno 320 fix (Github Issue #465)
  • Removed unused react-native imports (Github Issue #412)
  • Fixed incorrect hit points returned by HighAccuracyEvents
  • Fixed discoloration and brightness issues while recording video
  • Fixed dragging issues with FixedToPlane (Github Issue #160)

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.12.0 project

Update package.json

  1. Update your react-viro package version to 2.12.0
  2. Delete the node_modules.
  3. Run npm install to install the updated versions.



ViroReact v2.11.0
(react-viro v2.11.0 | react-viro-cli v2.11.0 | Compatible with React Native v0.55.1)9/20/2018

New Features and Improvements

Bug Fixes

  • Fixed several bugs related to Polylines including polyline distortion and lighting (Github Issue #179)
  • Fixed bugs related to rendering of transparent GIFs (Github Issue #409)

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.11.0 project

Update package.json

  1. Update your react-viro package version to 2.11.0
  2. Delete the node_modules.
  3. Run npm install to install the updated versions.



ViroReact v2.10.0
(react-viro v2.10.0 | react-viro-cli v2.10.0 | Compatible with React Native v0.55.1)8/28/2018

New Features and Improvements

  • ViroAnimatedImage for playing animated GIF images!
  • ARCore 1.4.0 integration with Camera AutoFocus and new HitTestRay method
  • renderingOrder prop for most components to enable developers to determine how they want to occlude nodes in the scene.
  • colorWriteMask in MaterialPropTypes to indicate what colors should be written to the screen when rendering a Material.
    • Enables filtering out a base color (e.g. red) from the Material.
    • Implement "transparent occlusion planes" by turning off all color writing for a Material (in conjunction with renderingOrder).
  • New FixedDistanceOrigin drag type

Bug Fixes

  • Fixed bug where rotation prop on Camera was not working

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.10.0 project

Update package.json

  1. Update your react-viro package version to 2.10.0
  2. Delete the node_modules.
  3. Run npm install to install the updated versions.



ViroReact v2.9.1
(react-viro v2.9.1 | react-viro-cli v2.9.1 | Compatible with React Native v0.55.1)8/15/2018

New Features and Improvements

Bug Fixes

  • Stability improvements
  • Fixed error where screenshots appeared black on some devices

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.9.1 project

Update package.json

  1. Update your react-viro package version to 2.9.1
  2. Delete the node_modules.
  3. Run npm install to install the updated versions.



ViroReact v2.8.2
(react-viro v2.8.2 | react-viro-cli v2.8.2 | Compatible with React Native v0.55.1)7/17/2018

Bug Fixes

  • Fixed issue on Android where model loading caused crash.
  • Fixed animation bug where starting and stopping and animation wasn't working properly.

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.8.2 project

Update package.json

  1. Update your react-viro package version to 2.8.2
  2. Delete the node_modules.
  3. Run npm install to install the updated versions.



ViroReact v2.8.1
(react-viro v2.8.1 | react-viro-cli v2.8.1 | Compatible with React Native v0.55.1)7/6/2018

New Features and Improvements

  • GLTF skeletal animation support!
  • <ViroCamera> component for affixing scene elements to the camera
  • Added onCameraTransformUpdate so you can respond to all camera changes
  • Improved sharpness of text
  • Performance improvements when loading models

Bug Fixes

  • Corrected issues with changing chroma key filtering color
  • Fixed issue where onAnchorFound reported the wrong initial value
  • Fixed bug where camera did not always inherit from parent nodes

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.8.1 project

Update package.json

  1. Update your react-viro package version to 2.8.1
  2. Delete the node_modules.
  3. Run npm install to install the updated versions.



ViroReact v2.7.3
(react-viro v2.7.3 | react-viro-cli v2.7.3 | Compatible with React Native v0.55.1)6/5/2018

Bug Fixes

  • Fix bug where shadow planes were visible (on iOS)

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.7.3 project

Update package.json

  1. Update your react-viro package verstion to 2.7.3
  2. Delete the node_modules.
  3. Run npm install to install the updated versions.



ViroReact v2.7.1

(react-viro v2.7.1 | react-viro-cli v2.7.1 | Compatible with React Native v0.55.1)5/29/2018

Bug Fixes

  • Fix bug where shadow planes were visible (on Android)
  • Minor bug fixes

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.7.1 project

Update package.json

  1. Update your react-viro package verstion to 2.7.1
  2. Delete the node_modules.
  3. Run npm install to install the updated versions.



ViroReact v2.7.0

(react-viro v2.7.0 | react-viro-cli v2.7.0 | Compatible with React Native v0.55.1)5/24/2018

New Features

  • GLTF Model Loading
    • Support for loading GLTF models in GLTF and GLB formats.
  • ARCore 1.2 support
    • Improved image detection
    • Detect vertical planes
    • Much wider range of supported devices
  • Alpha Video
  • And More
    • Fixed to Plane dragging: drag nodes across fixed, user-specified planes
    • HDR tone-mapping is now performed only on HDR-lit areas of the scene, providing better camera fidelity
    • Text has been sharpened

Bug Fixes

  • The model loaded callback is not invoked until all textures are loaded
  • Video recorder no longer fails on second recording
  • Raw solid material colors are now linearized correctly
  • Mali GPU over-saturation has been fixed
  • Physics quads no longer fall through the floor

Breaking API Changes

  • ARScene onAmbientLightUpdate now takes a float intensity, and RGB color array as input instead of a color temperature.

Compatible with Testbed App v2.7.0

An updated testbed app was provided with this update. Please use Testbed apps with v2.7.0 at the bottom of the testbed entry screen.

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.7.0 project

Update rn-cli.config.js

  1. Navigate to your rn-cli.config.js file (should be in the root directory of your react native workspace).
  2. Under "getAssetExts", add the additional following extensions: "gltf", "glb", "bin". It should look like this:
getAssetExts() {
    return ["obj", "mtl", "JPG", "vrx", "hdr", "gltf", "glb", "bin"];
},

Update package.json

  1. Update the following dependencies:
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.1",
    "react-viro": "2.7.0"
  },
  "devDependencies": {
    ...
    "react-test-renderer": "16.3.1"
  },
  1. Remove earlier installed node_modules by running rm -rf node_modules.
  2. Run npm install to install all node_modules per new package.json edits above.



ViroReact v2.6.1

(react-viro v2.6.1 | react-viro-cli v2.6.1 | Compatible with React Native v0.55.1)4/23/2018

Bug Fixes

  • Fixed material reloading bug on Android. Reloading with new materials resulted in an error, which is now fixed.
  • Fixed RN v0.55.1 bug on iOS wherebabel-preset-react-native package results in an error.

Compatible with Testbed App v2.6.0

An updated testbed app was not required for this platform update. Please continue to use Testbed apps with v2.6.0 at the bottom of the testbed entry screen.

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.6.1 project

Update package.json

  1. Update the following dependencies:
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.1",
    "react-viro": "2.6.1"
  },
  "devDependencies": {
    ...
    "react-test-renderer": "16.3.1"
  },
  1. Remove earlier installed node_modules by running rm -rf node_modules.
  2. Run npm install to install all node_modules per new package.json edits above.



ViroReact v2.6.0
(react-viro v2.6.0 | react-viro-cli v2.6.0 | Compatible with React Native v0.55.1)4/19/2018

New Features

  • Support for Image Recognition on Android
  • Upgraded to React Native 0.55.1
    • Updated Viro React to work with React Native 0.55.1

  • Misc
    • Updated ARCore support to ARCore 1.1
    • Callback added when Preloading Sound completes (Github Issue #201)

Bug Fixes

  • Fixed: Set click events crash on ViroScene
  • Fixed: Setting Gravity no longer overwrites Physics Disable Property (Github Issue #208)
  • Fixed: Preloading local sound no longer fails on Android

Upgrade Instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.6.0 project

Update package.json

  1. Update the following dependencies:
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.1",
    "react-viro": "2.6.0"
  },
  "devDependencies": {
    ...
    "react-test-renderer": "16.3.1"
  },
  1. Remove earlier installed node_modules by running rm -rf node_modules.
  2. Run npm install to install all node_modules per new package.json edits above.

For Testbed App Users
Download the latest iOS and/or Android Testbed Apps. Make sure the version at the bottom of the Enter Testbed screen is React Viro v2.6.0

For Android Studio Users

Open Android Studio, sync your project and you're good to go!

For Xcode Users

Navigate to your ios directory and run pod install.

Then open the <project_name>.xcworkspace in Xcode and you are set!



ViroReact v2.5.1

(react-viro v2.5.1 | react-viro-cli v2.5.1 | Compatible with React Native v0.49.3)4/4/2018

New Features

  • Support for ARKit 1.5 via Testbed App
  • 3D SceneView
  • Polygon Planes
    • Render polygon planes in ARKit and ARCore

  • Improved Text and Fonts
    • Internationalization: support for Chinese, Japanese, and Korean characters (Github Issue #186)
    • Render mixed-language text by specifying a list of font families
    • Support for more system fonts on Android, including system font groups ('monospace', 'cursive', etc.)
    • Improved font specification: choose font weight (100 to 900) and font style (italic) (Github Issue #143)

  • New Trackable States for ARCore/ARKit
    • TRACKING_UNAVAILABLE: AR Camera position is not available
    • TRACKING_LIMITED: Tracking is available but quality of results can be may be inaccurate
    • TRACKING_NORMAL: Camera position tracking is providing optimal results

  • And More!
    • Enable Alpha Channel for Gaussian Blur Bloom Shaders
    • Video textures over 3D Objects (Github #136)
    • Non-full screen mode for AR and 360
    • Exoplayer upgrade to version 2.7.1
    • Added support for x86_64 architecture on iOS
      • Enables the iOS simulator (warning: this uses software emulated OpenGL -- so it's slow!)

Bug Fixes

  • Fixed: Android Testbed app will no longer cache initial scene
  • Fixed: Improved method to detect if ARCore is supported on a device (Github Issue #171)
  • Fixed: Objects were not appearing at far distances (Github Issue #194)
  • Fixed: Colors were dark when recording video on some Android devices
  • Fixed: FBX bounding box returned incorrect values
  • Fixed: ViroView would rotate upon re-entering AR
  • Fixed: Bloom would cause the entire AR camera to brighten

Breaking API Changes

None.

Upgrade instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.5.1 project

Update package.json

  1. Update the react-viro version in your package.json file to 2.5.1
  2. Run npm install to pull down the updated react-viro version

Update rn-cli.config.js

  1. Open the rn-cli.config.js file at the root of your project.
  2. Add "hdr" to the array returned by the getAssetsExts() function.

For Testbed App Users
Download the latest iOS and/or Android Testbed Apps. Make sure the version at the bottom of the Enter Testbed screen is React Viro v2.5.1

For Android Studio Users
If you're using AR, you'll need to add the following line to your AndroidManifest.xml under the <application/> node:

<meta-data android:name="com.google.ar.core" android:value="optional" />

Also, when AR starts, you'll be prompted to install the ARCore 1.0 APK.

For Xcode Users

If you were using Viro React beta features (ARKit 1.5/iOS 11.3 beta)...

You'll need to change back your Podfile to point to the correct ViroKit:

pod 'ViroKit', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/'

Navigate to your ios directory and run pod install.

Then open the <project_name>.xcworkspace in Xcode and you are set!



ViroReact v2.4.0

(react-viro v2.4.0 | react-viro-cli v2.4.0 | Compatible with React Native v0.49.3)2/27/2018

New release with some big new features!

New Features

  • Support for ARCore 1.0
    • API to trigger an install of ARCore if ARCore is not present on the device
    • API to check if a user device is capable of running ARCore
  • Support for Physically Based Rendering (PBR)

    • New metalness, roughness, and ambient occlusion ViroMaterials properties
    • Image-based diffuse and specular lighting
    • Lights can now be specified physically through temperature (Kelvins) and intensity (Lumens)
    • Updated ViroFBX tool (for FBX to VRX conversion) can be found in your projects node_modules/react-viro/bin directory
  • And more!

    • Textures can now be tiled over surfaces
    • API to set the field of view on ViroCamera
    • Added screen, multiply, and subtract blend modes
    • Added support for Spatial Audio on iOS

ARKit 1.5 is currently in developer preview

You can not distribute apps using ARKit 1.5 features until Apple releases it to the public (Spring 2018). As such, the Viro Media Testbed app does not support ARKit 1.5 features at this time. To develop using ARKit 1.5 features, you will need to upgrade to XCode 9.3 beta and use XCode to compile and run.

Bug Fixes

  • Fixed: Framerate drop in AR scene with large 3D models.
  • Fixed: Weak global reference crash if device was idle for extended time
  • Fixed: Black screen on Mail-T720 GPU devices (i.e. A5 2016)
  • Fixed: Crash on invalid URIs
  • Fixed: various FBX keyframe and skeletal animation bugs

Breaking API Changes

  • Spotlight: the inner angle and outer angle of spotlights have changed! Now the inner angle represents the angle from edge to edge of the fully lit cone, and the outer angle represents the angle from edge to edge of the attenuated cone.

Upgrade instructions

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.4.0 project

Update package.json

  1. Update the react-viro version in your package.json file to 2.4.0
  2. Run npm install to pull down the updated react-viro version

Update rn-cli.config.js

  1. Open the rn-cli.config.js file at the root of your project.
  2. Add "hdr" to the array returned by the getAssetsExts() function.

For Testbed App Users
Download the latest iOS and/or Android Testbed Apps. Make sure the version at the bottom of the Enter Testbed screen is React Viro v2.4.0

For Android Studio Users

If you're using AR, you'll need to add the following line to your AndroidManifest.xml under the <application/> node:

<meta-data android:name="com.google.ar.core" android:value="optional" />

Also, when AR starts, you'll be prompted to install the ARCore 1.0 APK.

For Xcode Users

Navigate to your ios directory and run pod install.

Then open the <project_name>.xcworkspace in Xcode and you are set!



ViroReact v2.3.0

(react-viro v2.3.0 | react-viro-cli v2.3.0 | Compatible with React Native v0.49.3)1/16/2018

Updates

  1. ARCore Preview 2 Support - we've updated from ARCore Preview 1 to Preview 2.
  2. Added performARHitTestWithPoint to ViroARScene which allows users to perform hit tests w/ 2D points (in pixels).
  3. Added resetARSession to ViroARSceneNavigator which allows users to reset the AR session (iOS only)
  4. Updated iOS project to properly manage dependencies with CocoaPods.
  5. Fixed a lot of bugs in the platform.

ARCore Development

If you are developing for ARCore. Install Google's ARCore Preview 2 client on your device. Instructions from Google are here under 'Prepare your device'.

Upgrade Instructions

Update package.json

  1. Update the react-viro version in your package.json file to 2.3.0
  2. Run npm install to pull down the updated react-viro version

For Testbed App Users
Download the latest iOS and/or Android Testbed Apps. Make sure the version at the bottom of the Enter Testbed screen is React Viro v2.3.0

For Android Studio Users

That's it! Just open up your project and perform a gradle sync.

For Xcode Users

  1. Go to your Podfile (usually at <project_name>/ios/Podfile) then update it to look like the following:
platform :ios, '9.3'
target '<PROJECT_NAME>' do
  use_frameworks!
  pod 'ViroReact', :path => '../node_modules/react-viro/ios/'
  pod 'ViroKit', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/'
end
  1. In the same directory as your Podfile run pod update.
  2. Open your workspace and under your Project -> Build Settings -> Dead Code Stripping, set both Debug and Release values to Yes.
  3. Now clean & build your project!

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.3.0 project



ViroReact v2.2.0

(react-viro v2.2.0 | react-viro-cli v2.2.0 | Compatible with React Native v0.49.3)12/20/2017

This update contains mostly under-the-hood updates and fixes.

Updates

Underlying VR platform SDKs have been updated:

  • Updated Google VR (Android) to version 1.110
  • Updated Google VR (iOS) to version 1.100
  • Updated Oculus VR Mobile SDK to 1.9.0

AR World Alignment (iOS only) - Has your world felt a little uneven/unstable recently? Well, suffer no more, as we have exposed a worldAlignment property for ViroARSceneNavigator so you can finally realign your world however you see fit.
AR PointCloud Data - In the past only we had access to the point cloud data and only let you dictate how we display the points, but now you too have access to the raw point data (see onARPointCloudUpdate in ViroARScene) . Remember: "With great power comes great responsibility!"
AR onHover Support - In past releases, we were simply looking, but not seeing. Now when you look at things, they respond! onHover callbacks on components will now work in AR using the center of the camera.

Fixed Bugs

  • Fixed bug with reticle scaling
  • Fix issue with collision normals in physics system
  • Fix freezing issue when loading FBX models on Oculus VR

and other miscellaneous bugs and performance improvements.

If you notice anything broken, feel free to reach out to us on our issues link above!

Upgrade instructions

Update package.json

  1. Update the react-viro version in your package.json file to 2.2.0
  2. Run npm install to pull down the updated react-viro version
  3. That's it! You should now be on React Viro v2.2.0.

Update react-viro-cli

  1. From the terminal, simply run npm update -g react-viro-cli
  2. Now any react-viro init <project> will initialize a Viro 2.2.0 project



ViroReact v2.1.0

(react-viro v2.1.0 | react-viro-cli v2.1.0 | Compatible with React Native v0.49.3)11/16/2017

Viro React's v2.1.0 release coincides with the Android-only ViroCore Java API which allows Android/Java developers to write AR/VR apps using the same renderer we use in Viro React. In this release, we've updated the platform with ARCore support on Android, added a few more features and fixed some bugs detailed below.

Updates

Android AR Support - We now support building AR apps on Android using the same AR components we released in v2.0.0 using Google's ARCore API on the following devices.
Updated ARPlane - Developers can now listen for all plane anchors found and manually select the plane they want to use (See id prop of ViroARPlane).
AR Point Cloud - The platform can now draw AR point clouds and developers can customize how it looks (See displayPointCloud prop of ViroARScene).
HLS Video Support for Android - We missed this in our previous releases, but the platform now supports HLS videos on ViroVideo and Viro360Video components.
AR Camera Hit Test - We added the ability to constantly perform and retrieve hit test results based on where the user is looking.

Upgrade Instructions

Updating package.json

Your package.json should like the following:

  "dependencies": {
    "react": "16.0.0-beta.5",
    "react-native": "0.49.3",
    "react-viro": "2.1.0"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0-beta.5"
  },

After updating the file, run npm install

Migration from index.ios|android.js to single index.js

Move/merge your index.ios|android.js files into a single index.js file.

For legacy testbed support, update your index.ios|android.js files to look like the following:

import { AppRegistry } from 'react-native';
import MainIndex from './index.js';

AppRegistry.registerComponent('ViroSample', () => MainIndex);

Update React.createClass to create-react-class

In React Native 0.49.3, React.createClass is no longer supported, as a result, you should use the create-react-class drop in substitute (explained below) or migrate over to ES6 classes (one example here).

In every file where React.createClass is present, simply add this line:

var createReactClass = require('create-react-class');

Then simply replace usages of React.createClass() with createReactClass().

Adding ARCore to Existing Projects

Modifying <project_root>/android/settings.gradle by adding/updating the following lines:

...
include ':react_viro', ':arcore_client', ':gvr_common', ':viro_renderer'
project(':arcore_client').projectDir = new File('../node_modules/react-viro/android/arcore_client')
...

Update <project_root>/android/app/build.gradle by adding the line compile project(':arcore_client') in the dependencies section after the compile 'com.facebook.react:react-native:+' line.



ViroReact v2.0.1

(react-viro v2.0.1 | react-viro-cli v2.0.1 | Compatible with React Native v0.47.2)10/04/2017

A new release with some bug fixes!

Updates

  • Fixed bug in ViroFBX binary so now multiple animations supported.
  • Fix crash on Adreno cards caused by large UBO.
  • Fixed onFuse reticle UI so it's no longer so large.
  • Fixed onFuse crash bug that occurs due to triggering invalid delegates.
  • Fixed Stereoscopic for Mono Mode.

Upgrade Instructions

To use react-viro v2.0.1 in new projects upgrade our cli by doing npm update -g react-viro-cli. Then do 'react viro init MyProjectName' to use the new version.

For existing projects using 2.0, upgrade the react-viro package to 2.0.1 in your package.json and then reinstall the react viro module: rm -rf node_modules/react-viro && npm install from your project directory.

react-viro v2.0.0 | react-viro-cli v2.0.0 (Compatible with React Native v0.47.2)

It's here! We're happy to announce the release of ViroReact v2.0 with support for Augmented Reality (AR) w/ Apple's ARKit! That means that you, everyone you know, and everyone you don't (because we're free to use) can use ViroReact to build the AR experiences you've been dreaming of building! Don't worry VR users, we didn't forget about you either! There are a lot of features that we've added to the core ViroReact platform like a full fledged Physics engine and Particle support (iOS only for now)! Read the notes below to see what other goodies we've packed into our v2.0 release!

Updates

AR Support - With our new Augmented Reality (AR) support, we've Augmented your world with our platform so that you can build AR stuff too! (iOS 11+ support only)
Physics Support - Ever feel like you just weren't connecting with your objects? Well, with our new physics engine support, now you can! (All platforms supported!)
FBX Object Support - FBX is to OBJ as cars are to horse-led carriages, it's that much better! Check out the 3D Objects guide. (All platforms supported!)
Particles Support - Having a bad day? How about adding some confetti? Or fireworks? Or maybe some snow because you just can't wait for ski season to start? It's now a possibility with our platform! (iOS support only)
Shadows Support - With Viro 1.0, we had lights. We've worked really hard, but now we also have shadows (iOS support only)
Animation Changes - With Viro 2.0, we've decided to retire ViroAnimatedComponent, but never fear, we've just decided to go with an animation prop on our components! Check out our Animation guide for more details.
Many Other Changes - We've changed a whole lot, added a lot more callbacks and methods on various components. It's too long to list here, but they've all been added below!

We're looking forward to the amazing things everyone will build on the platform!

2017.09.19

react-viro v1.1.0 | react-viro-cli v1.1.0 (Compatible with React Native v0.43)

New Features

Stereoscopic Image/Video Support - We added support for stereoscopic 3D assets! Check out the new stereoMode prop for image and video components in the API References.
onFuse Callbacks - Another frequently requested feature, we added onFuse callbacks to all interactable components so you can now fuse to your heart's content.
Image Fill Types - Allows developers to better control the display and size of their images. Refer to ViroImage.
Normal Materials - Support for normal materials will make scenes and objects look even more realistic. Best if use in conjunction with lights.
Buffering Start/End Notification - Buffering notification support for videos. Now you can display an awesome ViroSpinner if your videos buffer!
Additional SceneNavigation Functionality - Read more about it at Scene Navigation.
New Code Samples - Product Showcase and VR Media Player - We just added two more new and awesome code samples with which to play and get started! Check them out here: Code Samples.

Fixes

  • Too many to list here, but our platform is now more stable and performs better! If you see anything, feel free to contact us or file an issue at the link at the top of this page.

Upgrade Instructions

For those of you running react-viro v1.0.0, the following instructions will guide you through updating your Viro project.

  1. In your terminal, run the command npm update -g react-viro-cli - this will update your react-viro-cli to the latest and will ensure that you won't need to perform this step every time you do react-viro init
  2. Change these dependencies in your Viro project's package.json file:

    • react 15.4.2 -> 16.0.0-alpha.6
    • react-native 0.41.2 -> 0.43.3
    • react-viro 1.0.0 -> 1.1.0
    • react-test-renderer 15.4.2 -> 16.0.0-alpha.6

    Your package.json dependencies should now look like the following:

    "dependencies": {
     "react": "16.0.0-alpha.6",
     "react-native": "0.43.3",
     "react-viro": "1.1.0"
    },
    "devDependencies": {
     "babel-jest": "19.0.0",
     "babel-preset-react-native": "1.9.1",
     "jest": "19.0.2",
     "react-test-renderer": "16.0.0-alpha.6"
    },
    
  3. Also in your package.json add the following line to the scripts section: "prestart": "./node_modules/react-viro/bin/run_ngrok.sh",
  4. Simply run npm install. Once that completes, you should now be able to use our v1.1.0 features!

react-viro v1.0.0 (Compatible with react-native v0.41.2)

This is it! We've launched our v1.0.0 and with it we have Cardboard for Android/iOS, GearVR and Daydream support! We're excited for you to get started developing, so head on over to our website and sign up for a key to access Viro!

p.s. As with all new releases (especially one as grand as this), there may be a few small issues so bear with us as we iron out the kinks. Check out the links at the top of this page if you need to contact us.

Releases


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.