This document provides an introduction to React Native, including prerequisites, key concepts, architecture, libraries, and demos. React Native allows building mobile apps using React that work on both iOS and Android. It provides a native experience while allowing code reuse between platforms. Popular libraries that complement React Native development include React Navigation, React Redux, and NativeBase. The document demonstrates building a simple "Hello World" app and a production app with features like custom fonts and REST API integration. It discusses challenges like frequent React Native updates and debugging tools like Chrome and Reactotron.

1. Introduction to React-
Native
Waqqas Jabbar
23th May 2018

2. My Introduction
2000
NUST
2008
Right Hand Soft
Pvt. Ltd.
2012
Vadion (formally
Softrove)
2010
2016
20172004
2018
C C++ C# Web Mobile (RN)

3. Agenda
● Pre-requisites
○ Basic concepts of React.js
● Concepts
● Demos
○ Production app
○ Make Hello World App

4. React-Native
● Learn once, write anywhere (previously:
write once, run anywhere)
○ Provide native experience
● Built on React.js
● Available for
○ Android: 4.1+
○ iOS: 8+

5. Why React-Native
● Faster development speed
● Lower cost of development
○ Code reuse
○ Easy to find developers
● Ship across multiple platform
● Over the Air (OTA) updates

6. React-Native: Architecture
JS code running in
Virtual Machine (VM)

7. Who is using React-Native
Showcase

8. Prerequisites to React-Native Development
● JavaScript (Preferably ES6)
● Basic XCode/Android Studio usage
● Basic understanding on npm

9. Development Environment
● Any JavaScript Editor ( WebStorm, Atom)
● XCode
● Android Studio
● node/npm
● React-Native CLI
● Genymotion
● nvm ( Node version manager)
● yarn

10. Development Experience
● Close to web
● Code changes instantaneously updated on
mobile
● Use chrome for debugging

11. Complimentary Libraries
● React Navigation
● React Redux
● Redux Sagas
● Mobx
https://js.coach/?collection=React+Native
JS libraries:
moment.js, lodash.js

12. UI Libraries
● React-native-elements
● Nativebase
● Shoutem UI
● Use native components

13. Challenges in React-Native Development
● Frequent updates of React-Native
○ App should be updated regularly
● Third-party libraries can become outdated
react-native-git-upgrade

14. Debugging
● Google Chrome
● Performance Monitor
● Inspector
● Reactotron

15. Styling
● Flexbox
● Styled-components for CSS

16. Platform Specific Code
● filename.android.js
filename.ios.js
● Platform.OS === ‘android’
Platform.OS === ‘ios’
● <Component>Android
● <Component>IOS

17. Expo
https://expo.io/
● Wrapper on commonly used react-native
libraries
● iOS and Android App
● OTA
● Avoid for production apps (for now at
least)

18. Ignite CLI
● CLI
● Boilerplates, Plugins
$ ignite new MyApp
https://github.com/waqqas/ignite-aag-boilerplate
(MIT License)

19. Starting a new app
● npm install -g react-native-cli
● react-native init MyProject
● cd MyProject
● react-native run-ios
● react-native run-android
Installing a package
● yarn add <package-name>
● react-native link <package-name>

20. Demos

21. Demo 1 - My App
Let make an app
● Debug Screen
● Chrome Debugging

22. Demo 2 - Production App
Production App
● Custom fonts and icons
● REST API
● Firebase Notifications
● Firebase Dynamic Links
● Bridging

23. Thank you
QnA
Professional React-Native Workshop
(Coming Soon)
● Hands-on
● Intensive
Show your interest:
https://goo.gl/forms/WrmnQVm9Uz8Ldsfg1
https://www.linkedin.com/in/waqqasjabbar/
https://twitter.com/waqqasjabbar
https://medium.com/@waqqas/
https://www.upwork.com/fl/waqqasj
waqqas.jabbar@gmail.com