{"_id":"5b74987b8326970003cfc0da","category":{"_id":"5b74987b8326970003cfc0a5","version":"5b74987b8326970003cfc12d","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":"5b74987b8326970003cfc12d","project":"578c4badbd223d2000cc1441","__v":0,"forked_from":"5b6890bfd389ff000384fac1","createdAt":"2018-04-23T20:03:35.726Z","releaseDate":"2018-04-23T20:03:35.726Z","categories":["5b74987b8326970003cfc0a3","5b74987b8326970003cfc0a4","5b74987b8326970003cfc0a5","5b74987b8326970003cfc0a6","5b74987b8326970003cfc0a7","5b74987b8326970003cfc0a8","5b74987b8326970003cfc0a9","5b74987b8326970003cfc0aa","5b74987b8326970003cfc0ab"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.9.1","version":"2.9.1"},"githubsync":"","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-03-17T18:56:22.539Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Android Simulator NOT supported\",\n  \"body\": \"ViroReact doesn't currently support the Android Simulator\"\n}\n[/block]\n# 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 React Viro for 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[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"npm install -S -E react-viro\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n## Updating your Application file\n\n1. In Android Studio, open your project\n2. Add the following import to the top of the application file:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import com.viromedia.bridge.ReactViroPackage;\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\n3. In `getPackages()` add a comma after `new MainReactPackage()`, and add the ReactViroPackage to the next line:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"new ReactViroPackage(ReactViroPackage.ViroPlatform.GVR)\",\n      \"language\": \"java\"\n    }\n  ]\n}\n[/block]\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[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"include ':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      \"language\": \"groovy\"\n    }\n  ]\n}\n[/block]\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[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"classpath 'com.android.tools.build:gradle:2.2.2'\",\n      \"language\": \"groovy\"\n    }\n  ]\n}\n[/block]\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 minSdkVersion and targetSdkVersion as follows:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"minSdkVersion 23\\ntargetSdkVersion 25\",\n      \"language\": \"groovy\"\n    }\n  ]\n}\n[/block]\n3. In the `dependencies` section, add the following dependencies:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"    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      \"language\": \"groovy\"\n    }\n  ]\n}\n[/block]\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[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"compile 'com.android.support:appcompat-v7:25.0.0'\",\n      \"language\": \"groovy\"\n    }\n  ]\n}\n[/block]\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>` node 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>` node:\n\n```<uses-permission android:name=\"android.permission.CAMERA\" />```\n\nYou will also need to add the following line to your `<application>` node:\n\n```<meta-data android:name=\"com.google.ar.core\" android:value=\"optional\" />```\n\nNote: If you want to restrict your app to ARCore-only devices, set the `android:value` to `\"required\"`. \n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Because of [existing issues with AR Core](https://github.com/google-ar/arcore-android-sdk/issues/130), please ensure that you have [disabled instant run in Android Studio](https://stackoverflow.com/questions/35168753/instant-run-in-android-studio-2-0-how-to-turn-off) before building your application!\",\n  \"title\": \"Building AR/ARCore With Android Studio\"\n}\n[/block]\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\nThese files can also be found in the `<your_project>/node_modules/react-viro/bin/files/javascript` directory. Copy the files over and update the key in `App.js`. You may also need to update the string `APP_NAME_HERE` in the `index.*.js` files with your project name.\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)


[block:callout] { "type": "danger", "title": "Android Simulator NOT supported", "body": "ViroReact doesn't currently support the Android Simulator" } [/block] # 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 React Viro for 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: [block:code] { "codes": [ { "code": "npm install -S -E react-viro", "language": "shell" } ] } [/block] ## Updating your Application file 1. In Android Studio, open your project 2. Add the following import to the top of the application file: [block:code] { "codes": [ { "code": "import com.viromedia.bridge.ReactViroPackage;", "language": "java" } ] } [/block] 3. In `getPackages()` add a comma after `new MainReactPackage()`, and add the ReactViroPackage to the next line: [block:code] { "codes": [ { "code": "new ReactViroPackage(ReactViroPackage.ViroPlatform.GVR)", "language": "java" } ] } [/block] [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: [block:code] { "codes": [ { "code": "include ':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')", "language": "groovy" } ] } [/block] **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: [block:code] { "codes": [ { "code": "classpath 'com.android.tools.build:gradle:2.2.2'", "language": "groovy" } ] } [/block] ## 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 minSdkVersion and targetSdkVersion as follows: [block:code] { "codes": [ { "code": "minSdkVersion 23\ntargetSdkVersion 25", "language": "groovy" } ] } [/block] 3. In the `dependencies` section, add the following dependencies: [block:code] { "codes": [ { "code": " 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.+'", "language": "groovy" } ] } [/block] **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: [block:code] { "codes": [ { "code": "compile 'com.android.support:appcompat-v7:25.0.0'", "language": "groovy" } ] } [/block] ## 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>` node 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>` node: ```<uses-permission android:name="android.permission.CAMERA" />``` You will also need to add the following line to your `<application>` node: ```<meta-data android:name="com.google.ar.core" android:value="optional" />``` Note: If you want to restrict your app to ARCore-only devices, set the `android:value` to `"required"`. [block:callout] { "type": "warning", "body": "Because of [existing issues with AR Core](https://github.com/google-ar/arcore-android-sdk/issues/130), please ensure that you have [disabled instant run in Android Studio](https://stackoverflow.com/questions/35168753/instant-run-in-android-studio-2-0-how-to-turn-off) before building your application!", "title": "Building AR/ARCore With Android Studio" } [/block] # 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. These files can also be found in the `<your_project>/node_modules/react-viro/bin/files/javascript` directory. Copy the files over and update the key in `App.js`. You may also need to update the string `APP_NAME_HERE` in the `index.*.js` files with your project name. [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.