React Native course by Bohdan Rusinka (JS developer at Binary Studio)

1. React Native
Show your application to public

2. Contents
1. Introduction
2. Building first scenes
3. Navigation/Swiping
4. Sockets/Animations/Push notifications etc.
5. Performance/Building application/Send to market

3. Building APK

4. Shake it

5. 60 FPS
1000ms / 60 = 16.5ms / frame

6. JS Frame rate
- Business logic
- SetState
- Animations
- Touches

7. E.g.
200ms / 16.5ms = 12 frames dropped

8. Main UI thread frame rate
Who’s there?
- ScrollView
- iOSNavigator

9. Performance killers
- Console.logs
- Dev mode
- Navigator transition (each frame)

10. Transition
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.setState({renderPlaceholderOnly: false});
});
}

11. How to improve performance more?
- Draw something before (rectangles like in facebook)
- Spinner

12. Animated API
- Notifies Interaction manager
- Works with interactions
- Still calculates each frame on demand of JS thread

13. Use layout animation
- But for static only

14. renderToHardwareTextureAndroid
On Android, this is useful for animations and interactions that only modify opacity, rotation, translation,
and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-
executed.
- Memory expensive

15. Animating size
- Width and height
- Transform scale

16. Touches
handleOnPress() {
// Always use TimerMixin with requestAnimationFrame, setTimeout and
// setInterval
this.requestAnimationFrame(() => {
this.doExpensiveAction();
});
}

17. Tools
- React-addons-perf
- Profiling

18. React-addons-perf
Perf.start()
// ...
Perf.stop()

19. Methods
printInclusive()
printExclusive()
printWasted()

20. Perf.printWasted(measurements)

21. Profiler
$ <path_to_android_sdk>/platform-tools/systrace/systrace.py -
-time=10 -o trace.html sched gfx view -a <your_package_name>

22. Reading

23. JS thread troubles

24. Main thread troubles

25. Building APK

26. Key
$ keytool -genkey -v -keystore my-release-key.keystore -alias
my-key-alias -keyalg RSA -keysize 2048 -validity 10000

27. ./gradle.properties
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

28. Build.gradle
signingConfigs {
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}

29. android {
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
Build.gradle

30. Build apk file
$ cd android && ./gradlew assembleRelease
android/app/build/outputs/apk/app-release.apk

31. Publish to market

41. iOS

42. Command
Product → Scheme → Edit Scheme (cmd + <)

47. Expo

50. Built-in components
import React from 'react';
import { Components } from 'expo';
export default class App extends React.Component {
render() {
return (
<Components.MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
);
}
}

51. Fastlane

52. Fastlane

54. CodePush

55. Code Push

56. Code
let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
class MyApp extends Component {
onButtonPress() {
codePush.sync({
updateDialog: true,
installMode: codePush.InstallMode.IMMEDIATE
});
}
render() {
<View>
<TouchableOpacity onPress={this.onButtonPress}>
<Text>Check for updates</Text>
</TouchableOpacity>
</View>
}
}
MyApp = codePush(codePushOptions)(MyApp);

57. Thanks!