Hire a ViroReact Expert 🛠️Sponsor on GitHub ❤️
HomeGuidesAPI ReferenceChangelogDiscussions
Hire a ViroReact Expert 🛠️Sponsor on GitHub ❤️Log In
Guides

Provider Setup

Suggest Edits

ViroReact v2.53.0 supports two anchor providers: ReactVision (default) and ARCore (Google). The provider prop on ViroARSceneNavigator controls which backend is used for both Cloud Anchors and Geospatial Anchors simultaneously.

// ReactVision (default — can be omitted)
<ViroARSceneNavigator initialScene={{ scene: MyARScene }} />

// ARCore (explicit)
<ViroARSceneNavigator provider="arcore" initialScene={{ scene: MyARScene }} />

New in v2.53.0: The old cloudAnchorProvider and geospatialAnchorProvider props are deprecated. Use the single provider prop instead. ViroCloudAnchorProvider and ViroGeospatialAnchorProvider types are deprecated aliases for the new ViroProvider type — they still compile with a deprecation warning.

Provider Comparison

ReactVision (Default)ARCore
API KeysrvApiKey + rvProjectId from ReactVision StudioGoogle Cloud API key with ARCore API enabled
Cloud AnchorsFull CRUD, GPS proximity search, asset linking, resolve analyticsHost and resolve only
Geospatial AnchorsCRUD, proximity search, 3D asset linking — no VPS or ARCore pods requiredRequires ARCore Geospatial API + VPS
Asset UploadsrvUploadAsset for 3D models, images, video, audioNot available
Platform SupportiOS + AndroidiOS + Android

ReactVision Provider (Default)

Get your API Key and Project ID from ReactVision Studio.

Expo Projects

Configure app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "@reactvision/react-viro",
        {
          "provider": "reactvision",
          "rvApiKey": "YOUR_REACTVISION_API_KEY",
          "rvProjectId": "YOUR_REACTVISION_PROJECT_ID"
        }
      ]
    ]
  }
}

Then rebuild:

npx expo prebuild --clean
npx expo run:ios
# or
npx expo run:android

Bare React Native (Non-Expo)

iOS

1. Add your API key and Project ID to Info.plist:

<key>RVApiKey</key>
<string>YOUR_REACTVISION_API_KEY</string>
<key>RVProjectId</key>
<string>YOUR_REACTVISION_PROJECT_ID</string>

2. Add required permissions to Info.plist:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera for augmented reality.</string>

Geospatial features only: If you are using Geospatial Anchors, also add location permissions:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app uses your location to place AR content in the real world.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app uses your location to place AR content in the real world.</string>

3. Install pods:

cd ios && pod install && cd ..

Android

1. Add your API key and Project ID to AndroidManifest.xml:

Add the following inside the <application> tag:

<meta-data
    android:name="com.reactvision.RVApiKey"
    android:value="YOUR_REACTVISION_API_KEY" />
<meta-data
    android:name="com.reactvision.RVProjectId"
    android:value="YOUR_REACTVISION_PROJECT_ID" />

2. Add required permissions to AndroidManifest.xml:

Add the following outside the <application> tag:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />

Geospatial features only: If you are using Geospatial Anchors, also add:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

3. Rebuild your app:

npx react-native run-android

ARCore Provider

⚠️

The following setup is only required if you explicitly set provider="arcore".

Google Cloud Setup

Before configuring your app, you need to set up Google Cloud:

  1. Go to Google Cloud Console
  2. Create a new project or select an existing one
  3. Enable the ARCore API:
    • Navigate to "APIs & Services" > "Library"
    • Search for "ARCore API"
    • Click "Enable"
  4. Create an API key:
    • Navigate to "APIs & Services" > "Credentials"
    • Click "Create Credentials" > "API key"
    • (Recommended) Restrict the key to the ARCore API

Expo Projects

Configure app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "@reactvision/react-viro",
        {
          "googleCloudApiKey": "YOUR_GOOGLE_CLOUD_API_KEY",
          "provider": "arcore",
          "android": {
            "xRMode": ["AR"]
          }
        }
      ]
    ]
  }
}

Then rebuild:

npx expo prebuild --clean
npx expo run:ios
# or
npx expo run:android

The Expo plugin automatically configures:

PlatformWhat the plugin adds
iOSGARAPIKey in Info.plist, use_frameworks! :linkage => :dynamic in Podfile, ARCore/CloudAnchors, ARCore/Geospatial, and ARCore/Semantics pods, location permission descriptions
Androidcom.google.android.ar.API_KEY meta-data, ACCESS_FINE_LOCATION, ACCESS_COARSE_LOCATION, CAMERA, and INTERNET permissions in AndroidManifest.xml

Bare React Native (Non-Expo)

iOS

1. Modify your Podfile:

Add the following to your ios/Podfile:

# Enable dynamic frameworks (required for ARCore)
use_frameworks! :linkage => :dynamic

# Add ARCore pods
pod 'ARCore/CloudAnchors', '~> 1.51.0'
pod 'ARCore/Geospatial', '~> 1.51.0'
pod 'ARCore/Semantics', '~> 1.51.0'  # Required for Scene Semantics support

Important: ARCore SDK requires use_frameworks! with dynamic linkage. This may affect other dependencies in your project.

2. Add API key to Info.plist:

<key>GARAPIKey</key>
<string>YOUR_GOOGLE_CLOUD_API_KEY</string>

3. Add required permissions to Info.plist:

<key>NSCameraUsageDescription</key>
<string>This app uses the camera for augmented reality.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app uses your location to place AR content in the real world.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app uses your location to place AR content in the real world.</string>

4. Install pods:

cd ios && pod install && cd ..

Android

1. Add API key to AndroidManifest.xml:

Add the following inside the <application> tag:

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

2. Add required permissions to AndroidManifest.xml:

Add the following outside the <application> tag:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />

3. (Optional) Override ARCore version in build.gradle:

ViroReact includes ARCore as a dependency, but you can override the version if needed:

dependencies {
    implementation 'com.google.ar:core:1.44.0'
}

4. Rebuild your app:

npx react-native run-android

Troubleshooting

"API key not found" errors

iOS (ReactVision): Verify RVApiKey and RVProjectId are in your Info.plist.

iOS (ARCore): Verify GARAPIKey is in your Info.plist.

Android (ReactVision): Verify com.reactvision.RVApiKey and com.reactvision.RVProjectId meta-data are in AndroidManifest.xml.

Android (ARCore): Verify com.google.android.ar.API_KEY meta-data is in AndroidManifest.xml.

"Not authorized" errors

  • Your API key may be invalid or expired
  • ReactVision: Visit ReactVision Studio to verify your credentials
  • ARCore: Check your Google Cloud Console to ensure the ARCore API is enabled and the key is not restricted incorrectly

ARCore pods not linking (iOS)

  • Ensure use_frameworks! :linkage => :dynamic is in your Podfile
  • Run pod install --repo-update to refresh pod specs
  • Check that no other dependency is forcing static linkage

Updated 1 day ago