How to write JavaScript native iOS (and later android) apps? React Native, basics, components and infrastructure.

1. React Native
Artyom Trityak

2. NATIVE mobile apps
Separated thread Native UI
Events bridge

3. How to start
• Buy Mac, install Xcode
• Install node.js, npm
• npm install -g react-native-cli
• react-native init LvivJSProject
• Open LvivJSProject.xcodeproj and hit run in Xcode
• Open index.ios.js in text editor and edit some lines

4. React Native Webpack
app/*.js(x) -> index.ios.js
1
2
3

5. React Native Webpack
Fix React Native imports

6. React Native Webpack
ESLint
1
2

7. React Native Webpack
ESLint
1

8. RN base concepts
• *.js -> index.ios.js
• RN pre-defined tags instead of html
• Inline styles (CSS in JS)
• RN components (like using components library)

9. RN pre-defined tags

10. JSS and StyleSheet
• CSS StyleSheets abstraction -> iOS layout
• Flexbox from Web to Native
• Immutable
• Optimized (cached in table, using reference)

11. JSS and StyleSheet

12. JSS and StyleSheet

13. JSS and StyleSheet

14. Basic NATIVE components
TabBarIOS AlertIOS

15. Basic NATIVE components
NavigatorIOS
(title, swipes, back, etc)
ActivityIndicatorIOS

16. Basic NATIVE components
TouchableHighlight SwitchIOS

17. Basic NATIVE components
PickerIOS SliderIOS

18. Basic NATIVE components
• AsyncStorage (key-value pairs)
• TextInput
• View
• TouchableHighlight

19. Network requests
XMLHttpRequest
on top of iOS networking APIs

20. Network requests

21. Network requests
Fetch
working specification implementation top of iOS

22. Network requests

23. Debugging
Just a browser:
console.log, breakpoint

24. Debugging

25. Infrastructure
Just

26. Infrastructure: JS

27. Infrastructure: JS

28. Infrastructure: JS

29. Infrastructure: JS

30. Infrastructure: JS

31. Integrating with existing app
• // ReactView.h
• #import <UIKit/UIKit.h>
• @interface ReactView : UIView
• @end