React Native is slowly becoming the preferred choice for developing mobile applications. If you are already a web developer, you will find that most of the principles of coding remain the same as it uses the same design as React. But the development flow might feel a bit overwhelming for someone who is creating a React Native app for the first time. In this talk, I will describe the various tools and methods that can simplify your development workflow. I will talk about the whys and hows of debugging, performance optimizations and improved release cycles so that the next time you are developing a React Native application, you feel at home.

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

2. 😥

3. Intro

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

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

6. Apps built using RN

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

8. Development

9. Type Checking

10. https://transform.now.sh
Automate It

11. UI Development

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

13. 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 "/>
)

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

15. Images

16. <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

17. Different Pixel Densities
Different Image Resolutions

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

19. <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

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

21. 40-50% size reduction on replacing png with SVG

22. Performance

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

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

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

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

27. Debugging

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

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

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

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

33. Debugging on Device
adb shell input keyevent 82

34. Dev Mode
Tap multiple times to enable
dev mode

35. 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

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

37. Releases

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

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

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

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

42. Expo

43. Getting Started
Scan a QR code
Open a Link

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

45. Native Features

46. Thank You
@ritz078