introduction to react native & rendering charts / graphs

React Native

Introduction to React Native & Analytics Apps

using RN

1

Mobile Meetup - Citrix R&D

MOBILE MEETUP React Native

Little about Myself

2

Rahat Khanna

@mappmechanic

Bangalore

Front End Dev Blogger Authorblog.pusher.comairpair.compacktpub.com/blogpluralsight.org

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

MOBILE MEETUP React Native

Evolution of Mobile Apps

4

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

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 ReactNowadays 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 APIsDOM updates are slow

Applications are growing ever complex and data intensive

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.

MOBILE MEETUP React Native

Adopters & Users

Both Microsoft and Samsung committed to bringing React Native to Windows and Tizen

MOBILE MEETUP React Native

React Native Architecture

9

MOBILE MEETUP React Native

React Native Components

10

MOBILE MEETUP React Native

APIs for Device Interaction

11

• Camera Roll

• AsyncStorage

• Geolocation

• ImageEditor

• PushNotifications

• Vibration

• Share / Messages

MOBILE MEETUP React Native

Development Environment

MOBILE MEETUP React Native

Install RN CLI

13

npm install -g react-native-cli

or

yarn add -g react-native-cli

MOBILE MEETUP React Native

Running your Application

14

• Application Init • $ react-native init <project_name>

• IOS • $ react-native run-ios • edit index.ios.js

• Android • $ react-native run-android • edit index.android.js

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

MOBILE MEETUP React Native

JSX

16

• Merging ES and HTML

• Enhances Javascript semantics

• Forward leaning ES6 syntax

• Requires a transpiler

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

MOBILE MEETUP React Native

Supporting Tools/Libraries

18

MOBILE MEETUP React Native

Analytics/Charts Components

19

https://github.com/tomauty/react-native-chart

React Native 20

Thanks

mAppMechanic

twitter.com/mAppMechanic

linkedin.com/in/rahatkh

yehtechnologies@gmail.com

20