A brief introduction to React Native and also best way to render analytics charts & graphs in React Native. Making cross platform ios and android apps.
2. MOBILE MEETUP React Native
Little about Myself
2
Rahat Khanna
@mappmechanic
Bangalore
Front End Dev Blogger Author
blog.pusher.com
airpair.com
packtpub.com/blog
pluralsight.org
3. MOBILE MEETUP React Native
Agenda
3
1. Discuss about Mobile Apps &
evolution of Mobiles
2. Introduction to React Native & its
Features
Some Cool Demos & Show off
for React Native
5. MOBILE MEETUP React Native
Hybrid Mobile Apps
5
2 Major Categories
Specific
Programming
Language
like C#, Javascript,
CoffeeScript
Webview Based Hybrid Apps
Cross Compiled Hybrid Apps
• Cross Platforms - iOS, Android, Windows
• Minimal Go To Market Time
• Rapid Iterations
• Availability of Skills like HTML5, CSS & Javascript
• Support for Multiple Screen Size using CSS3
• Support for OTA Update Pushes
6. MOBILE MEETUP React Native 6
What is ReactJS ?
• Library for building User Interfaces
• V part of MVC ( Model View Controller )
• Not a front end framework
• Built by Facebook for internal usage first
• Full Virtual DOM
• Can be used in any other framework as the View component
• Separation of Concerns
Motivation for React
Nowadays JS is very fast and new ES6 recommendation introduces powerful OOP principles
Main drawback is DOM, till now no complete standardisation has been made in DOM APIs
DOM updates are slow
Applications are growing ever complex and data intensive
7. MOBILE MEETUP React Native
History of React Native
7
• Started as internal project in a Hackathon
after React was open sources in 2013
• The first public preview was in January of
2015 at React.js Conference
• In March of 2015, Facebook announced at
F8 that React Native is open and available
on GitHub
• Its 14th most starred repository on
GitHub.
8. MOBILE MEETUP React Native
Adopters & Users
Both Microsoft and Samsung committed to bringing React
Native to Windows and Tizen
15. MOBILE MEETUP React Native
Platform Specific Code
15
• You can choose your method for keeping platform
specific code organised
• /common/components
• /android/components
• /ios/components
React Native provides a cleaner way to do that using
platform specific extensions - .ios.js & .android.js
MyCustomButton.ios.js & MyCustomButton.android.js
import MyCustomButton from ‘./components/MyCustomButton’;
• MyCustomButtonIOS.js
• MyCustomButtonAndroid.js
16. MOBILE MEETUP React Native
JSX
16
• Merging ES and
HTML
• Enhances Javascript
semantics
• Forward leaning ES6
syntax
• Requires a transpiler
17. MOBILE MEETUP React Native
Styling or CSS in Javascript
17
• All React Native core
components accept
a style attribute
• Both a single value
or an array of values