diff --git a/docs/android-setup.html b/docs/android-setup.html index e9c1251f45d..30b6cc151b3 100644 --- a/docs/android-setup.html +++ b/docs/android-setup.html @@ -1,6 +1,6 @@ -Android Setup – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Android Setup

This guide describes basic steps of the Android development environment setup that are required to run React Native android apps on an android emulator. We don't discuss developer tool configuration such as IDEs here.

Install Git #

  • On Mac, if you have installed XCode, Git is already installed, otherwise run the following:

    brew install git

  • On Linux, install Git via your package manager.

  • On Windows, download and install Git for Windows. During the setup process, choose "Run Git from Windows Command Prompt", which will add Git to your PATH environment variable.

Install the Android SDK (unless you have it) #

  1. Install the latest JDK
  2. Install the Android SDK:

Define the ANDROID_HOME environment variable #

IMPORTANT: Make sure the ANDROID_HOME environment variable points to your existing Android SDK:

  • On Mac, add this to your ~/.bashrc, ~/.bash_profile or whatever your shell uses:

    # If you installed the SDK via Homebrew, otherwise ~/Library/Android/sdk -export ANDROID_HOME=/usr/local/opt/android-sdk

  • On Linux, add this to your ~/.bashrc, ~/.bash_profile or whatever your shell uses:

    export ANDROID_HOME=<path_where_you_unpacked_android_sdk>

  • On Windows, go to Control Panel -> System and Security -> System -> Change settings -> Advanced -> Environment variables -> New

NOTE: You need to restart the Command Prompt (Windows) / Terminal Emulator (Mac OS X, Linux) to apply the new Environment variables.

Use gradle daemon #

React Native Android use gradle as a build system. We recommend to enable gradle daemon functionality which may result in up to 50% improvement in incremental build times for changes in java code. Learn here how to enable it for your platform.

Configure your SDK #

  1. Open the Android SDK Manager (on Mac start a new shell and run android); in the window that appears make sure you check:
    • Android SDK Build-tools version 23.0.1
    • Android 6.0 (API 23)
    • Android Support Repository
  2. Click "Install Packages"

SDK Manager window SDK Manager window

Install Genymotion #

Genymotion is much easier to set up than stock Google emulators. However, it's only free for personal use. If you want to use the stock Google emulator, see below.

  1. Download and install Genymotion.
  2. Open Genymotion. It might ask you to install VirtualBox unless you already have it.
  3. Create a new emulator and start it.
  4. To bring up the developer menu press ⌘+M

Alternative: Create a stock Google emulator #

  1. Start a new shell and run android; in the window that appears make sure you check:
    • Intel x86 Atom System Image (for Android 5.1.1 - API 22)
    • Intel x86 Emulator Accelerator (HAXM installer)
  2. Click "Install Packages".
  3. Configure hardware acceleration (HAXM), otherwise the emulator is going to be slow.
  4. Create an Android Virtual Device (AVD):
    1. Run android avd and click on Create... -Create AVD dialog
    2. With the new AVD selected, click Start...
  5. To bring up the developer menu press F2
Next →
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Android Setup

This guide describes basic steps of the Android development environment setup that are required to run React Native android apps on an android emulator. We don't discuss developer tool configuration such as IDEs here.

Install Git #

  • On Mac, if you have installed XCode, Git is already installed, otherwise run the following:

    brew install git

  • On Linux, install Git via your package manager.

  • On Windows, download and install Git for Windows. During the setup process, choose "Run Git from Windows Command Prompt", which will add Git to your PATH environment variable.

Install the Android SDK (unless you have it) #

  1. Install the latest JDK
  2. Install the Android SDK:

Define the ANDROID_HOME environment variable #

IMPORTANT: Make sure the ANDROID_HOME environment variable points to your existing Android SDK:

  • On Mac, add this to your ~/.bashrc, ~/.bash_profile or whatever your shell uses:

    # If you installed the SDK via Homebrew, otherwise ~/Library/Android/sdk +export ANDROID_HOME=/usr/local/opt/android-sdk

  • On Linux, add this to your ~/.bashrc, ~/.bash_profile or whatever your shell uses:

    export ANDROID_HOME=<path_where_you_unpacked_android_sdk>

  • On Windows, go to Control Panel -> System and Security -> System -> Change settings -> Advanced -> Environment variables -> New

NOTE: You need to restart the Command Prompt (Windows) / Terminal Emulator (Mac OS X, Linux) to apply the new Environment variables.

Use gradle daemon #

React Native Android use gradle as a build system. We recommend to enable gradle daemon functionality which may result in up to 50% improvement in incremental build times for changes in java code. Learn here how to enable it for your platform.

Configure your SDK #

  1. Open the Android SDK Manager (on Mac start a new shell and run android); in the window that appears make sure you check:
    • Android SDK Build-tools version 23.0.1
    • Android 6.0 (API 23)
    • Android Support Repository
  2. Click "Install Packages"

SDK Manager window SDK Manager window

Install Genymotion #

Genymotion is much easier to set up than stock Google emulators. However, it's only free for personal use. If you want to use the stock Google emulator, see below.

  1. Download and install Genymotion.
  2. Open Genymotion. It might ask you to install VirtualBox unless you already have it.
  3. Create a new emulator and start it.
  4. To bring up the developer menu press ⌘+M

Alternative: Create a stock Google emulator #

  1. Start a new shell and run android; in the window that appears make sure you check:
    • Intel x86 Atom System Image (for Android 5.1.1 - API 22)
    • Intel x86 Emulator Accelerator (HAXM installer)
  2. Click "Install Packages".
  3. Configure hardware acceleration (HAXM), otherwise the emulator is going to be slow.
  4. Create an Android Virtual Device (AVD):
    1. Run android avd and click on Create... +Create AVD dialog
    2. With the new AVD selected, click Start...
  5. To bring up the developer menu press F2 (or install Frappé)
Next →
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Debugging

Debugging React Native Apps #

To access the in-app developer menu:

  1. On iOS shake the device or press control + ⌘ + z in the simulator.
  2. On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in genymotion you can press ⌘ + m to simulate hardware menu button click)

Hint

To disable the developer menu for production builds:

  1. For iOS open your project in Xcode and select Product → Scheme → Edit Scheme... (or press ⌘ + <). Next, select Run from the menu on the left and change the Build Configuration to Release.
  2. For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle assembleRelease task). Although this behavior can be customized by passing proper value to ReactInstanceManager#setUseDeveloperSupport.

Reload #

Selecting Reload (or pressing ⌘ + r in the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image to Images.xcassets on iOS or to res/drawable folder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.

Chrome Developer Tools #

To debug the JavaScript code in Chrome, select Debug in Chrome from the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.

In Chrome, press ⌘ + option + i or select View → Developer → Developer Tools to toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.

To debug on a real device:

  1. On iOS - open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.
  2. On Android, if you're running Android 5.0+ device connected via USB you can use adb command line tool to setup port forwarding from the device to your computer. For that run: adb reverse tcp:8081 tcp:8081 (see this link for help on adb command). Alternatively, you can open dev menu on the device and select Dev Settings, then update Debug server host for device setting to the IP address of your computer.

React Developer Tools (optional) #

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the component hierarchy via the React in the developer tools (see facebook/react-devtools for more information).

Live Reload #

This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:

  1. On iOS, select Enable Live Reload via the developer menu to have the application automatically reload when changes are made to the JavaScript.
  2. On Android, launch dev menu, go to Dev Settings and select Auto reload on JS change option

FPS (Frames per Second) Monitor #

On 0.5.0-rc and higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.

Next →
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Debugging

Debugging React Native Apps #

To access the in-app developer menu:

  1. On iOS shake the device or press control + ⌘ + z in the simulator.
  2. On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in genymotion you can press ⌘ + m to simulate hardware menu button click). You can also install Frappé, a tool for OS X, which allows you to emulate shaking of devices remotely. You can use ⌘ + Shift + R as a shortcut to trigger a shake from Frappé.

Hint

To disable the developer menu for production builds:

  1. For iOS open your project in Xcode and select Product → Scheme → Edit Scheme... (or press ⌘ + <). Next, select Run from the menu on the left and change the Build Configuration to Release.
  2. For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gradle assembleRelease task). Although this behavior can be customized by passing proper value to ReactInstanceManager#setUseDeveloperSupport.

Reload #

Selecting Reload (or pressing ⌘ + r in the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image to Images.xcassets on iOS or to res/drawable folder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.

Chrome Developer Tools #

To debug the JavaScript code in Chrome, select Debug in Chrome from the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.

In Chrome, press ⌘ + option + i or select View → Developer → Developer Tools to toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.

To debug on a real device:

  1. On iOS - open the file RCTWebSocketExecutor.m and change localhost to the IP address of your computer. Shake the device to open the development menu with the option to start debugging.
  2. On Android, if you're running Android 5.0+ device connected via USB you can use adb command line tool to setup port forwarding from the device to your computer. For that run: adb reverse tcp:8081 tcp:8081 (see this link for help on adb command). Alternatively, you can open dev menu on the device and select Dev Settings, then update Debug server host for device setting to the IP address of your computer.

React Developer Tools (optional) #

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the component hierarchy via the React in the developer tools (see facebook/react-devtools for more information).

Live Reload #

This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:

  1. On iOS, select Enable Live Reload via the developer menu to have the application automatically reload when changes are made to the JavaScript.
  2. On Android, launch dev menu, go to Dev Settings and select Auto reload on JS change option

FPS (Frames per Second) Monitor #

On 0.5.0-rc and higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.

Next →