Upload
cameron-moss
View
229
Download
1
Embed Size (px)
Citation preview
React Native AndroidReact Native meetup
OscarNYC May 11, 2016
Cameron MossDeveloper, Library For All
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