React Native Android

Slides from a React Native Meetup on how it's easier for web developers to learn react-native in Android than iOS. Learn how we built our android app at Library For All

Transcript

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