React Native: The Development Flow

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.

Transcript

1. React Native The Development Flow Ritesh Kumar / @ritz078 Lead SDE, Anarock
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 Devtools Refresh 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