react native: hurdle race
TRANSCRIPT
![Page 1: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/1.jpg)
Eugene ZharkovFull Stack Developer
React Native: Hurdle Race
![Page 2: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/2.jpg)
![Page 3: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/3.jpg)
![Page 4: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/4.jpg)
Release Cycle
• 0.50 - October (270 commits)
• 0.49 - September (289 commits)
• 0.48 - September (526 commits)
• 0.47 - August (781 commits)
• 0.46 - July (977 commits)
• 0.45 - June (1325 commits)
• 0.44 - May (1731 commits)
• 0.43 - April (2134 commits)
• 0.42 - March (2487 commits)
• 0.41 - January (2777 commits)
• 0.41 - December (3243 commits)
![Page 5: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/5.jpg)
![Page 6: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/6.jpg)
Breaking Changes Happens
<Image> with nested content is no longer supported. Looking into <ImageBackground> instead if this is something you did in our app
Make RCTDeviceEventEmitter warnings fatal
Remove AdSupportIOS
![Page 7: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/7.jpg)
OSS Life
![Page 8: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/8.jpg)
![Page 9: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/9.jpg)
Styles: Almost CSS
cardIconText: { color: '#fff', fontSize: 14, fontWeight: '600', letterSpacing: 0.8 }, testDriveLine: { borderTopWidth: 1, borderTopColor: '#31353F', marginTop: 40 }, testDriveActions: { justifyContent: 'center', alignItems: 'center', marginVertical: 16 }
firstName: { fontSize: 17, backgroundColor: '#fff', borderColor: '#acb2b8', borderRadius: 5, borderWidth: 1, paddingVertical: 18, paddingHorizontal: 16, marginTop: 30, marginBottom: 12, width: '100%', }
![Page 10: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/10.jpg)
borderStyle: 'solid' borderWidth: 1 borderColor: ‘#acb2b8’
CSS
React Native CSS
border: solid 1px #acb2b8
![Page 11: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/11.jpg)
Styles: Almost CSS
• No inheritance, nesting, combinations, pseudo classes -> spaghetti only
• Lack of general styles border: 5px solid red
github/react-native-styling-cheat-sheet
![Page 12: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/12.jpg)
Extended Styles
• styled-components/css-to-react-native
• pjjanak/react-native-nested-stylesheets
• sabeurthabti/react-native-css
• jspears/postcss-react-native
![Page 13: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/13.jpg)
Layout: Flex
buttons: { flex: 1, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', }
![Page 14: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/14.jpg)
Layout: Markup
<ScrollView contentContainerStyle={ styles.container }> <View style={ styles.photoRow }> <TouchableHighlight style={ styles.photoWrapper } onPress={ this.onAvatarPress }> <Image style={ avatarStyle } source={ avatarSource } "/> "</TouchableHighlight> "</View> "</ScrollView>
![Page 15: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/15.jpg)
Platform Specific
<TextInput style={ styles.textInput } maxLength={ 10 } blurOnSubmit={ false } returnKeyType={ "next" } caretHidden autoFocus={ num "== 0 "&& this.props.autoFocus } autoCorrect={ false } spellCheck={false} clearTextOnFocus={false} underlineColorAndroid="transparent" numberOfLines={2} autoGrow={true} keyboardType="numeric" ref={ input "=> { this.inputs[num] = input; }} onChangeText={ (text) "=> this.onChange(num, text) } onSubmitEditing={() "=> { this.focusNextField(num + 1); }} "/>
![Page 16: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/16.jpg)
Platform Specific
spellCheck={false} clearTextOnFocus={false} underlineColorAndroid="transparent" numberOfLines={2} autoGrow={true} keyboardType="numeric"
Partially
![Page 17: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/17.jpg)
Platform Specific
import { Platform} from 'react-native';
or
Component.ios.js Component.android.js
import Component from ‘Component';
![Page 18: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/18.jpg)
Application
![Page 19: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/19.jpg)
Fast Start
> npm install -g create-react-native-app > create-react-native-app my-app > cd my-app/ > npm start
![Page 20: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/20.jpg)
Component Integration
> npm install react-native-fingerprint-scanner —save
> react-native link react-native-fingerprint-scanner
Happy Way
![Page 21: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/21.jpg)
Component Integration
iOS 1 In XCode, in the project navigator, right click Libraries ➜ AddFilesto[yourproject'sname] 2 Go to node_modules ➜ react-native-fingerprint-scanner and add
ReactNativeFingerprintScanner.xcodeproj 3 In XCode, in the project navigator, select your project. Add libReactNativeFingerprintScanner.a to
your project's BuildPhases ➜ LinkBinaryWithLibraries 4 Run your project (Cmd+R)
Android 1 Open up android/app/src/main/java/[...]/MainActivity.java • Add importcom.hieuvp.fingerprint.ReactNativeFingerprintScannerPackage; to the imports at
the top of the file • Add newReactNativeFingerprintScannerPackage() to the list returned by the getPackages() method 2 Append the following lines to android/settings.gradle: include':react-native-fingerprint-
scanner'3 project(':react-native-fingerprint-scanner').projectDir=new
File(rootProject.projectDir,'../node_modules/react-native-fingerprint-scanner/android')
4 5 Insert the following lines inside the dependencies block in android/app/build.gradle: compile
project(':react-native-fingerprint-scanner')
Real Way
![Page 22: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/22.jpg)
What are the limitations of Create React Native App?
The main limitation of a Create React Native App project is that it must be written in pure JavaScript and not have any dependencies which rely on custom native code (i.e. ones which require running react-native link to work).
![Page 23: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/23.jpg)
Navigation
![Page 24: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/24.jpg)
Navigation Libs
• ReactTraining/react-router (JS)
• react-community/react-navigation (JS)
• wix/react-native-navigation (native)
• airbnb/native-navigation (native)
![Page 25: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/25.jpg)
WIX / react-native-navigation
![Page 26: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/26.jpg)
Navigation / Registration
import { Navigation } from ‘react-native-navigation';
Navigation.registerComponent('pilot.Auth', () "=> Auth);
or with Redux:
Navigation.registerComponent('pilot.Auth', () "=> Auth, store, Provider);
![Page 27: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/27.jpg)
Navigation / Start
Storage.isUserExist() .then(exist "=> { const startScreen = exist ? 'pilot.Auth' :
‘pilot.CreateProfile'; Navigation.startSingleScreenApp({ screen: { screen: startScreen } }); });
![Page 28: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/28.jpg)
Navigation / Go to
this.props.navigator.push({ screen: 'pilot.CreateProfile.UserInfo', backButtonTitle: '', passProps: { phone: this.props.phone, pin: this.state.code, authType } });
![Page 29: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/29.jpg)
Keyboard Aware View
Medium Article
![Page 30: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/30.jpg)
Debug
• Chrome Developer Tools
• facebook/react-devtools
• jhen0409/react-native-debugger
![Page 31: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/31.jpg)
Debug
![Page 32: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/32.jpg)
Animation Demo
![Page 33: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/33.jpg)
Animation: Init
constructor(props) { super(props); let topStart = 0; if (props.index "<= 1) topStart = posterTopStart; else topStart = props.index % 2 ? 100 : 50; this.state = { fadeAnim: new Animated.Value(0), topAnim: new Animated.Value(topStart), } }
![Page 34: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/34.jpg)
Animation: View
<Animated.View style={{ ""...styles.outerContainer, opacity: fadeAnim, marginTop: topAnim }}>
![Page 35: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/35.jpg)
Animation: Run
Animated.timing(this.state.topAnim, { toValue: topStop, duration: 1000, easing: Easing.out(Easing.cubic) }).start();
![Page 36: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/36.jpg)
![Page 37: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/37.jpg)
Get used to Xcode
![Page 38: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/38.jpg)
Get used to Android Studio
![Page 39: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/39.jpg)
Knowledge Bottlenecks
• Test simultaneously iOS / Android
• Library Integration beyond react-native link
• Fix library compatibility with latest react-native version
• Learn a part of Swift / Java
• Setup iOS / Android build / deploy
![Page 40: React Native: Hurdle Race](https://reader031.vdocuments.mx/reader031/viewer/2022020301/5a6502c47f8b9a2e118b47ab/html5/thumbnails/40.jpg)
Which Caused Wrong Estimates
Estimated: 10 days Real: 16 days Difference: 50-60%