This document provides an overview of React Native including building initial scenes, navigation, animations, performance optimization, building APKs, and publishing to app stores. It discusses key aspects like the main UI thread frame rate, tools for profiling performance, avoiding performance killers like console logs, and using the Animated API. It also covers building a release key, generating a signed APK, and integrating third-party libraries like Expo and CodePush.

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!