Slide 1

Slide 1 text

React Native The Development Flow Ritesh Kumar / @ritz078 Lead SDE, Anarock

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Intro

Slide 4

Slide 4 text

• Let’s us build mobile application • Same Design as React • True Native Behaviour

Slide 5

Slide 5 text

NativeScript “write once, use everywhere.” React Native “learn once, write everywhere”

Slide 6

Slide 6 text

Apps built using RN

Slide 7

Slide 7 text

react-native init myapp cd myapp yarn yarn build yarn start Getting started

Slide 8

Slide 8 text

Development

Slide 9

Slide 9 text

Type Checking

Slide 10

Slide 10 text

https://transform.now.sh Automate It

Slide 11

Slide 11 text

UI Development

Slide 12

Slide 12 text

react-storybook • Isolated UI Development • Faster updates while development • Snapshot testing using storyshots.

Slide 13

Slide 13 text

import React from "react"; import { storiesOf } from "@storybook/react-native"; import CenterView from "./CenterView"; import Button from "components/GenericButton"; import colors from "utilities/colors"; storiesOf("GenericButton", module) .addDecorator(getStory "=> {getStory()}") .add("Default", () "=> [ , , , , , ]); "// .add ("Another Configuration", () "=> "// )

Slide 14

Slide 14 text

Isolated UI Development •Decoupled from the app architecture •Developed like a library •Easier testing •Maintainable

Slide 15

Slide 15 text

Images

Slide 16

Slide 16 text

├── [email protected] └── [email protected] React Native will automatically look for the suitable resolution with that file name

Slide 17

Slide 17 text

Different Pixel Densities Different Image Resolutions

Slide 18

Slide 18 text

Use SVGs • Use react-native-svg • Optimize svg using something like svgo

Slide 19

Slide 19 text

import Svg, { Rect } from "react-native-svg" export default function() { return ( ) } HTML Code React Native Code

Slide 20

Slide 20 text

https://transform.now.sh/svg-to-react-native Automate It

Slide 21

Slide 21 text

40-50% size reduction on replacing png with SVG

Slide 22

Slide 22 text

Performance

Slide 23

Slide 23 text

InteractionManager.runAfterInteractions InteractionManager.runAfterInteractions(() "=> { "// ""...long-running synchronous task""... }); Runs code after the current animations have finished

Slide 24

Slide 24 text

requestAnimationFrame requestAnimationFrame(() "=> { "// ""...task""... }); • Runs code before next repaint • If you are using Animated API, it takes care of the frame updates for you.

Slide 25

Slide 25 text

InteractionManager.runAfterInteractions(() "=> { "// ""...long-running synchronous task""... }); requestAnimationFrame(() "=> { "// ""...task""... }); VS

Slide 26

Slide 26 text

Long Lists •Don’t use ScrollView •Use FlatList or SectionList •They use VirtualizedList internally

Slide 27

Slide 27 text

Debugging

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Open Devtools Refresh on file Change Update Changed Code Inspect components & Touchable areas FPS Monitor

Slide 30

Slide 30 text

Better Debugging (Inspect + Devtools + Redux) react-native-debugger

Slide 31

Slide 31 text

• Use default debugger unless it isn’t useful. It’s fast • Turn off network monitoring if you don’t need it

Slide 32

Slide 32 text

Live Reload • Reloads the entire page. • State is lost. • Updates the changed code. • State is not lost. Hot Reloading

Slide 33

Slide 33 text

Debugging on Device adb shell input keyevent 82

Slide 34

Slide 34 text

Dev Mode Tap multiple times to enable dev mode

Slide 35

Slide 35 text

import * as Rx from “rxjs"; this.devModeStream = new Rx.Subject(); this.devModeStream .bufferWhen(() "=> this.devModeStream.debounceTime(1000)) .filter(x "=> x.length ">= 6) .subscribe(this.toggleDevMode); Create a stream

Slide 36

Slide 36 text

import * as Rx from “rxjs"; this.devModeStream = new Rx.Subject(); this.devModeStream .bufferWhen(() "=> this.devModeStream.debounceTime(1000)) .filter(x "=> x.length ">= 6) .subscribe(this.toggleDevMode); onClick this.devModeStream.next(event);

Slide 37

Slide 37 text

Releases

Slide 38

Slide 38 text

beta beta_native master JS only changes Native + JS Changes Codepush Play Store 2.1.x 2.x.0

Slide 39

Slide 39 text

Minor (2.5.x) Major (2.6.0) All PRs that will go in CodePush Update Native release Beta Beta Native

Slide 40

Slide 40 text

Release Cycle Native OTA Fortnightly Bug Fixes - Instantly Features - Weekly

Slide 41

Slide 41 text

Keep in mind "react-native-image-picker": "^0.26.7" Don’t do this or your OTA might break your app.

Slide 42

Slide 42 text

Expo

Slide 43

Slide 43 text

Getting Started Scan a QR code Open a Link

Slide 44

Slide 44 text

Online expo editor https://snack.expo.io/

Slide 45

Slide 45 text

Native Features

Slide 46

Slide 46 text

Thank You @ritz078