Slides from a React Native Meetup on May 11, 2016 on how to build Android apps quickly with everything a web developer already knows

1. React Native Android
React Native meetup
OscarNYC May 11, 2016
Cameron Moss
Developer, Library For All
cameron@libraryforall.org
twitter: @fasterpancakes @LibraryForAll

2. What we do
Library For All is a nonprofit building a digital library for children living
in developing countries who have limited access to books

3. Curious About React Native?

4. Curious About React Native?
Start with Android!

5. For iOS you’ll need:

6. For iOS you’ll need:
1. An Apple Developer Account
2. A Mac
2. GUI Development Software

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

8. 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

9.
For Android you need:

10.
For Android you need:
1. A text editor
2. A terminal
2. A device (or emulator)

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

12. To install/demo an Android app you’ll need to:
1. Turn on developer mode (click “about phone” 10 times)

13. 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”

14. Create an app
1. Find a starter
2. Clone the app
3. “cd ./app”
4. “npm install”

15. 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

16. Debugging Tools
1. shake the phone to get the menu
2. enable hot-reloading
3. debug in chrome
4. inspector

17. The Dance ( or adding Android Modules )
+ npm install [module]

18. 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])

19. 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’ />

20. Pain Points
1. UI

22. Pain Points
1. UI
2. List View
3. ES6 and sometimes not
4. Local Storage

23. 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)

24. Final Thoughts
1. Production Ready?
2. Which Router?
Experimental or RN Router but not Navigator
3. Contributing