React Native Android - Attach. Start. Debug!

One day I decided to learn smth that will enable me to use my knowledge of web-development in mobile-development, so I can just jump in it with minimum effort. And I started to look for such technology:

Cordova should be used when you have already had an existing mobile website which can be exposed as an app, and don't care about smooth animations, integration of the every possible platrofm feature. In that way you don't need developers for each major frontend platform, but only web-developers, that you already have.

React Native should be used when you have a team of React.js (or simply JavaScript) developers, thus enable them to use the same language (and probably framework) for the website, mobile app, and server. It is very good compromise when choosing between Cordowa and Native. 

Native, of cource, should be used when you want the absolute best user experience, latest features of the platform.

This info was found here:

https://www.reddit.com/r/javascript/comments/3wi2ty/cordova_vs_react_native_vs_native_ios_and_android/cxwpydg

---

The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere.

---

Prerequisites

Install & configure:

1. GIT
2. latest JDK
3. Android SDK
4. Define the ANDROID_HOME environment variable

   # ANDROID_HOME C:\Users\User\AppData\Local\Android\android-sdk
   # Path ;%ANDROID_HOME%\tools\;%ANDROID_HOME%\platform-tools\
   

5. (optionally) Use gradle daemon to decrease build time

   For more info go here: https://docs.gradle.org/2.9/userguide/gradle_daemon.html
   

6. Configure your SDK
   • Open the Android SDK Manager
   • Check Android SDK Build-tools version 23.0.1
   • Check Android 6.0 (API 23)
   • Check Android Support Repository
   • Install Packages

React-Native AwesomeProject Init

$ npm install -g react-native-cli
$ react-native init AwesomeProject

# Add Android Support to Existing Project:
# 1. Update the react-native dependency in your package.json file to the latest version
# 2. $ npm install
# 3. $ react-native android

# On Windows the packager won't be started automatically, so start it manually:
$ cd MyAwesomeApp
$ react-native start
# If you hit a ERROR Watcher took too long to load on Windows, increase 
# MAX_WAIT_TIME in ...\AwesomeProject\node_modules\react-native\packager\react-packager\src\FileWatcher\

Connect to the device

# Do not forget to enable usb-debugging in your device.
# Connect your device to the PC and then run:
| adb devices
# You should see the list of devices attached
| List of devices attached
| * daemon not running. starting it now on port 5037 *
| * daemon started successfully *
| 8T9PH6PFMFQW55YP        device
# If instead of 'device' you see 'unauthorized', take your device and click yes to authorize the computer.

Connect to the development server

# To be able to connect to development server from you device you can use adb reverse (Android 5.0+) or Wi-Fi
| $ adb reverse tcp:8081 tcp:8081
# How to connect to dev server via Wi-Fi you can find out here: 
# https://facebook.github.io/react-native/docs/running-on-device-android.html#configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi

Run & Debug on Device

# Try to run app on your device
| $ cd AwesomeProject
| $ react-native run-android
# It is possible that you will run into the same issue that I've faced: 
| Execution failed for task ':app:installDebug'.
| > com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs
# So what you should do is:
#  go toAweSomeProject\android\build.gradle
#  find and set(you can try other versions of grandle):
    dependencies {
        classpath 'com.android.tools.build:gradle:1.2.3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
# Try to execute 'react-native run-android' again.

Now let's try to open dev-tools in application, but here you can run into problem of another kind, if popups are restricted for the application:

After you complete these steps call dev-menu and:

• enable Live Reload
• cick Debug JS (now open Chrome and open http://localhost:8081/debugger-ui)

Some goodies

# Good catalog of react native components:
  https://js.coach/react-native

# Stackoverflow:
  http://stackoverflow.com/questions/tagged/react-native

# react-developer-tools:
  https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en