How to start with ReactNative and avoid some mistakes.

1. Burn your grass with React Native
Eugene Zharkov
Frontend Developer

4. 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)

5. 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%',
}

6. borderStyle: 'solid'
borderWidth: 1
borderColor: ‘#acb2b8’
CSS
React Native CSS
border: solid 1px #acb2b8

7. Styles: Almost CSS
• Никакого наследования, комбинаторов, псевдо
классов -> только спагетти
• Нехватка кратких свойств border: 5px solid red
github/react-native-styling-cheat-sheet

8. Extended Styles
• styled-components/css-to-react-native
• pjjanak/react-native-nested-stylesheets
• sabeurthabti/react-native-css
• jspears/postcss-react-native

9. Layout: Flex
buttons: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
}

10. 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>

11. 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);
}}
"/>

12. Platform Specific
spellCheck={false}
clearTextOnFocus={false}
underlineColorAndroid="transparent"
numberOfLines={2}
autoGrow={true}
keyboardType="numeric"
Partially

13. Platform Specific
import { Platform} from 'react-native';
or
Component.ios.js
Component.android.js
import Component from ‘Component';

14. Application

15. Fast Start
> npm install -g create-react-native-app
> create-react-native-app my-app
> cd my-app/
> npm start

16. Component Integration
> npm install react-native-fingerprint-scanner —save
> react-native link react-native-fingerprint-scanner
Happy Way

17. 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

18. 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.
yarn add react-native-navigation@latest
2 Add the following in android/settings.gradle.
include ':react-native-navigation'
3 project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')
4 Update project dependencies in android/app/build.gradle.
android {
5 compileSdkVersion 25
6 buildToolsVersion "25.0.1"
7 ...
8 }
9
10 dependencies {
11 compile fileTree(dir: "libs", include: ["*.jar"])
12 compile "com.android.support:appcompat-v7:23.0.1"
13 compile "com.facebook.react:react-native:+"
14 compile project(':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/.
import com.reactnativenavigation.controllers.SplashActivity;
17
18 public class MainActivity extends SplashActivity {
19
20 }
If you have any react-native related methods, you can safely delete them.
21 In MainApplication.java, add the following
import com.reactnativenavigation.NavigationApplication;
22
23 public class MainApplication extends NavigationApplication {
24
25 @Override
26 public boolean isDebug() {
27 // Make sure you are using BuildConfig from your own application
28 return BuildConfig.DEBUG;
29 }
30
31 protected List<ReactPackage> getPackages() {
32 // Add additional packages you require here
33 // No need to add RnnPackage and MainReactPackage
34 return Arrays.<ReactPackage>asList(
35 // eg. new VectorIconsPackage()
36 );
37 }
38
39 @Override
40 public List<ReactPackage> createAdditionalReactPackages() {
41 return getPackages();
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

20. 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).

21. Versions Compatibility

22. Navigation
• ReactTraining/react-router (JS)
• react-community/react-navigation (JS)
• wix/react-native-navigation (native)
• airbnb/native-navigation (native)

23. WIX / react-native-navigation

24. Navigation / Registration
import { Navigation } from ‘react-native-navigation';
Navigation.registerComponent('pilot.Auth', () "=> Auth);
or with Redux:
Navigation.registerComponent('pilot.Auth', () "=> Auth,
store, Provider);

25. Navigation / Start
Storage.isUserExist()
.then(exist "=> {
const startScreen = exist ? 'pilot.Auth' :
‘pilot.CreateProfile';
Navigation.startSingleScreenApp({
screen: {
screen: startScreen
}
});
});

26. Navigation / Go to
this.props.navigator.push({
screen: 'pilot.CreateProfile.UserInfo',
backButtonTitle: '',
passProps: {
phone: this.props.phone,
pin: this.state.code,
authType
}
});

27. Debug
• Chrome Developer Tools
• facebook/react-devtools
• jhen0409/react-native-debugger

28. Animation Demo

29. Build / Deploy

30. Get used to Xcode

31. Get used to Android Studio

32. 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

33. Which Caused Wrong Estimates
Estimated: 10 days
Real: 16 days
Difference: 50-60%

34. Gracias!
@2j2e
eu.zharkov@gmail.com