# Adding AR/VR Capabilities

Now that you are able to successfully stream 3D content into React Native and know how to make custom adjustments, it's time to add AR capabilities to your project.

[Viro Media](https://viromedia.com/) provides a framework built for AR/VR development called [ViroReact](https://docs.viromedia.com/docs). It allows you to add AR/VR capabilities to your React Native app for devices that support [ARKit](https://developer.apple.com/arkit/) (AR for iOS), [ARCore](https://developers.google.com/ar/) (AR for Android), or [Cardboard](https://vr.google.com/cardboard/) (VR for iOS and Android).

{% hint style="warning" %}
 Viro libraries are now open-sourced and no longer maintained by Viro Media.
{% endhint %}

### 1. Setup a Simple AR Application

Clone our open-source [React Native + Viro + echo3D](https://github.com/echo3Dco/ReactNative-Viro-echo3D-example) example project.

Go to the root of the directory.

Run `npm install`.

### 2. Set your API Key

Edit the `App.js` script and type in your echo3D API key:

```javascript
/*
 * TODO: Add your API key below!!
 */
 var API_KEY = "<YOUR_API_KEY_HERE>";
```

### 3. Build and Run the AR Application

#### **Android**

1\. Make sure you download the [Android SDK](https://developer.android.com/studio) and [platform-tools](https://developer.android.com/studio/releases/platform-tools) for building Android apps.

2\. Set the environment variable `$ANDROID_HOME` and added platform-tools to `$PATH` variable.

In Linux/Mac:

```bash
export ANDROID_HOME=/YOUR_PATH_TO/Android/sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH
```

In Windows:

* Right-click the Computer icon and choose Properties, or in Windows Control Panel, choose System.
* Choose Advanced system settings.&#x20;
* On the Advanced tab, click Environment Variables.&#x20;
* Click New to create a new environment variable.
* Click Edit to modify an existing environment variable.
* After creating or modifying the environment variable, click Apply and then OK to have the change take effect.

3\. Build and launch the Android app by executing the following from the root of the project:

```bash
react-native run-android --variant=gvrDebug
```

#### iOS

1\. Open ViroSample.xcworkspace under the `ios/` directory in Xcode. Select the right "Team" for `ViroSample` and `ViroSampleTest` target under `General -> Signing`.

2\. Hit play to build and launch the app on your iOS device.

### 4. Use your AR Application

First, [add a 3D model](https://docs.echo3d.com/quickstart/add-a-3d-model) to the platform.

When the application is loaded on your mobile device, you might be asked to approve camera access permission.

Move the phone around and tap the screen to place the model on the surface.

The model will steam and render in front of you.

![](https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M41BcmqhdFQ3r89wcIR%2F-MB0uVYuXMvb0T18fV_D%2F-MB10j5m8Fza_TZH_3Yl%2FReactNative.gif?alt=media\&token=8110c21d-ce9a-4424-8c30-c687b99a574e)

{% hint style="info" %}
If the model is too big or too small, go back to the console and [add metadata](https://docs.echo3d.com/web-console/manage-pages/data-page/how-to-add-data#adding-metadata) to affect its scale. After adding metadata, the model should change automatically.&#x20;
{% endhint %}

**You did it! 🎉**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.echo3d.com/react-native/adding-ar-vr-capabilities.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.