This document summarizes React Native for Android development. It covers mobile development platforms like Android and HTML5, compares technologies for mobile development, and key concepts of React Native like virtual DOM, components, and lifecycle. It also provides instructions for getting started with React Native, discusses components, custom modules, and pros and cons of React Native which include fast development time and performance with live reload.

1. Copyright © 2015, Scale Focus AD, www.scalefocus.com
React Native
for Android
November 2015
Penka Simonova

2. 2 www.scalefocus.com
1. Mobile developmant
› Android OS and others
› HTML5 vs Native apps
2. Comparison of technologies
3. React Native - key concepts
› Virtual DOM
› Components
› Lifecycle
4. Pros and Cons
Content

3. 3 www.scalefocus.com
Android OS and others

4. 4 www.scalefocus.com
Android OS and others

5. 5 www.scalefocus.com
HTML5 vs Native

6. 6 www.scalefocus.com
HTML5 vs Native

7. 7 www.scalefocus.com
Comparison of technologies

8. 8 www.scalefocus.com
Comparison of technologies

9. 9 www.scalefocus.com
Comparison of technologies

10. 10 www.scalefocus.com
Comparison of technologies

11. 11 www.scalefocus.com
React Native - key concepts

12. 12 www.scalefocus.com
React Native - key concepts

13. 13 www.scalefocus.com
Virtual DOM

14. 14 www.scalefocus.com
Declarative vs Imperative

15. 15 www.scalefocus.com
Getting started
› brew install node/watchman*
› Available via GitHub: git clone “repo”
› npm install –g react-native-cli -> react-native init
FirstProject ( and run)
› var React = require(‘react-native’);
› var styles = React.StyleSheet.create({ text: { color:
'black'} });
› var class = React.createClass({ getInitialState() and
Render() });
› module.exports = class;
React Native - key concepts

16. 16 www.scalefocus.com
Components

17. 17 www.scalefocus.com
Lifecycle

18. 18 www.scalefocus.com
public class MyCustomModule extends ReactContextBaseJavaModules {
@ReactMethod
public void processString(String input, Callback calback) {
callback.invoke(input.replace(“Bye”, “Hi”));
}
}
• Available as NativeModules. MyCustomModule.
processString(this.state.text, (text) => { this.setState({text}); });
Custom module with native language (Java)

19. 19 www.scalefocus.com
• Pros
› Very fast development time and performance
› Live reload
› Independent from data models, design patterns
› Async execution
• Cons
Pros and Cons

20. 20 www.scalefocus.com
Q & A

21. 21 www.scalefocus.com
Thank you