Евгений Жарков "React Native: Hurdle Race"
2 likes332 views
The document details the release cycle and commit history of a React Native project by Eugene Zharkov, highlighting versions from October to January with significant commits. It also discusses limitations of Create React Native App, component integration steps for iOS and Android, and various navigation libraries available. Additionally, it covers animation handling and knowledge challenges faced during iOS/Android development, providing essential technical guidance and insights.
![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);
}}
"/>](https://image.slidesharecdn.com/zharkov-171130110411/85/React-Native-Hurdle-Race-15-320.jpg)
![Component Integration
iOS
1 In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
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 Build Phases ➜ Link Binary With Libraries
4 Run your project (Cmd+R)
Android
1 Open up android/app/src/main/java/[...]/MainActivity.java
• Add import com.hieuvp.fingerprint.ReactNativeFingerprintScannerPackage; to the imports at
the top of the file
• Add new ReactNativeFingerprintScannerPackage() 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](https://image.slidesharecdn.com/zharkov-171130110411/85/React-Native-Hurdle-Race-21-320.jpg)
Евгений Жарков "React Native: Hurdle Race"
- 1. Eugene Zharkov Full Stack Developer React Native: Hurdle Race
- 4. 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)
- 6. 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
- 7. OSS Life
- 9. 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%', }
- 10. borderStyle: 'solid' borderWidth: 1 borderColor: ‘#acb2b8’ CSS React Native CSS border: solid 1px #acb2b8
- 11. 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
- 12. Extended Styles • styled-components/css-to-react-native • pjjanak/react-native-nested-stylesheets • sabeurthabti/react-native-css • jspears/postcss-react-native
- 13. Layout: Flex buttons: { flex: 1, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', }
- 14. 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>
- 15. 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); }} "/>
- 17. Platform Specific import { Platform} from 'react-native'; or Component.ios.js Component.android.js import Component from ‘Component';
- 18. Application
- 19. Fast Start > npm install -g create-react-native-app > create-react-native-app my-app > cd my-app/ > npm start
- 20. Component Integration > npm install react-native-fingerprint-scanner —save > react-native link react-native-fingerprint-scanner Happy Way
- 21. Component Integration iOS 1 In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] 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 Build Phases ➜ Link Binary With Libraries 4 Run your project (Cmd+R) Android 1 Open up android/app/src/main/java/[...]/MainActivity.java • Add import com.hieuvp.fingerprint.ReactNativeFingerprintScannerPackage; to the imports at the top of the file • Add new ReactNativeFingerprintScannerPackage() 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
- 22. 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).
- 23. Navigation
- 24. Navigation Libs • ReactTraining/react-router (JS) • react-community/react-navigation (JS) • wix/react-native-navigation (native) • airbnb/native-navigation (native)
- 26. Navigation / Registration import { Navigation } from ‘react-native-navigation'; Navigation.registerComponent('pilot.Auth', () "=> Auth); or with Redux: Navigation.registerComponent('pilot.Auth', () "=> Auth, store, Provider);
- 27. Navigation / Start Storage.isUserExist() .then(exist "=> { const startScreen = exist ? 'pilot.Auth' : ‘pilot.CreateProfile'; Navigation.startSingleScreenApp({ screen: { screen: startScreen } }); });
- 28. Navigation / Go to this.props.navigator.push({ screen: 'pilot.CreateProfile.UserInfo', backButtonTitle: '', passProps: { phone: this.props.phone, pin: this.state.code, authType } });
- 29. Keyboard Aware View Medium Article
- 30. Debug • Chrome Developer Tools • facebook/react-devtools • jhen0409/react-native-debugger
- 31. Debug
- 32. Animation Demo
- 33. 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), } }
- 34. Animation: View <Animated.View style={{ ""...styles.outerContainer, opacity: fadeAnim, marginTop: topAnim }}>
- 35. Animation: Run Animated.timing(this.state.topAnim, { toValue: topStop, duration: 1000, easing: Easing.out(Easing.cubic) }).start();
- 37. Get used to Xcode
- 38. Get used to Android Studio
- 39. 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
- 40. Which Caused Wrong Estimates Estimated: 10 days Real: 16 days Difference: 50-60%