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

😥

Intro

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

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

Apps built using RN

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

Development

Type Checking

https://transform.now.sh
Automate It

UI Development

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

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 "=> <CenterView>{getStory()}"</CenterView>)
.add("Default", () "=> [
<Button title={"Hello"} key={1} "/>,
<Button title={"Hello"} key={2} color={colors.red} "/>,
<Button title={"Hello"} key={2.1} color={colors.red} disabled "/>,
<Button title={"Hello"} key={3} filled "/>,
<Button title={"Hello"} key={3.1} filled disabled "/>,
<Button title={"Hello"} key={4} iconName={"update"} "/>
]);
"// .add ("Another Configuration", () "=>
"// <Button "/>
)

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

Images

<Image source={require('./my-icon.png')} "/>
├── my-icon@2x.png
└── my-icon@3x.png
React Native will automatically look for the suitable
resolution with that file name

Different Pixel Densities
Different Image Resolutions

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

<svg
xmlns="http:"//""www.w3.org/2000/svg"
width=“200"
height="100"
version="1.1"
>
<rect
width="200"
height="100"
stroke="black"
stroke-width="6"
fill="green"
"/>
"</svg>
import
Svg,
{ Rect }
from "react-native-svg"
export default function() {
return (
<Svg width={200} height={100}>
<Rect
width={200}
height={100}
stroke="#000"
strokeWidth={6}
fill="green"
"/>
"</Svg>
)
}
HTML Code React Native Code

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

40-50% size reduction on replacing png with SVG

Performance

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

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

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

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

Debugging

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

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

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

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

Debugging on Device
adb shell input keyevent 82

Dev Mode
Tap multiple times to enable
dev mode

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

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);

Releases

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

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

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

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

Expo

Getting Started
Scan a QR code
Open a Link

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

Native Features

Thank You
@ritz078