burn your grass with react native
TRANSCRIPT
Burn your grass with React Native
Eugene Zharkov Frontend Developer
Release Cycle
• 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)
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
• Никакого наследования, комбинаторов, псевдо классов -> только спагетти
• Нехватка кратких свойств 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=newFile(rootProject.projectDir,'../node_modules/
react-native-fingerprint-scanner/android') 4 5 Insert the following lines inside the dependencies block in android/app/build.gradle: compileproject(':react-
native-fingerprint-scanner')
Real Way
Component Integration
Android Installation !> Make sure you are using react-native version >= 0.43. We also recommend using npm version >= 3 1 Install react-native-navigation latest stable version.
yarnaddreact-native-navigation@latest
2 Add the following in android/settings.gradle.include':react-native-navigation'
3 project(':react-native-navigation').projectDir=newFile(rootProject.projectDir,'../node_modules/react-native-navigation/android/app/')
4 Update project dependencies in android/app/build.gradle.android{
5 compileSdkVersion25 6 buildToolsVersion"25.0.1" 7 ... 8 } 9 10 dependencies{ 11 compilefileTree(dir:"libs",include:["*.jar"]) 12 compile"com.android.support:appcompat-v7:23.0.1" 13 compile"com.facebook.react:react-native:+" 14 compileproject(':react-native-navigation') 15 }
16 In MainActivity.java it should extend com.reactnativenavigation.controllers.SplashActivity instead of ReactActivity.This file can be located in android/app/src/main/java/com/yourproject/.importcom.reactnativenavigation.controllers.SplashActivity;
17 18 publicclassMainActivityextendsSplashActivity{ 19 20 }
If you have any react-native related methods, you can safely delete them.
21 In MainApplication.java, add the followingimportcom.reactnativenavigation.NavigationApplication;
22 23 publicclassMainApplicationextendsNavigationApplication{ 24 25 @Override 26 publicbooleanisDebug(){ 27 //MakesureyouareusingBuildConfigfromyourownapplication 28 returnBuildConfig.DEBUG; 29 } 30 31 protectedList<ReactPackage>getPackages(){ 32 //Addadditionalpackagesyourequirehere 33 //NoneedtoaddRnnPackageandMainReactPackage 34 returnArrays.<ReactPackage>asList( 35 //eg.newVectorIconsPackage() 36 ); 37 } 38 39 @Override 40 publicList<ReactPackage>createAdditionalReactPackages(){ 41 returngetPackages(); 42 } 43 }
Make sure that isDebug and createAdditionalReactPackages methods are implemented.
44 Update AndroidManifest.xml and set android:name value to .MainApplication<application
45 android:name=".MainApplication" 46 ... 47 />
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).
Versions Compatibility
Navigation
• 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 } });
Debug
• Chrome Developer Tools
• facebook/react-devtools
• jhen0409/react-native-debugger
Animation Demo
Build / Deploy
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 bit about Swift / Java
• Setup iOS / Android build / deploy
Which Caused Wrong Estimates
Estimated: 10 days Real: 16 days Difference: 50-60%
