{"_id":"5a06037334873d0010b3926d","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":"57bb7e47afc18c0e00529cf3","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-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├── App.js\\n├── android\\n├── app.json\\n├── bin\\n├── index.android.js\\n├── index.ios.js\\n├── index.js\\n├── ios\\n├── js\\n├── node_modules\\n├── package.json\\n├── rn-cli.config.js\\n└── setup-ide.sh\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"* App.js - the main Javascript file containing the logic for the application\\n* android - the directory containing the Android source\\n* app.json - miscellaneous React Native property file\\n* bin - contains various scripts\\n* index.android.js - legacy file that points to App.js to launch your application for Android\\n* index.ios.js - legacy file that points to App.js to launch your application for iOS\\n* index.js - entry file that points to the main application in App.js\\n* ios - directory containing the iOS source\\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 - file that configures the React Native CLI (we use it to whitelist new file extensions for the packager server)\\n* setup-ide.sh - script used to automatically set up Xcode and Android Studio from scratch.\",\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 at least 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 on Android Device\n\n1. [Enable Developer Mode](https://developer.android.com/studio/debug/dev-options.html#enable) on your Android device\n2. [Enable USB Debugging](https://developer.android.com/studio/debug/dev-options.html#debugging) within the Developer Menu\n\n# 6. Run the Application\n\n1. Connect your device to your computer via USB. When a pop-up appears asking to \"Allow USB Debugging?\", select \"OK\".\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, it's recommended that you add this to your environment's $PATH variable.).\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 ViroReact"}

Set up Android Studio with ViroReact


[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├── App.js\n├── android\n├── app.json\n├── bin\n├── index.android.js\n├── index.ios.js\n├── index.js\n├── ios\n├── js\n├── node_modules\n├── package.json\n├── rn-cli.config.js\n└── setup-ide.sh", "language": "shell" } ] } [/block] [block:callout] { "type": "info", "body": "* App.js - the main Javascript file containing the logic for the application\n* android - the directory containing the Android source\n* app.json - miscellaneous React Native property file\n* bin - contains various scripts\n* index.android.js - legacy file that points to App.js to launch your application for Android\n* index.ios.js - legacy file that points to App.js to launch your application for iOS\n* index.js - entry file that points to the main application in App.js\n* ios - directory containing the iOS source\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 - file that configures the React Native CLI (we use it to whitelist new file extensions for the packager server)\n* setup-ide.sh - script used to automatically set up Xcode and Android Studio from scratch.", "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 at least 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 on Android Device 1. [Enable Developer Mode](https://developer.android.com/studio/debug/dev-options.html#enable) on your Android device 2. [Enable USB Debugging](https://developer.android.com/studio/debug/dev-options.html#debugging) within the Developer Menu # 6. Run the Application 1. Connect your device to your computer via USB. When a pop-up appears asking to "Allow USB Debugging?", select "OK". 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, it's recommended that you add this to your environment's $PATH variable.). 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).**