v n o v i c k . c o m React Native C rash Course

v n o v i c k . c o m Vladimir Novick S o f t w a r e A r c h i t e c t & C o n s u l t a n t Web, Mobile, Virtual Reality, Augmented Reality, Mixed Reality & Internet of Things @VladimirNovick

v n o v i c k . c o m https:/ /goo.gl/mYiVmF React Native build mobile apps with JavaScript w Your go-to guide to creating native iOS and Android mobile applications using React and JavaScript

v n o v i c k . c o m Agenda ! What is React NaCve and why it’s different How React NaCve changes developer experience ! React NaCve under the hood and how it works ! GeJng started with React NaCve ! Styling React NaCve apps ! NavigaCon ! AnimaCons ! ! Networking PlaMorm APIs ! WriCng naCve code ! Deployment !

v n o v i c k . c o m Assumptions ! You are familiar with JavaScript and Web development You’ve at least heard about ReactJS library ! You are interested to learn React NaCve !

v n o v i c k . c o m Developer Experience E x p e r i e n c e d e v e l o p e r i s g o i n g t h r o u g h w h i l e d e v e l o p i n g

v n o v i c k . c o m DX in modern Web ! Hot reload / live reload Crome dev tools ! Instant visual feedback ! Remote code updates ! InspecCng app structure ! InspecCng network traffic ! Flexbox layout styling !

v n o v i c k . c o m DX in modern Web

v n o v i c k . c o m $188 billion US $ by 2020 Worldwide mobile apps revenues 0 50 100 150 200 2015 2016 2020 69.7 88.3 188.9 Billions of US $ World of mobile apps

v n o v i c k . c o m A little bit of history 2011 Facebook developed and started using ReactJS March 2013 ReactJS public release Summer 2013 React Native started as Facebook internal Hackathon 2015 React Native public release 2017 React Native is popular and powers lots of bestseller apps H o w R e a c t N a t i v e w a s b o r n

v n o v i c k . c o m What is ReactJS Declara?ve Component Based Learn once A J a v a S c r i p t l i b r a r y f o r b u i l d i n g u s e r i n t e r f a c e s

v n o v i c k . c o m React can run anywhere ! Browser Physical devices (react-iot) ! Mobile (React NaCve) ! Desktop ! ! VR (React VR) ! Server ! Other

v n o v i c k . c o m JSX

v n o v i c k . c o m Virtual DOM

v n o v i c k . c o m The ecosystem ! Npm (Node package manager) community packages Flux architecture (Redux/MobX/MST) ! ! Webpack (bundling, hot module reload, transpilaCon) Modern JavaScript (ES6/7/next) !

v n o v i c k . c o m The idea of React Native “React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.”

v n o v i c k . c o m Motivation ! Code reuse between various plaMorms Android/iOS/Web DeclaraCve and more funcConal programming style ! SCcking to the same ecosystem as on web ! Styling using modern CSS techniques in mobile world ! ! Smaller dev team is able to handle both Android and iOS

v n o v i c k . c o m Architecture

v n o v i c k . c o m Threading model ! Main Thread - layout, measuring, drawing Shadow thread - calculates layout changes ! ! JS thread - event loop execuCng js code and sending batched updates before next frame renders (60fps) NaCve modules threads - plaMorm apis !

v n o v i c k . c o m Execution flow Start Main Thread JS thread Shadow thread Na?ve Modules Layout React Render JS Startup Native Code

v n o v i c k . c o m Getting started

v n o v i c k . c o m Getting started CRNA " Good for a start, no need for iOS, Android dependencies RN CLI # When you want to integrate with exisCng app, want to write NaCve code

v n o v i c k . c o m RN CLI

v n o v i c k . c o m Project lifecycle React Native CLI React Native App JS Code JS Packager c r e a t e s i n s t a l l e d o n t o f e d i n t o f e d i n t o S i m u l a t o r o n l o c a l m a c h i n e

v n o v i c k . c o m CRNA B u i l t w i t h E x p o n e n t

v n o v i c k . c o m Exponent ! Built on top of React NaCve ! Desktop XDE ! AddiConal NaCve APIs ! Mobile Client ! Expo Snack playground heps:/ /snack.expo.io/

v n o v i c k . c o m Expo snack

v n o v i c k . c o m XDE ! Share your project in Expo Client app ! Develop on device without addiConal setup ! Manages react naCve packager processes ! AddiConal logging ! Publishing e x p o . i o / t o o l s

v n o v i c k . c o m CRNA vs Expo Can be ejected to vanilla React NaCve Can be ejected to React NaCve + Expokit

v n o v i c k . c o m Running your app CRNA " XDE RN CLI #

v n o v i c k . c o m Folder structure

v n o v i c k . c o m CRNA

v n o v i c k . c o m react-native-cli

v n o v i c k . c o m Code overview i n d e x . j s A p p . j s

v n o v i c k . c o m React Native DX

v n o v i c k . c o m

v n o v i c k . c o m Yoga Yoga is a cross-platform layout engine enabling maximum collaboration within your team by implementing an API familiar to many designers and opening it up to developers across different platforms. ! Do you know Flexbox? Then you know Yoga Styling your app looks like CSS ! ! Supports Java, C#, ObjecCve-C, C

v n o v i c k . c o m Navigation ! reactnavigaCon.org - If you start from scratch. Considered as standard and is advised in React NaCve docs ! airbnb.io/naCve-navigaCon - If you integrate React NaCve in exisCng app

v n o v i c k . c o m react-navigation

v n o v i c k . c o m Animations

v n o v i c k . c o m Layout Anima?on " Animated " Applied to all style properCes of component No need for specific values (heights/ widths) ! ! ! Less configurable ! Animates everything on next render Extremely configurable Can target specific components ! ! Uses requestAnimaConFrame by default For complex computaCon animaCons can stueer ! ! C o n s P r o s

v n o v i c k . c o m A n i m a t e d L a y o u t A n i m a t i o

v n o v i c k . c o m Layout Anima?on " Animated "

v n o v i c k . c o m F e t c h Fetch API Networking X H R W S XmlHttpRequest Web Sockets

v n o v i c k . c o m Platform APIs AccessibilityInfo, ActionSheetIOS, AdSupportIOS, Alert, AlertIOS, Animated, AppRegistry, AppState, AsyncStorage, BackAndroid, BackHandler, CameraRoll, Clipboard, DatePickerAndroid, Dimensions, Easing, Geolocation, ImageEditor, ImagePickerIOS, ImageStore, InteractionManager, Keyboard, LayoutAnimation, Linking, NativeMethodsMixin, NetInfo, PanResponder, PermissionsAndroid, PixelRatio, PushNotificationIOS, Settings, Share, StatusBarIOS, StyleSheet, Systrace, TimePickerAndroid, ToastAndroid, Vibration, VibrationIOS, Layout Props, Shadow Props

v n o v i c k . c o m Expo SDK APIs Accelerometer, Amplitude, AppLoading, Art, Asset, Audio, AV, BarCodeScanner, BlurView, Branch, Constants, Contacts, DocumentPicker, ErrorRecovery, Facebook, FacebookAds, Font, GLView, Google, Gyroscope, ImagePicker, KeepAwake, LinearGradient, Location, MapView, Notifications, Pedometer, Permissions, Segment, SQLite, Svg, takeSnapshotAsync, Util, Video, WebBrowser

v n o v i c k . c o m Dealing with native modules linking packages with native modules

v n o v i c k . c o m Writing your own native modules Objective-C

v n o v i c k . c o m Java ! Create the module by creaCng class that extends ReactContextBaseJavaModule Override createNaCveModules method ! Create class that implements ReactPackage ! ! Expose methods to JS using @ReactMethod

v n o v i c k . c o m N a t i v e m o d u l e C u s t o m p a c k a g e

v n o v i c k . c o m JS side

v n o v i c k . c o m Create a bundle Regular pre deploy pipeline Upload to store Create a bundle Create a bundle with production settings meaning it won’t have and dev tools and will be optimized for prod Upload to store By using tools like CodePush you will be able to change your JS bundle without uploading again Regular pre deploy pipeline Screenshots, Icons, certificates - the regular staff. Do it manually or use FastLane Deployment

v n o v i c k . c o m Contact me for consultation vnovick.com Thank you