React Native AndroidReact Native meetup

OscarNYC May 11, 2016

Cameron MossDeveloper, Library For All

cameron@libraryforall.org

twitter: @fasterpancakes @LibraryForAll

What we do

Library For All is a nonprofit building a digital library for children livingin developing countries who have limited access to books

Curious About React Native?

Curious About React Native?

Start with Android!

For iOS you’ll need:

For iOS you’ll need:

1. An Apple Developer Account

2. A Mac

2. GUI Development Software

To install/demo an iOS app you’ll need to:

To install/demo an iOS app you’ll need to:

1. Apply for the iOS developer platform

2. Obtain a Certificate

3. Register your device

 

For Android you need:

 

For Android you need: 1. A text editor

2. A terminal

2. A device (or emulator)

To install/demo an Android app you’ll need to:

To install/demo an Android app you’ll need to:

1. Turn on developer mode (click “about phone” 10 times)

Setting up the Android Environment(you don’t need to install Android Studio)

http://facebook.github.io/react-native/releases/0.21/docs/getting-started.html 1. Install Android SDK (Software Development Kit) 2. Define the ANDROID_HOME environment variable

inside of ~/.bashrc: export ANDROID_HOME=’$HOME/Android/Sdk’

3. Configure the SDK

type “android” in the terminal install suggested packages

4. “npm install -g react-native-cli”

Create an app

1. Find a starter

2. Clone the app

3. “cd ./app”

4. “npm install”

Running an app

1. Connect a device or run Genymotion

2. “react-native start”

3. “react-native run-android”

4. “adb reverse tcp:8081 tcp:8081” (device) or enter IPAddress:8081

5. demo

Debugging Tools

1. shake the phone to get the menu

2. enable hot-reloading

3. debug in chrome

4. inspector

The Dance ( or adding Android Modules )

+ npm install [module]

Adding images

1. add your_image.png to /res folder

2. source={require(‘image!your_image’)} // no extension

3. you cannot use a this in a loop like require(imgArr[i])

Adding icons

1. add react-native-vector-icons (do the dance)

2. import Icon from ‘react-native-vector-icons/FontAwesome’

3. <Icon name=’android-menu’ size={30} color=’#fff’ />

Pain Points

1. UI

Pain Points

1. UI

2. List View

3. ES6 and sometimes not

4. Local Storage

Best Tools

1. Couchbase Lite (device database)

2. Redux

3. fetch(url).then((res) => if (res.status == 401) { return res.json(); }).catch((err) => { throw err; })

4. Color - Style - Google design guidelines

5. Facebook (upgrading whenever you can)

Final Thoughts

1. Production Ready?

2. Which Router?

Experimental or RN Router but not Navigator

3. Contributing