This document summarizes a presentation about React Native given at DroidKaigi 2017. It discusses how React Native allows building native Android and iOS apps using React by rendering UI components to native platform views. It describes how React Native maps React components to native platform views, implements native modules to access platform features, and uses the JavaScript bridge to allow calling native code from JavaScript. It highlights how React Native enables writing once and deploying to both Android and iOS with shared JavaScript code.

1. React Native
2017.3.9 DroidKaigi 2017
Yukiya Nakagawa / @Nkzn
ROOM 3 17:10-17:40
#droidkaigi3

2. Who are you?
• Yukiya Nakagawa / @Nkzn
• @
•
•
• Android 2009

3. React Native

4. •
• Hello World
• Production

5. Target
• Android / iOS
• React React Native
• React Native

6. Agenda
•
‣
‣ React
‣ React Native
•
‣ React Native
‣
‣

7. • React
• React Native
• React Native Before / After

8. • React (DOM)
• ES201x
• NPM
• React Native

10. Biz

11. Biz
• Android iOS
•
•
•

12. https://www.kantarworldpanel.com/global/smartphone-os-market-share/

13. •
•
• iOS Android

14. 1

15. Android iOS
OS
UI
WebView Cordova Xamarin Unity

16. React

17. React
https://facebook.github.io/react/

18. •
• JSX
•
Reactive

19. JSX

20. <div>
<Header />
<LeftPane />
<RightPane />
</div>

22. React

23. import React from 'react';
import ReactDOM from 'react-dom';
const styles = {
container: {display: 'flex', flexDirection: ‘row', …}
};
class App extends React.Component {
render() {
const myName = /* props or state */;
return (
<div style={styles.container}>
<Header />
<LeftPane />
<RightPane
name={myName} />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);

24. Virtual DOM

26. React DOM

27. React DOM

28. React DOM

29. React DOM

30. https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/

31. https://developer.android.com/reference/android/app/Activity.html

32. React is
• Facebook JS
• https://facebook.github.io/react/
•
•
• View
View View

33. React Native
(Side React)

35. Android View

36. Android
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include layout="@layout/header" />
<include layout="@layout/left_pane" />
<include layout="@layout/right_pane" />
</RelativeLayout>

37. Android View
<include layout=
“@layout/header”/>
android.view.View
<include layout=
“@layout/left_pane”/>
<include layout=
“@layout/right_pane”/>

39. • Fragment
•
• Advocating Against Android Fragments
• https://medium.com/square-corner-blog/advocating-against-
android-fragments-81fd0b462c97
• ( ) http://ninjinkun.hatenablog.com/entry/
2014/10/16/234611

40. Android View

42. View
DOM

43. Android View

44. View
DOM

45. React is
• Facebook JS
• https://facebook.github.io/react/
•
•
• View
View View

46. React
DOM

47. import React from 'react';
import ReactDOM from 'react-dom';
const styles = {
container: {display: 'flex', flexDirection: ‘row', …}
};
class App extends React.Component {
render() {
const myName = /* props or state */;
return (
<div style={styles.container}>
<Header />
<LeftPane />
<RightPane
name={myName} />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
import ReactDOM from 'react-dom';
div
div
ReactDOM.render(
<App />,
document.getElementById('app')
);

48. import React from "react";
import { View, AppRegistry } from "react-native";
const styles = {
container: {display: 'flex', flexDirection: ‘row', …}
};
class App extends React.Component {
render() {
const myName = /* props or state */;
return (
<View style={styles.container}>
<Header />
<LeftPane />
<RightPane
name={myName} />
</View>
);
}
}
AppRegistry.registerComponent(
"App",
() => App
);

49. React
ReactDOM

50. React
UI
React Native

51. React Native
(Side Android)

52. Android iOS
OS
UI

53. React Native
Android iOS
OS
UI

54. React Native Android
(Side UI Component)

55. ReactRootView
• FrameLayout
• onMeasure JavaScriptCore
JS JS

56. ReactRootView RootView
(ReactActivityDelegate.java)
protected ReactRootView createRootView() {
return new ReactRootView(getContext());
}
//
protected void onCreate(Bundle savedInstanceState) {
//
if (mMainComponentName != null && !needsOverlayPermission) {
loadApp(mMainComponentName);
}
//
}
protected void loadApp(String appKey) {
if (mReactRootView != null) {
throw new IllegalStateException("Cannot loadApp while app is already running.");
}
mReactRootView = createRootView();
mReactRootView.startReactApplication(
getReactNativeHost().getReactInstanceManager(),
appKey,
getLaunchOptions());
getPlainActivity().setContentView(mReactRootView);
}
https://github.com/facebook/react-native/blob/d21aa9248056b08449f4a0f57e824b3c52b0614b/ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java#L67-L115

57. Activity ReactRootView JS

58. View

59. View
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions1}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions2}>
Shake or press menu button for dev menu
</Text>
</View>

60. react.gradle
JS
: import
JS
$buildDir/intermediates/
assets/index.android.bundle
JS

61. React Native Android
(Side Native Module)

62. JS
UI

63. (Web API)
https://developer.mozilla.org/ja/docs/Web/Reference/API

64. /Libraries/Core/Timers/JSTimers.js
/ReactAndroid/src/main/java/com/facebook/react/modules/core/Timing.java
(※ )

65. Polyfill
https://facebook.github.io/react-native/docs/javascript-environment.html

66. • React View
• API
JS
• UI ReactRootView
UI

67. React Native
Android iOS
OS
UI

69. http://facebook.github.io/react-native/showcase.html

70. https://design.google.com/articles/airbnb/

71. React Native

72. Biz
• Android iOS
•
•
•

73. Facebook
JA

74. • iOS Cordova + React
Web
• 1 iOS/Android
• React
•

75. React Native

77. UI

78. CSS
• CSS

79. const styles = StyleSheet.create({
container: {
paddingTop: metrics.x4,
paddingBottom: metrics.x2
},
logo: {
height: 180,
alignSelf: "center"
},
loginBox: {
marginTop: metrics.x4,
marginHorizontal: metrics.x4
}
});

80. <View
style={styles.container}>
…
</View>

81. CSS
• CSS
• CSS
• Bootstrap Material Design Lite
• CSS React
• OnsenUI material-ui

82. Android, iOS

85. Material Design
const metrics = {
x0_25: 2,
x0_5: 4,
x0_75: 6,
x1: 8,
x1_5: 12,
x2: 16,
x2_5: 20,
x3: 24,
x4: 32,
x5: 40,
x6: 48,
x7: 56,
x8: 64,
x9: 72
};
export default metrics;
metrics.android.js
const metrics = {
x0_25: 2,
x0_5: 4,
x0_75: 6,
x1: 8,
x1_5: 11,
x2: 15,
x2_5: 20,
x3: 22,
x4: 32,
x5: 40,
x6: 44,
x7: 56,
x8: 64,
x9: 72
};
export default metrics;
metrics.ios.js

86. • <Image>
•
• Android Picasso PhotoView
• iOS UIScrollView
JS
http://square.github.io/picasso/
https://github.com/chrisbanes/PhotoView

89. React Native
HelloWorld

90. JS
• API
• lodash

91. • API
React Native
•
• API
orz

92. • VSCode JS
• Android/iOS
Android iOS
• JS R Live
Reload
• Android Studio Xcode

93. VSCode
Android
Studio
Xcode
Android
iOS
Live Reload

94. • JS
localhost
•

96. • Initial commit: 2 22
• v1.0.0 : 5 11

97. 2

98. CI
•
• Android Java, Android SDK
• iOS OS X, Xcode, iOS SDK
• Fastlane CocoaPods Ruby
• mac mini

99. React Native

100. + React

101. • Web View
React
• Learn Once, Write Anywhere

102. • React Native
•
React Native
• Breaking Change

103. Breaking Change

107. • React Native
•
React Native
• Breaking Change

109. •
•
• v2
2

110. React Native

111. React Native

112. React Native

113. • WebView React
• UI Native
Component/Module
• Android Java,

114. React Native

116. React
Android

117. !