{"_id":"5a06037334873d0010b3926e","category":{"_id":"5a06037134873d0010b39201","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__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 - Platform Setup"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"576c22a3808cf02b00d37419","version":{"_id":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":1,"createdAt":"2017-11-10T19:52:17.163Z","releaseDate":"2017-11-10T19:52:17.163Z","categories":["5a06037134873d0010b391ff","5a06037134873d0010b39200","5a06037134873d0010b39201","5a06037134873d0010b39202","5a06037134873d0010b39203","5a06037134873d0010b39204"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.1.0","version":"2.1.0"},"__v":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 Viro with Android\n\nAfter following React Native's \"Integration with Existing Apps\" guide above, you should now have an Android project that works with React Native. The following guide will pick up where that guide left off and show you how to add Viro to your project.\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', ':arcore_client', ':gvr_common', ':viro_renderer'\nproject(':arcore_client').projectDir = new File('../node_modules/react-viro/android/arcore_client')\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**Note:** If you don't want/need to use AR, then you can leave out the `arcore_client` config.\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(':arcore_client')\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```\n\n**Note:** If you don't want/need to use AR, then you can leave out the `arcore_client` dependencies.\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### For AR\n\nTo support AR, you need to add the following permission to your `AndroidManifest.xml` under the `manifest` tag:\n\n```<uses-permission android:name=\"android.permission.CAMERA\" />```\n\n# Adding Viro to React-Native\n\nNow that you've set up your project, copy over the `index.*.js` and `App.js` files from the project you created in the [Quick Start (Mac/Linux)](doc:quick-start) and copy over the `js/` directory.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"AR only\",\n  \"body\": \"Follow the instructions under \\\"Prepare your Device\\\" [here](https://developers.google.com/ar/develop/java/getting-started#prepare-device) to install the ARCore Services package from Google.\"\n}\n[/block]\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 Viro with Android After following React Native's "Integration with Existing Apps" guide above, you should now have an Android project that works with React Native. The following guide will pick up where that guide left off and show you how to add Viro to your project. ## 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', ':arcore_client', ':gvr_common', ':viro_renderer' project(':arcore_client').projectDir = new File('../node_modules/react-viro/android/arcore_client') 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') ``` **Note:** If you don't want/need to use AR, then you can leave out the `arcore_client` config. ## 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(':arcore_client') 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.+' ``` **Note:** If you don't want/need to use AR, then you can leave out the `arcore_client` dependencies. 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"/> ``` ### For AR To support AR, you need to add the following permission to your `AndroidManifest.xml` under the `manifest` tag: ```<uses-permission android:name="android.permission.CAMERA" />``` # Adding Viro to React-Native Now that you've set up your project, copy over the `index.*.js` and `App.js` files from the project you created in the [Quick Start (Mac/Linux)](doc:quick-start) and copy over the `js/` directory. [block:callout] { "type": "warning", "title": "AR only", "body": "Follow the instructions under \"Prepare your Device\" [here](https://developers.google.com/ar/develop/java/getting-started#prepare-device) to install the ARCore Services package from Google." } [/block] # Help If you have any issues, feel free to file an issue or contact us at the links at the top of the page.