react native
TRANSCRIPT
![Page 1: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/1.jpg)
React NativeArtyom Trityak
![Page 2: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/2.jpg)
NATIVE mobile appsSeparated thread Native UI
Events bridge
![Page 3: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/3.jpg)
How to start• Buy Mac, install Xcode
• Install node.js, npm
• npm install -g react-native-cli
• react-native init LvivJSProject
• Open LvivJSProject.xcodeproj and hit run in Xcode
• Open index.ios.js in text editor and edit some lines
![Page 4: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/4.jpg)
React Native Webpackapp/*.js(x) -> index.ios.js
1
2
3
![Page 5: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/5.jpg)
React Native WebpackFix React Native imports
![Page 6: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/6.jpg)
React Native WebpackESLint
1
2
![Page 7: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/7.jpg)
React Native WebpackESLint
1
![Page 8: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/8.jpg)
RN base concepts• *.js -> index.ios.js
• RN pre-defined tags instead of html
• Inline styles (CSS in JS)
• RN components (like using components library)
![Page 9: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/9.jpg)
RN pre-defined tags
![Page 10: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/10.jpg)
JSS and StyleSheet• CSS StyleSheets abstraction -> iOS layout
• Flexbox from Web to Native
• Immutable
• Optimized (cached in table, using reference)
![Page 11: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/11.jpg)
JSS and StyleSheet
![Page 12: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/12.jpg)
JSS and StyleSheet
![Page 13: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/13.jpg)
JSS and StyleSheet
![Page 14: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/14.jpg)
Basic NATIVE components
TabBarIOS AlertIOS
![Page 15: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/15.jpg)
Basic NATIVE components
NavigatorIOS (title, swipes, back, etc) ActivityIndicatorIOS
![Page 16: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/16.jpg)
Basic NATIVE components
TouchableHighlight SwitchIOS
![Page 17: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/17.jpg)
Basic NATIVE components
PickerIOS SliderIOS
![Page 18: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/18.jpg)
Basic NATIVE components
• AsyncStorage (key-value pairs)
• TextInput
• View
• TouchableHighlight
![Page 19: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/19.jpg)
Network requests
XMLHttpRequeston top of iOS networking APIs
![Page 20: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/20.jpg)
Network requests
![Page 21: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/21.jpg)
Network requests
Fetchnew browser networking specification implementation top of iOS networking APIs
![Page 22: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/22.jpg)
Network requests
![Page 23: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/23.jpg)
Debugging
Just a browser:console.log, breakpoint
![Page 24: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/24.jpg)
Debugging
![Page 25: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/25.jpg)
Infrastructure
Just
![Page 26: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/26.jpg)
Infrastructure: JS
![Page 27: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/27.jpg)
Infrastructure: JS
![Page 28: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/28.jpg)
Infrastructure: JS
![Page 29: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/29.jpg)
Infrastructure: JS
![Page 30: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/30.jpg)
Infrastructure: JS
![Page 31: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/31.jpg)
Integrating with existing app
• // ReactView.h
• #import <UIKit/UIKit.h>
• @interface ReactView : UIView
• @end
![Page 32: React Native](https://reader035.vdocument.in/reader035/viewer/2022062401/5871ab581a28abda6a8b584b/html5/thumbnails/32.jpg)