react native: hurdle race

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%

Thank you!

@2j2e

eu.zharkov@gmail.com