Since its 2013 release, React has brought a new way to design UI components in the world wide web. The same fundamentals have been taken to another important environment in our contemporary world: the mobile applications. We'll see the philosophy behind React Native - learn once, write anywhere - and how this new framework helps developers to build native apps using React.

1. @matteomanchi
Matteo Manchi
ROME 10-11 NOVEMBER 2017
React Native for multi-platform
mobile applications
1

2. @matteomanchi
If you want to participate actively with this talk,
please install Expo app on your smartphone.
2
Attention

3. @matteomanchi
Mobile Development
3

4. @matteomanchi 4
Mobile Development
Native is hard…

5. @matteomanchi 5
Different platforms

6. @matteomanchi 6
Different languages

7. @matteomanchi 7
Different look

8. @matteomanchi
… but necessary.
8
Mobile Development
Native is hard…

9. @matteomanchi
Matteo Manchi
} CEO at Impronta Advance
} Full stack developer
} React enthusiast
} Co-founder of RomaJS
} Maintainer of italia/design-react
} @matteomanchi
} https://github.com/takeno
9
About Me

10. @matteomanchi
Web Developer
My journey to app development
10
⬇
Mobile site version
⬇
Mobile application ➡➡ WTF?

11. @matteomanchi
Phone Gap with box-shadow
11

12. @matteomanchi
Web Developer
My journey to app development
12
⬇
Mobile site version
⬇
Mobile application ➡
⬇
⬅⬅

13. @matteomanchi
Titanium - Red Screen of Death
13

14. @matteomanchi
Front-end experience
14

15. @matteomanchi
React is a JavaScript library
for building user interfaces
developed by Facebook.
It allows you to define your UI using Components, which are
reusable, and it helps UI updates through Declarative UI.
All this overhead is minimized by Virtual DOM.
15
What is React?

16. @matteomanchi
■ Component: Everything is a component
■ Props: some data passed to child component
■ State: some internal data of a component
■ JSX: XML-like syntax helps to define component's
structure
■ Virtual DOM: tree of custom objects representing a port
of the DOM
16
Some keywords

17. @matteomanchi
Component definition
17
class Hello extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(
<Hello name="Milan" />,
document.getElementById('container')
);

18. @matteomanchi
A framework for building native apps using React.
18
React Native
Yeah, the same React of web developers
Learn once, write anywhere.

19. @matteomanchi
■ Summer 2013: React Native started as project in
Facebook’s internal hackaton
■ January 2015: During the React.js-conf, React Native
first public demo was shown
■ March 2015: React Native has been published as open
source project.
A brief history of React Native
19

20. @matteomanchi
Codemotion 2015
https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html 20

21. @matteomanchi
■ Summer 2013: React Native started as project in
Facebook’s internal hackaton
■ January 2015: During the React.js-conf, React Native
first public demo was shown
■ March 2015: React Native has been published as open
source project.
■ May 2016: search terms of React Native surpassed iOS
and Android development, according to Google Trends
A brief history of React Native
21

22. @matteomanchi
Component definition
22

23. @matteomanchi
Demo time!
23

24. @matteomanchi
■ npm install -g create-react-native-app
■ create-react-native-app MyNativeApp
■ cd MyNativeApp
■ npm start
■ Install Expo app for Android and iOS
■ Connect your device
24
Getting started

25. @matteomanchi
■ React-native-based company in Palo Alto
■ Huge contribution to React Native
■ Maintainers of create-react-native-app
■ Expo SDK
■ XDE
■ snack.expo.io
Expo
25

26. @matteomanchi 26
How it works
Native Bridge
Your code
JavaScript Core
bundle.js
Native View
render

27. @matteomanchi
React renders your entire app as a plain object, totally
decoupled from DOM. On every change, it performs the diff
of previous object tree with the new one. Then it change
only the partial DOM which is mutated.
27
Virtual DOM
<div>
Hello {this.props.name}
</div>
Js-plain version
JSX
Transpiler
Object Tree
react
engine
DOM
react-dom
engine

28. @matteomanchi
JSX: <div>Hello {this.props.name}</div>
JS: React.createElement("div", null,
"Hello ", this.props.name);
Object:
DOM:
28
Virtual DOM

29. @matteomanchi 29
From Virtual DOM to Native
<Text>
Hello {this.props.name}
</Text>
Js-plain version
JSX
Transpiler
Object Tree
react
engine
Native
react-native
engine

30. @matteomanchi 30
About multi-platform
Business logic in JavaScript
means same codebase
between platforms.

31. @matteomanchi
JSCore allows you to use your favorite
JavaScript modules and tools!
31
JS Ecosystem

32. @matteomanchi
Style
32
■ CSS-like declarations with camel-case properties
■ style props defined for all native components
■ It can be an array of styles
■ StyleSheet module to create multiple classes in one place
and cache them
It supports Flexbox!

33. @matteomanchi
React Native wraps native UI components
33
Out-of-the-box
■ TabBar
■ Text
■ TextInput
■ Touchable
■ TouchableOpacity
■ Touchable Highlight
■ Touchable WithoutFeedback
■ View
■ WebView
■ Activity Indicator
■ Date Picker
■ Image
■ ListView
■ MapView
■ Navigator
■ Picker
■ ScrollView
■ Slider

34. @matteomanchi 34
Out-of-the-box
■ InteractionManager
■ Keyboard
■ LayoutAnimation
■ Linking
■ NetInfo
■ PanResponder
■ PixelRatio
■ Settings
■ Share
■ StatusBar
■ TimePickerAndroid
■ ToastAndroid
■ Vibration
■ ActionSheetIOS
■ Alert
■ Animated
■ AppState
■ AsyncStorage
■ BackAndroid
■ CameraRoll
■ Clipboard
■ DatePickerAndroid
■ Dimensions
■ Easing
■ Geolocation
■ ImageEditor
React Native wraps native API

35. @matteomanchi 35
Out-of-the-box
■ GeoLocation
■ Timers
● setTimeout
● setInterval
■ Flexbox
■ Network
● XMLHttpRequest
● Fetch
React Native injects polyfills in JS Core

36. @matteomanchi
React Native have useful tools to improve your
development experience.
How to show Dev Menu?
■ Shaking your device
■ Cmd + D on iOS Simulator
■ F2 on android emulator
36
Developer Tools

37. @matteomanchi
It reloads the js code, so you
can see changes without
recompile the entire app.
■ Cmd + R on iOS Simulator
■ Type r twice on android
emulator
37
Developer Tools - Reload

38. @matteomanchi
You can speed up your development times by having your
app reload automatically any time your code changes.
To do this, enable Live Reload from dev menu.
38
Developer Tools - Live Reload

39. @matteomanchi
You may even go a step further and keep your app running as new versions of
your files are injected into the JavaScript bundle automatically by enabling Hot
Reloading from the Developer Menu. This will allow you to persist the app's state
through reloads.
39
Developer Tools - Hot Reloading

40. @matteomanchi
With Element Inspector you
can inspect elements and get
their styles.
40
Developer Tools - Element Inspector

41. @matteomanchi
In-app errors are displayed in a full screen alert with a red background inside your
app. This screen is known as a RedBox.
Instead, warnings will be displayed on screen with a yellow background. These
alerts are known as YellowBoxes.
41
Developer Tools - Yellow and Red boxes

42. @matteomanchi
You can inspect native views as you do with browser inspector.
Install react-dev-tool to connect automatically to your app.
42
Developer Tools - React Dev Tools

43. @matteomanchi
Demo time!
43

44. @matteomanchi
Create React Native App hides native projects folder and
uses Expo app to let you work on your own app without
need to build.
■ Like in create-react-app, eject is the process of setting up
your own custom build for your app.
■ When I need to do it?
■ I want to include external native libraries
■ I want to write my custom native module
■ I want to publish my app to Stores.
You can back to standard setup any time with:
npm run eject
This process is not reversible.
Back to native projects
44

45. @matteomanchi
■ brew install node
■ brew install watchman
■ npm install -g react-native-cli
■ Install XCode and/or Android SDK
■ react-native init SampleApp
■ cd SampleApp
■ react-native run-ios
■ react-native run-android
Back to native projects
45

46. @matteomanchi
React Native’s community is very active
■ 55k+ stars on Github
■ 9800+ issue solved
■ React Native Community on Github
46
React Native Ecosystem

47. @matteomanchi 47
React Native Ecosystem
■ UI Components
● native-base
● react-native-elements
● react-native-material-kit
● react-native-material-design
■ Navigation
● react-native-router-flux
● react-navigation
● native-navigation by AirBnB
● wix/react-native-navigation
Hundreds of packages published:
■ Native API
● react-native-maps by AirBnB
● react-native-camera
● react-native-onesignal
● code-push by Microsoft

48. @matteomanchi
Facebook Ads Manager
48
Where is used React Native?
85% shared code between platforms
https://code.facebook.com/.../react-native-how-we-built-the-first-cross-platform

49. @matteomanchi 49
Where is used React Native?
Facebook App
FB event section is in RN
http://goo.gl/ziBzOl

50. @matteomanchi 50
Who is using React Native?
Facebook Facebook
Ads Manager
Instagram AirBnB
Skype Tesla Wallmart Discord

51. @matteomanchi
What’s next?
51http://githubstats.com/facebook/react-native
Stars Forks
Pull Requests Issues
React Native’s community is very active

52. @matteomanchi
“We use the
exact same version
internally”
Tadeu Zagallo
Software Engineer at Facebook
What’s next?
52http://goo.gl/ziBzOl

53. @matteomanchi
Woah! Woah!
53
Questions?

54. @matteomanchi
ROME 10-11 NOVEMBER 2017
THANK YOU!
@matteomanchi
54