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!"
        }
      }
    ]
  ],
}

Running your expo app

iOS

expo run:ios will generate the ios/ folder and will run pod install in the project.

Bash

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

Android

Bash

expo run:android