{"__v":0,"_id":"58f7a4c8cbd001190056cc03","category":{"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","_id":"58f7a4c8cbd001190056cbfb","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-03-17T19:00:39.218Z","from_sync":false,"order":2,"slug":"getting-started-android","title":"Android (Cardboard, GearVR, Daydream)"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"576c22a3808cf02b00d37419","version":{"__v":1,"_id":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","createdAt":"2017-04-19T17:56:24.172Z","releaseDate":"2017-04-19T17:56:24.172Z","categories":["58f7a4c8cbd001190056cbf9","58f7a4c8cbd001190056cbfa","58f7a4c8cbd001190056cbfb","58f7a4c8cbd001190056cbfc","58f7a4c8cbd001190056cbfd","58f7a4c8cbd001190056cbfe"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-03-17T18:56:22.539Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"# Integrating with a standard Android application\n\nBecause we built Viro with the intention that it operates like any other React Native module, you should first follow steps listed at React Native's [Integration with Existing Apps](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html) guide.\n\nOnce you follow those instructions, come back and follow the instructions in the next section below to add Viro to your project.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Each release of Viro is documented [here](doc:releases) with the React Native version that it was tested with. While other versions were not tested, they may still work with Viro, but the React Native version listed in [Releases](doc:releases) is the recommended version of React Native to use.\"\n}\n[/block]\n# Integrating with React Native for Android\n\n## Installing the latest react-viro package\n\nFrom the command line:\n1. Navigate to the root of your project\n2. Run the following to install the Viro module and add it to your `package.json` manifest:\n```\nnpm install -S -E react-viro\n```\n\n## Updating your Application file\n\n1. In Android Studio, open your project\n2. Add this line to the imports at the top of the file:\n```\nimport com.viromedia.bridge.ReactViroPackage;\n```\n3. In the `getPackages()` add a comma after `new MainReactPackage()`.\n4. Then add the following line:\n```\nnew ReactViroPackage(ReactViroPackage.ViroPlatform.GVR)\n```\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"We also support `OVR_MOBILE` if you want to build for GearVR.\\n\\nYou may also want to consider using Gradle's [Product Flavors](https://developer.android.com/studio/build/build-variants.html#product-flavors) in conjunction with [adding custom BuildConfig values](http://toastdroid.com/2014/03/28/customizing-your-build-with-gradle/) to add `GVR` and `OVR_MOBILE` product flavors to your application.\"\n}\n[/block]\n ## Updating `settings.gradle`\n\n1. In Android Studio, open the Project tab on left bar.\n2. Expand the `Gradle Scripts` section\n3. Open `settings.gradle` and add the following lines:\n```\ninclude ':react_viro', ':gvr_common', ':viro_renderer'\nproject(':gvr_common').projectDir = new File('../node_modules/react-viro/android/gvr_common')\nproject(':viro_renderer').projectDir = new File('../node_modules/react-viro/android/viro_renderer')\nproject(':react_viro').projectDir = new File('../node_modules/react-viro/android/react_viro')\n```\n\n## Updating the Project's `build.gradle` file\n\n1. In the Project tab, `Gradle Scripts` section, open the `build.gradle (Project: <YOUR_PROJECT>)` file\n2. Update the version of the `com.android.tools.build:gradle` depedency to `2.2.2`\n3. The line should look like this:\n```\nclasspath 'com.android.tools.build:gradle:2.2.2'\n```\n\n## Updating your App's `build.gradle`\n\n1. In the Project tab, `Gradle Scripts` section, open your app's build.gradle file\n2. Under the `defaultConfig` section, update the following values:\n```\n    minSdkVersion 23\n    targetSdkVersion 25\n```\n3. In the `dependencies` section, add the following dependencies:\n```\n    compile project(':gvr_common')\n    compile project(path: ':react_viro')\n    compile project(path: ':viro_renderer')\n    compile 'com.google.android.exoplayer:exoplayer:r2.2.0'\n    compile 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7'\n    compile 'com.amazonaws:aws-android-sdk-core:2.2.+'\n    compile 'com.amazonaws:aws-android-sdk-ddb:2.2.+'\n    compile 'com.amazonaws:aws-android-sdk-ddb-mapper:2.2.+'\n    compile 'com.amazonaws:aws-android-sdk-cognito:2.2.+'\n    compile 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.2.+'\n```\n3. Also under `dependencies`, update the `com.android.support:appcompat-v7:...` line to the following:\n```\n    compile 'com.android.support:appcompat-v7:25.0.0'\n```\n\n## Updating your AndroidManifest.xml\n\n### For Daydream/Cardboard\n\nIf your app supports Cardboard, you should add this `intent-filter` to the Activity containing your React Native logic:\n\n```\n<category android:name=\"com.google.intent.category.CARDBOARD\" />\n```\n\nIf you also want to support Daydream, you should also add this `intent-filter`\n\n```\n<category android:name=\"com.google.intent.category.DAYDREAM\" />\n```\n\n### For GearVR\n\nTo support GearVR, you need to add the following under the `<application>` tag in your `AndroidManifest.xml`:\n```\n<meta-data android:name=\"com.samsung.android.vr.application.mode\" android:value=\"vr_only\"/>\n```\n\n# Integrating with React Native\n\nAt this point, you should refer to the [Integrating with React Native](doc:integrating-with-react-native) guide which will guide you through adding Viro to your React Native scene.\n\n# Help\n\nIf you have any issues, feel free to file an issue or contact us at the links at the top of the page.","excerpt":"","slug":"integrating-existing-projects-android","type":"basic","title":"Integrating with Existing Projects (Android)"}

Integrating with Existing Projects (Android)


# Integrating with a standard Android application Because we built Viro with the intention that it operates like any other React Native module, you should first follow steps listed at React Native's [Integration with Existing Apps](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html) guide. Once you follow those instructions, come back and follow the instructions in the next section below to add Viro to your project. [block:callout] { "type": "info", "body": "Each release of Viro is documented [here](doc:releases) with the React Native version that it was tested with. While other versions were not tested, they may still work with Viro, but the React Native version listed in [Releases](doc:releases) is the recommended version of React Native to use." } [/block] # Integrating with React Native for Android ## Installing the latest react-viro package From the command line: 1. Navigate to the root of your project 2. Run the following to install the Viro module and add it to your `package.json` manifest: ``` npm install -S -E react-viro ``` ## Updating your Application file 1. In Android Studio, open your project 2. Add this line to the imports at the top of the file: ``` import com.viromedia.bridge.ReactViroPackage; ``` 3. In the `getPackages()` add a comma after `new MainReactPackage()`. 4. Then add the following line: ``` new ReactViroPackage(ReactViroPackage.ViroPlatform.GVR) ``` [block:callout] { "type": "info", "body": "We also support `OVR_MOBILE` if you want to build for GearVR.\n\nYou may also want to consider using Gradle's [Product Flavors](https://developer.android.com/studio/build/build-variants.html#product-flavors) in conjunction with [adding custom BuildConfig values](http://toastdroid.com/2014/03/28/customizing-your-build-with-gradle/) to add `GVR` and `OVR_MOBILE` product flavors to your application." } [/block] ## Updating `settings.gradle` 1. In Android Studio, open the Project tab on left bar. 2. Expand the `Gradle Scripts` section 3. Open `settings.gradle` and add the following lines: ``` include ':react_viro', ':gvr_common', ':viro_renderer' project(':gvr_common').projectDir = new File('../node_modules/react-viro/android/gvr_common') project(':viro_renderer').projectDir = new File('../node_modules/react-viro/android/viro_renderer') project(':react_viro').projectDir = new File('../node_modules/react-viro/android/react_viro') ``` ## Updating the Project's `build.gradle` file 1. In the Project tab, `Gradle Scripts` section, open the `build.gradle (Project: <YOUR_PROJECT>)` file 2. Update the version of the `com.android.tools.build:gradle` depedency to `2.2.2` 3. The line should look like this: ``` classpath 'com.android.tools.build:gradle:2.2.2' ``` ## Updating your App's `build.gradle` 1. In the Project tab, `Gradle Scripts` section, open your app's build.gradle file 2. Under the `defaultConfig` section, update the following values: ``` minSdkVersion 23 targetSdkVersion 25 ``` 3. In the `dependencies` section, add the following dependencies: ``` compile project(':gvr_common') compile project(path: ':react_viro') compile project(path: ':viro_renderer') compile 'com.google.android.exoplayer:exoplayer:r2.2.0' compile 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7' compile 'com.amazonaws:aws-android-sdk-core:2.2.+' compile 'com.amazonaws:aws-android-sdk-ddb:2.2.+' compile 'com.amazonaws:aws-android-sdk-ddb-mapper:2.2.+' compile 'com.amazonaws:aws-android-sdk-cognito:2.2.+' compile 'com.amazonaws:aws-android-sdk-cognitoidentityprovider:2.2.+' ``` 3. Also under `dependencies`, update the `com.android.support:appcompat-v7:...` line to the following: ``` compile 'com.android.support:appcompat-v7:25.0.0' ``` ## Updating your AndroidManifest.xml ### For Daydream/Cardboard If your app supports Cardboard, you should add this `intent-filter` to the Activity containing your React Native logic: ``` <category android:name="com.google.intent.category.CARDBOARD" /> ``` If you also want to support Daydream, you should also add this `intent-filter` ``` <category android:name="com.google.intent.category.DAYDREAM" /> ``` ### For GearVR To support GearVR, you need to add the following under the `<application>` tag in your `AndroidManifest.xml`: ``` <meta-data android:name="com.samsung.android.vr.application.mode" android:value="vr_only"/> ``` # Integrating with React Native At this point, you should refer to the [Integrating with React Native](doc:integrating-with-react-native) guide which will guide you through adding Viro to your React Native scene. # Help If you have any issues, feel free to file an issue or contact us at the links at the top of the page.