Presentation about the internals of React Native, and the new architecture. Delivered at Chain React 2018

1. The state of React Native

4. `

5. `

6. `

7. `

8. `

9. `

21. 800M+ Monthly Users

22. 800M+ Monthly Users
100+ screens

30. Bridge Start
Loading
Network
Content
Tap

31. Bridge Start
Loading
Network
Content
Tap

32. Bridge Start
Loading
Network
Content
Tap

33. Bridge Start
Loading
Network
Content
Tap

34. Bridge Start
Loading
Network
Content
Tap

35. Bridge Start
Loading
Network
Content
Tap

37. <FlatList data={data}
renderItem={i=><Text>{i}</Text>}
/>

38. <FlatList data={data}
renderItem={i=><Text>{i}</Text>}
/>

39. <FlatList data={data}
renderItem={i=><Text>{i}</Text>}
/>
render({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>

40. <FlatList data={data}
renderItem={i=><Text>{i}</Text>}
/>
render({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
onScroll = (i) => render([i, i+10])

41. <FlatList data={data}
renderItem={i=><Text>{i}</Text>}
/>
render({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
onScroll = (i) => render([i, i+10])
onScroll = render([0..10])

42. <FlatList data={data}
renderItem={i=><Text>{i}</Text>}
/>
render({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
onScroll = (i) => render([i, i+10])
onScroll = render([0..10])
onScroll = render([12..22])

43. <FlatList data={data}
renderItem={i=><Text>{i}</Text>}
/>
render({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
onScroll = (i) => render([i, i+10])
onScroll = render([0..10])
onScroll = render([12..22])
onScroll = render([18..28])

44. <FlatList data={data}
renderItem={i=><Text>{i}</Text>}
/>
render({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
onScroll = (i) => render([i, i+10])
onScroll = render([0..10])
onScroll = render([12..22])
onScroll = render([18..28])

45. <FlatList data={data}
renderItem={i=><Text>{i}</Text>}
/>
render({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
onScroll = (i) => render([i, i+10])
onScroll = render([0..10])
onScroll = render([12..22])
onScroll = render([18..28])
native [Sync] => react-native [Async]

46. const App = ({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>

47. <App data={[0]}/>
const App = ({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>

48. <App data={[0]}/>
const App = ({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
<App>
<Text>
0
<View>

49. <App data={[0]}/>
const App = ({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
<App>
<Text>
0
<View>
, 42]}/>

50. <App>
<Text>
0
<View>
const App = ({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
<App data={[0]}/>, 42]}/>

51. <App>
<Text>
0
<View>
<Text>
42
const App = ({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
<App data={[0]}/>, 42]}/>

52. <App>
<Text>
0
<View>
<Text>
42
const App = ({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
<App data={[0]}/>, 42]}/>, 21, 42]}/>

53. <App>
<Text>
0
<View>
<Text>
42
const App = ({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
<App data={[0]}/>, 42]}/>, 21, 42]}/>

54. <App>
<Text>
0
<View>
<Text>
42
<Text>
21
const App = ({data}) =>
<View>
{data.map(i =>
<Text key={i}>{i}</Text>)
}
</View>
<App data={[0]}/>, 42]}/>, 21, 42]}/>

55. 0
21
42
<App>
<Text>
0
<View>
<Text>
42
<Text>
21

56. 0
21
42
<App>
<Text>
0
<View>
<Text>
42
<Text>
21

57. 0
21
42
JavaScript VM
<App>
<Text>
0
<View>
<Text>
42
<Text>
21

58. 0
21
42
Android JavaScript VM
<App>
<Text>
0
<View>
<Text>
42
<Text>
21

59. 0
21
42
Android JavaScript VM
<App>
<Text>
0
<View>
<Text>
42
<Text>
21

60. 0
Android JavaScript VM
<Text>
0
<App>
<View>

61. 0
Android JavaScript VM
<Text>
0
(1) Root
<App>
<View>

62. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
(1) Root
<App>
<View>

63. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
(3) RCTText
(1) Root
<App>
<View>

64. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
(1) Root
<App>
<View>

65. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
(1) Root
<App>
<View>

66. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
(1) Root
<App>
<View>
3

67. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
(1) Root
<App>
<View>
4
1
3

68. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
(1) Root
<App>
<View>
4
1
3

69. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
createView(4, RCTView, ...)
(4) RCTView
(1) Root
<App>
<View>
4
1
3

70. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
createView(4, RCTView, ...)
setChildren(4, [3])
(4) RCTView
(1) Root
<App>
<View>
4
1
3

71. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
createView(4, RCTView, ...)
setChildren(4, [3])
setChildren(5, [4])
(4) RCTView
(1) Root
<App>
<View>
4
1
3

72. 0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
createView(4, RCTView, ...)
setChildren(4, [3])
setChildren(5, [4])
...
(4) RCTView
(1) Root
<App>
<View>
4
1
3

73. 0
42
Android JavaScript VM
<Text>
0
(2) RCTRawText
(3) RCTText
(4) RCTView
<App>
<View>
4
1
3
(1) Root

74. 0
42
Android JavaScript VM
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(4) RCTView
<App>
<View>
4
1
3 7
(1) Root

75. 0
42
Android JavaScript VM
<Text>
0
<Text>
42
createView(6, RCTRawText, ...)
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(4) RCTView
<App>
<View>
4
1
3 7
(1) Root

76. 0
42
Android JavaScript VM
<Text>
0
<Text>
42
createView(6, RCTRawText, ...)
createView(7, RCTText, ...)
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText
(4) RCTView
<App>
<View>
4
1
3 7
(1) Root

77. 0
42
Android JavaScript VM
<Text>
0
<Text>
42
createView(6, RCTRawText, ...)
createView(7, RCTText, ...)
setChildren(7, [6])
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText
(4) RCTView
<App>
<View>
4
1
3 7
(1) Root

78. 0
42
Android JavaScript VM
<Text>
0
<Text>
42
createView(6, RCTRawText, ...)
createView(7, RCTText, ...)
setChildren(7, [6])
manageChildren(4, {add:7 @ 1})
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText
(4) RCTView
<App>
<View>
4
1
3 7
(1) Root

79. 0
42
Android JavaScript VM
<Text>
0
<Text>
42
createView(6, RCTRawText, ...)
createView(7, RCTText, ...)
setChildren(7, [6])
manageChildren(4, {add:7 @ 1})
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText
(4) RCTView
<App>
<View>
4
1
3 7
(1) Root

80. 0
42
Android JavaScript VM
<Text>
0
<Text>
42
createView(6, RCTRawText, ...)
createView(7, RCTText, ...)
setChildren(7, [6])
manageChildren(4, {add:7 @ 1})
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText
(4) RCTView
<App>
<View>
4
1
3 7
(1) Root

81. 0
42
Android JavaScript VM
<Text>
0
<Text>
42
createView(6, RCTRawText, ...)
createView(7, RCTText, ...)
setChildren(7, [6])
manageChildren(4, {add:7 @ 1})
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText
(4) RCTView
<App>
<View>
4
1
3 7
(1) Root
UI Thread

82. 0
42
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText
<View>
(1) Root
4
1
3 7
(4) RCTView
Shadow Tree JavaScript VM

83. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText
<View>
(1) Root
4
1
3 7
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
JavaScript VM

84. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
JavaScript VM

85. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
createView(8, RCTRawText, ...)
JavaScript VM

86. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
JavaScript VM

87. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
JavaScript VM

88. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
CSS
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
JavaScript VM

89. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
JavaScript VM

90. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
JavaScript VM

91. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
JavaScript VM

92. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
(9)
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
JavaScript VM

93. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
(9)
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
JavaScript VM

94. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
(9)
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
setChildren(9, [8])
JavaScript VM

95. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
(9)
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
setChildren(9, [8])
manageChildren(4, {add:9 @ 1})
+
JavaScript VM

96. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
(9)
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
setChildren(9, [8])
manageChildren(4, {add:9 @ 1})
+
JavaScript VM

97. 0
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(7) ReactTextView text=42
(9)
createView(8, RCTRawText, ...)
createView(9, RCTText, ...)
setChildren(9, [8])
manageChildren(4, {add:9 @ 1})
+
JavaScript VM

98. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
JavaScript VM

99. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

100. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

101. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

102. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

103. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

104. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

105. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

106. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

107. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

108. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

109. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

110. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

111. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView
text=21
(7) ReactTextView text=42
dispatchUpdates()
JavaScript VM

112. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

113. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

114. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

115. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

116. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

117. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

118. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

119. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

120. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

121. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

122. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Threads
JavaScript VM

123. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

124. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
JavaScript VM

125. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

126. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

127. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

128. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

129. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable
Serialized
Async
JavaScript VM

130. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable
Serialized
Async
JavaScript VM

131. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

132. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

133. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

134. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

135. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

136. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM

137. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable
Java
JavaScript VM

138. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable
C++Java
JavaScript VM

139. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable
C++Java
JavaScript VM
Yoga (C++)

140. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable
C++Java
JavaScript VM
Yoga (C++)
C++

141. 0
21
42
(1) Root View
<App>
UI Thread
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(6) RCTRawText
(7) RCTText <Text>
21
<View>
(8) RCTRawText
(9) RCTText
(1) Root
4
1
3 79
(4) RCTView
Shadow Tree
(3) ReactTextView text=0
(9) ReactTextView text=21
(7) ReactTextView text=42
Immutable JavaScript VM
Yoga (C++)

145. <TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
OLD

146. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
OLD

147. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R
OLD

148. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
OLD

149. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
setValue('R')
state.text ='R'
OLD

150. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
setValue('R')
state.text ='R'
OLD

151. RE
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
setValue('R')
state.text ='R'
OLD

152. RE
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
setValue('R')
E
state.text ='R'
OLD

153. RE
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
setValue('R')
E onChangeText('RE')
state.text ='R'
OLD

154. RE
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
setValue('R')
E onChangeText('RE')
setValue('RE')
state.text ='R'
state.text ='RE'
OLD

155. RE
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
R setValue('R')
E onChangeText('RE')
setValue('RE')
state.text ='R'
state.text ='RE'
OLD

156. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
R setValue('R')
E onChangeText('RE')
setValue('RE')
state.text ='R'
state.text ='RE'
OLD

157. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
R setValue('R')
E onChangeText('RE')
RE setValue('RE')
state.text ='R'
state.text ='RE'
OLD

158. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
R setValue('R')
E onChangeText('RE')
RE setValue('RE')
E
state.text ='R'
state.text ='RE'
OLD

159. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
R setValue('R')
E onChangeText('RE')
RE setValue('RE')
E
state.text ='R'
state.text ='RE'
debounce by 100
OLD

160. <TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
NEW

161. <TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
NEW

162. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
NEW

163. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R
NEW

164. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
NEW

165. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
state.text ='R'
NEW

166. R
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
R setValue('R')
state.text ='R'
NEW

167. RE
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
R setValue('R')
state.text ='R'
NEW

168. RE
<TextInput
onChangeText={(text)
=> this.setState({text})}
value={this.state.text}
/>
R onChangeText('R')
R setValue('R')
E onChangeText('RE')
RE setValue('RE')
E
state.text ='R'
state.text ='RE'
NEW

170. in Native UI

171. in Native UI
Embedding React Native Views

172. in Native UI
Embedding React Native Views

173. in Native UI
Embedding React Native Views

174. (New)in Native UI
Embedding React Native Views

175. React Native
Goal: No change™ to the way React Native apps are written

176. React Native
Goal: No change™ to the way React Native apps are written

177. @nparashuram

178. @nparashuram

179. Community

180. Community
• Slimmer JavaScript, integrates better with brownfield apps

181. Community
• Slimmer JavaScript, integrates better with brownfield apps
• Swappable Packager/Bundler and JavaScript VM

182. Community
• Slimmer JavaScript, integrates better with brownfield apps
• Swappable Packager/Bundler and JavaScript VM
• Better documentation

183. Community
• Slimmer JavaScript, integrates better with brownfield apps
• Swappable Packager/Bundler and JavaScript VM
• Better documentation
• Fewer breaking releases, easy to upgrade

184. Community
• Slimmer JavaScript, integrates better with brownfield apps
• Swappable Packager/Bundler and JavaScript VM
• Better documentation
• Fewer breaking releases, easy to upgrade
• Monthly technical meetings with top contributors