Integrating ViroReact with Expo

Installation instructions

🚧

ViroReact does NOT work with Expo Go

You must use a development client or expo prebuild to run an application using ViroReact.

After installing the package, add the config plugin to the plugins array of your app.json or app.config.js. Then rebuild your app as described in the "Adding custom native code" guide.

In your app.json plugins array:

JSON

{
  ... 
  "plugins": ["@reactvision/react-viro"]
}

Android Options

Using GVR, OVR_MOBILE, and/or AR on android

The default option is ["AR", "GVR"].

In order to change the XR mode on android, you can configure the plugin as follows:

Using one other option

JSON

{
 ...
 "plugins": [
    [
      "@reactvision/react-viro",
      {
        "android": {
        	xRMode: "GVR" // or "AR" or "OVR_MOBILE"
        }
      }
    ]
  ],
}

Using multiple options

JSON

{
 ...
 "plugins": [
    [
      "@reactvision/react-viro",
      {
        "android": {
        	xRMode: ["GVR", "AR", "OVR_MOBILE"]
        }
      }
    ]
  ],
}

You will also need to configure the android AppManifest.xml with some extra properties for this to work correctly.

1. Generate the android folder

Bash

expo prebuild --clean -p android --no-install

2. Modify AppManifest.xml

Add the code found under step 6 of the "For VR" step of the Install Android guide to your AppManifest.xml.

For VR

• If your app supports Cardboard or Daydream, you should add them as a category to the intent-filter in your activity:

XML

<intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
    <!-- Add the following line for cardboard -->
    <category android:name="com.google.intent.category.CARDBOARD" />
    <!-- Add the following line for daydream -->
    <category android:name="com.google.intent.category.DAYDREAM" />
</intent-filter>

• To support GearVR, you need to add the following under the <application> node:

XML

<meta-data android:name="com.samsung.android.vr.application.mode" android:value="vr_only"/>

For API level 30 or above

If you are targetting API Level 30 or above, make sure to add the following lines to the <manifest>:

XML

<queries>
    <package android:name="com.google.ar.core" />
</queries>

iOS options

There are 4 InfoPlist strings that are required for applications using Viro. ViroReact provides app.config level configuration for these InfoPlist strings and defaults for expo projects.

json

{
 ...
 "plugins": [
    [
      "@reactvision/react-viro",
      {
        "ios": {
        	"cameraUsagePermission": "$(PRODUCT_NAME) uses your camera for AR experiences. This is a custom InfoPlist string!",
          "microphoneUsagePermission": "$(PRODUCT_NAME) uses your microphone for AR experiences. This is a custom InfoPlist string!",
          "photosPermission": "$(PRODUCT_NAME) would like to read photos for AR experiences. This is a custom InfoPlist string!",
          "savephotosPermission": "$(PRODUCT_NAME) would like to save photos to your library during AR experiences. This is a custom InfoPlist string!"
        }
      }
    ]
  ],
}

Additional Requirements

As of v2.53.0, ReactVision ("reactvision") is the default provider for both Cloud Anchors and Geospatial Anchors. The ReactVision provider requires an rvApiKey and rvProjectId from ReactVision Studio — see ReactVision Studio Setup to generate these. If you need to use Google's ARCore provider instead, set provider to "arcore" in your plugin config (or on ViroARSceneNavigator) and provide a valid googleCloudApiKey. The old cloudAnchorProvider and geospatialAnchorProvider options are deprecated but still accepted as overrides.

Depending on what other packages you are using within your project, from version 2.50.1 onwards, you can also specify whether you want Cocoapods linking to be static or dynamic by adding iosLinkageto your plugin settings.

The iosLinkage, googleCloudApiKey, provider, rvApiKey, and rvProjectId are all optional values within your plugin. Since v2.53.0, provider defaults to "reactvision" — you only need to set it explicitly if you want to use "arcore" instead. When using the ReactVision provider, rvApiKey and rvProjectId are required for cloud and geospatial anchor functionality.

JSON

"@reactvision/react-viro",
{
  "android": {
    "xRMode": "AR"
  },
  "ios": {
    "cameraUsagePermission": "Your app uses your camera for AR experiences.",
    "microphoneUsagePermission": "Your app uses your microphone for AR experiences.",
    "photosPermission": "Your app would like to read photos for AR experiences.",
    "savephotosPermission": "Your app would like to save photos to your library during AR experiences."
  },
  "iosLinkage": "static",
  "googleCloudApiKey":"{you google cloud api key}",
  "provider": "reactvision",
  "rvApiKey": "YOUR_REACTVISION_API_KEY",
  "rvProjectId": "YOUR_REACTVISION_PROJECT_ID"
}

Run Prebuild

Run prebuild in order to create your native directories.

Text

npx expo prebuild --clean

Running your Expo app

iOS

Bash

npx expo run:ios -d <device id | device name>

Android

Bash

npx expo run:android

Install Depth Model

If you would like to offer depth-based features, such as occlusion, to users with non-LiDAR iOS devices, then you'll also need to follow the instructions for installing the required depth model.

Install and Set Up Depth Model →