Upload
eugene-zharkov
View
96
Download
0
Embed Size (px)
Citation preview
Eugene ZharkovFull Stack Developer
React Native: Hurdle Race
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)
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
OSS Life
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%', }
borderStyle: 'solid' borderWidth: 1 borderColor: ‘#acb2b8’
CSS
React Native CSS
border: solid 1px #acb2b8
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
Extended Styles
• styled-components/css-to-react-native
• pjjanak/react-native-nested-stylesheets
• sabeurthabti/react-native-css
• jspears/postcss-react-native
Layout: Flex
buttons: { flex: 1, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', }
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>
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); }} "/>
Platform Specific
spellCheck={false} clearTextOnFocus={false} underlineColorAndroid="transparent" numberOfLines={2} autoGrow={true} keyboardType="numeric"
Partially
Platform Specific
import { Platform} from 'react-native';
or
Component.ios.js Component.android.js
import Component from ‘Component';
Application
Fast Start
> npm install -g create-react-native-app > create-react-native-app my-app > cd my-app/ > npm start
Component Integration
> npm install react-native-fingerprint-scanner —save
> react-native link react-native-fingerprint-scanner
Happy Way
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
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).
Navigation
Navigation Libs
• ReactTraining/react-router (JS)
• react-community/react-navigation (JS)
• wix/react-native-navigation (native)
• airbnb/native-navigation (native)
WIX / react-native-navigation
Navigation / Registration
import { Navigation } from ‘react-native-navigation';
Navigation.registerComponent('pilot.Auth', () "=> Auth);
or with Redux:
Navigation.registerComponent('pilot.Auth', () "=> Auth, store, Provider);
Navigation / Start
Storage.isUserExist() .then(exist "=> { const startScreen = exist ? 'pilot.Auth' :
‘pilot.CreateProfile'; Navigation.startSingleScreenApp({ screen: { screen: startScreen } }); });
Navigation / Go to
this.props.navigator.push({ screen: 'pilot.CreateProfile.UserInfo', backButtonTitle: '', passProps: { phone: this.props.phone, pin: this.state.code, authType } });
Keyboard Aware View
Medium Article
Debug
• Chrome Developer Tools
• facebook/react-devtools
• jhen0409/react-native-debugger
Debug
Animation Demo
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), } }
Animation: View
<Animated.View style={{ ""...styles.outerContainer, opacity: fadeAnim, marginTop: topAnim }}>
Animation: Run
Animated.timing(this.state.topAnim, { toValue: topStop, duration: 1000, easing: Easing.out(Easing.cubic) }).start();
Get used to Xcode
Get used to Android Studio
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
Which Caused Wrong Estimates
Estimated: 10 days Real: 16 days Difference: 50-60%