Workshop: React Native mobilization http://ldn.lv/events/222075297

0_pre-req.md

React Native workshop

The instructions below are shortened version of Facebook React Native guides:

• Getting started
• Android SDK setup
• Running on Android device
• Running on iOS device

Mac OS X

Install Xcode 7 from App Store for iOS development. Bring Lightning / USB cable to connect the device.

Linux

Install Java Development Kit from packages or from Oracle

$ apt-get install openjdk-7-jdk

Install NVM and Node.js 4.x

Install NVM and then install Node.js:

$ nvm install v4.1.2
$ nvm alias default v4.1.2

Install React Native

$ npm install -g react-native-cli

Install Android SDK

For Android development install Android SDK, then:

$ export ANDROID_HOME=path/to/android-sdk    # add to ~/.bashrc
$ $ANDROID_HOME/tools/android

and install:

• Android SDK Tools
• Android SDK Platform-tools
• Android SDK Build-tools version 23.0.1
• Android 6.0 (API 23)
• Android that matches your device version
• Extras / Android Support Repository and Library

Bootstrap the project

$ react-native init InstagramReader
$ cd InstagramReader

Android

You must enable Developer Options and USB debuging. Enabling Stay awake is also convenient.

Connect the device. Check it is visible to SDK tools:

$ adb devices

Open another terminal window:

$ adb reverse tcp:8081 tcp:8081    # Android 5.0+ only
$ react-native start

In first terminal:

$ react-native run-android

On Android 4.x press hardware Menu button or shake the device and go to Dev Settings > Debug server host for device to set your workstation IP address. Choose Reload JS from the menu.

iOS

Start Xcode and open InstagramReader/ios/InstagramReader.xcodeproj. Edit InstagramReader/AppDelegate.m and put your Mac IP into jsCodeLocation.

Connect the device. Open Product > Destination menu and make sure your iPhone / iPad is selected. Hit Run button in left upper corner of the window.

Shake the device for Development menu.

Additional project libs

Install UI components for future use:

$ cd InstagramReader
$ npm install react-native-refreshable-listview --save
$ npm install react-native-grid-view --save

Register Instagram application

Login into Instagram, go to https://instagram.com/developer/ and create an app (Manage Client > Register a New Client) to obtain Client ID that is required to call Instagram's API. You may put http://tvnet.lv/ into Website and http://tvnet.lv/oauth into OAuth redirect uri. Any other URL-s would do too.