{"_id":"58f7a4c8cbd001190056cc02","version":{"_id":"58f7a4c8cbd001190056cbf8","__v":1,"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"},"category":{"_id":"58f7a4c8cbd001190056cbfb","version":"58f7a4c8cbd001190056cbf8","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 (Cardboard, GearVR, Daydream)"},"__v":0,"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"57bb7e47afc18c0e00529cf3","updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-03-21T23:47:55.185Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Using Windows?\",\n  \"body\": \"The below instructions work for OSX/Linux. Windows instructions coming soon!\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Have you run through the Quick Start guide?\",\n  \"body\": \"Run through steps 1-4 on the Quick Start guide before running this .\"\n}\n[/block]\n# 1. Project Structure\nIf you've completed the Quick Start guide, you should be set up and the HelloWorld project works on the Viro Media App. Your workspace should look similar to the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ViroSample/\\n├── android\\n├── index.android.js\\n├── index.ios.js\\n├── ios\\n├── js\\n├── node_modules\\n├── package.json\\n└── rn-cli.config.js\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"* android - directory containing the Android project\\n* index.android.js - entry file for the android version of your application\\n* index.ios.js - entry file for the iOS version of your application\\n* ios - directory containing the iOS project\\n* js - directory containing the Javascript source\\n* node_modules - directory containing all the node modules as specified by the package.json file\\n* package.json - file that tells node what modules are required\\n* rn-cli.config.js - a file used to override some react-native cli settings\",\n  \"title\": \"What each file/directory is for\"\n}\n[/block]\n# 2. Run `setup_ide.sh` Script\n\nIn a terminal window, navigate to your Viro project root (**not** Android project root) and run the following:\n\n```./setup_ide.sh android```\n\nThis will set up the Android project to work with Viro.\n\n# 3. Android Studio\n\nAndroid Studio is the IDE (Integrated Developer Environment) used for Android development and we will need it to run and test your Viro React application. \n\n## Install a recent version of the JDK\nAndroid Studio requires a recent version of the JDK. If you don't have one installed, install one from [here](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)\n\n## Install Android Studio\nDownload and install Android Studio from [here](https://developer.android.com/studio/install.html).\n\n## Configuring Android Studio\nEnsure that Android Studio is configured with the following:\n* Google APIs\n* Android SDK Platform 23\n* Sources for Android 23\n\nby selecting Custom installation while installing Android Studio or by installing them from the SDK Manager under `Preferences -> Appearance & Behavior -> System Settings -> Android SDK`\n\n# 4. Open your project in Android Studio\n\nOpen Android Studio, if you see a welcome screen, select `Open an existing Android Studio project`, otherwise open the project with **File -> Open**.\n\nWhen the file explorer menu appears navigate to your Project location and open the `android/build.gradle` file\n\n# 5. Enable Developer Mode\n\nThe instructions may vary depending on your device, but the instructions are mostly like this:\n1. Go to `Settings`\n2. Go to `About Device`\n3. Tap on `Build Number` about 7 times (or more) until the toast at the bottom says you are a developer\n4. Go back to `Settings` and look for `Developer options`\n5. Scroll down to `USB debugging` and turn it on.\n\n# 6. Run the Application\n\n1. Connect your device to your development machine. Tap \"Trust\" if prompt appears on your computer and/or device.\n2. In your terminal, run this command `adb reverse tcp:8081 tcp:8081` which will reverse tether your device to your development machine. (Note: the `adb` command can be found under `platform-tools` wherever your sdk is installed).\n3. Ensure the target to the left of the green run button is set to \"app\" and tap on the green run button (see image below).\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/21908dc-btn_play.jpg\",\n        \"btn_play.jpg\",\n        561,\n        239,\n        \"#787779\"\n      ]\n    }\n  ]\n}\n[/block]\nRun the application and you should see the Hello World scene.\n \n**Congratulations, you now have Viro set up and running!**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/b07d6b0-viro_smile.gif\",\n        \"viro_smile.gif\",\n        180,\n        159,\n        \"#000000\"\n      ],\n      \"sizing\": \"smart\"\n    }\n  ]\n}\n[/block]\n# Additional Platforms\n\nOn Android, we support 3 VR Platforms: Google Daydream, Samsung/Oculus GearVR and Google Cardboard. For the Viro Platform however, we only have 2 build flavors: \n\n* GVR - for Google Daydream and Cardboard\n* OVR_MOBILE - for Samsung/Oculus GearVR.\n\n## From Android Studio\n\nOne way to toggle between the builds is to expand the `Build Variants` panel on the left edge of your Android Studio window and select either `gvrDebug` and `ovrDebug`.\n\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/a4615d0-btn_build_variants.jpg\",\n        \"btn_build_variants.jpg\",\n        235,\n        362,\n        \"#7d7b7d\"\n      ]\n    }\n  ]\n}\n[/block]\n## From the command line\n\nAnother way to build your native app is from the command line. Since Viro was built with the goal of working like any other React Native package, you can take advantage of the React Native CLI to build, package and deploy your application to your device.\n\nFrom the command line, you can run this command with one of the variants from your project's root directory:\n\n`react-native run-android --variant=<gvrDebug|ovrDebug>`\n\nto build your app for a selected variant.\n\n# Next Steps\nCheck out our [Tutorial](doc:tutorial) if you haven't yet gone through it!\n\n**Problems with installation? Need extra help? Post your issue [here](http://stackoverflow.com/search?q=react+viro).**","excerpt":"","slug":"installing-viro-android","type":"basic","title":"Set up Android Studio with Viro"}

Set up Android Studio with Viro


[block:callout] { "type": "warning", "title": "Using Windows?", "body": "The below instructions work for OSX/Linux. Windows instructions coming soon!" } [/block] [block:callout] { "type": "warning", "title": "Have you run through the Quick Start guide?", "body": "Run through steps 1-4 on the Quick Start guide before running this ." } [/block] # 1. Project Structure If you've completed the Quick Start guide, you should be set up and the HelloWorld project works on the Viro Media App. Your workspace should look similar to the following: [block:code] { "codes": [ { "code": "ViroSample/\n├── android\n├── index.android.js\n├── index.ios.js\n├── ios\n├── js\n├── node_modules\n├── package.json\n└── rn-cli.config.js", "language": "shell" } ] } [/block] [block:callout] { "type": "info", "body": "* android - directory containing the Android project\n* index.android.js - entry file for the android version of your application\n* index.ios.js - entry file for the iOS version of your application\n* ios - directory containing the iOS project\n* js - directory containing the Javascript source\n* node_modules - directory containing all the node modules as specified by the package.json file\n* package.json - file that tells node what modules are required\n* rn-cli.config.js - a file used to override some react-native cli settings", "title": "What each file/directory is for" } [/block] # 2. Run `setup_ide.sh` Script In a terminal window, navigate to your Viro project root (**not** Android project root) and run the following: ```./setup_ide.sh android``` This will set up the Android project to work with Viro. # 3. Android Studio Android Studio is the IDE (Integrated Developer Environment) used for Android development and we will need it to run and test your Viro React application. ## Install a recent version of the JDK Android Studio requires a recent version of the JDK. If you don't have one installed, install one from [here](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) ## Install Android Studio Download and install Android Studio from [here](https://developer.android.com/studio/install.html). ## Configuring Android Studio Ensure that Android Studio is configured with the following: * Google APIs * Android SDK Platform 23 * Sources for Android 23 by selecting Custom installation while installing Android Studio or by installing them from the SDK Manager under `Preferences -> Appearance & Behavior -> System Settings -> Android SDK` # 4. Open your project in Android Studio Open Android Studio, if you see a welcome screen, select `Open an existing Android Studio project`, otherwise open the project with **File -> Open**. When the file explorer menu appears navigate to your Project location and open the `android/build.gradle` file # 5. Enable Developer Mode The instructions may vary depending on your device, but the instructions are mostly like this: 1. Go to `Settings` 2. Go to `About Device` 3. Tap on `Build Number` about 7 times (or more) until the toast at the bottom says you are a developer 4. Go back to `Settings` and look for `Developer options` 5. Scroll down to `USB debugging` and turn it on. # 6. Run the Application 1. Connect your device to your development machine. Tap "Trust" if prompt appears on your computer and/or device. 2. In your terminal, run this command `adb reverse tcp:8081 tcp:8081` which will reverse tether your device to your development machine. (Note: the `adb` command can be found under `platform-tools` wherever your sdk is installed). 3. Ensure the target to the left of the green run button is set to "app" and tap on the green run button (see image below). [block:image] { "images": [ { "image": [ "https://files.readme.io/21908dc-btn_play.jpg", "btn_play.jpg", 561, 239, "#787779" ] } ] } [/block] Run the application and you should see the Hello World scene. **Congratulations, you now have Viro set up and running!** [block:image] { "images": [ { "image": [ "https://files.readme.io/b07d6b0-viro_smile.gif", "viro_smile.gif", 180, 159, "#000000" ], "sizing": "smart" } ] } [/block] # Additional Platforms On Android, we support 3 VR Platforms: Google Daydream, Samsung/Oculus GearVR and Google Cardboard. For the Viro Platform however, we only have 2 build flavors: * GVR - for Google Daydream and Cardboard * OVR_MOBILE - for Samsung/Oculus GearVR. ## From Android Studio One way to toggle between the builds is to expand the `Build Variants` panel on the left edge of your Android Studio window and select either `gvrDebug` and `ovrDebug`. [block:image] { "images": [ { "image": [ "https://files.readme.io/a4615d0-btn_build_variants.jpg", "btn_build_variants.jpg", 235, 362, "#7d7b7d" ] } ] } [/block] ## From the command line Another way to build your native app is from the command line. Since Viro was built with the goal of working like any other React Native package, you can take advantage of the React Native CLI to build, package and deploy your application to your device. From the command line, you can run this command with one of the variants from your project's root directory: `react-native run-android --variant=<gvrDebug|ovrDebug>` to build your app for a selected variant. # Next Steps Check out our [Tutorial](doc:tutorial) if you haven't yet gone through it! **Problems with installation? Need extra help? Post your issue [here](http://stackoverflow.com/search?q=react+viro).**