The state of React Native
`
`
`
`
`
`
800M+ Monthly Users
800M+ Monthly Users
100+ screens
Bridge Start
Loading
Network
Content
Tap
Bridge Start
Loading
Network
Content
Tap
Bridge Start
Loading
Network
Content
Tap
Bridge Start
Loading
Network
Content
Tap
Bridge Start
Loading
Network
Content
Tap
Bridge Start
Loading
Network
Content
Tap
<FlatList data={data}
renderItem={i=><Text>{i}</Text>} 

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

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

/>
render({data}) => 

<View> 

{data.map(i => 

<Text key={i}>{i}</Text>) 

} 

</View>
<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])
<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])
<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])
<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])
<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])
<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]
const App = ({data}) => 

<View> 

{data.map(i => 

<Text key={i}>{i}</Text>) 

} 

</View>
<App data={[0]}/>
const App = ({data}) => 

<View> 

{data.map(i => 

<Text key={i}>{i}</Text>) 

} 

</View>
<App data={[0]}/>
const App = ({data}) => 

<View> 

{data.map(i => 

<Text key={i}>{i}</Text>) 

} 

</View>
<App>
<Text>
0
<View>
<App data={[0]}/>
const App = ({data}) => 

<View> 

{data.map(i => 

<Text key={i}>{i}</Text>) 

} 

</View>
<App>
<Text>
0
<View>
, 42]}/>
<App>
<Text>
0
<View>
const App = ({data}) => 

<View> 

{data.map(i => 

<Text key={i}>{i}</Text>) 

} 

</View>
<App data={[0]}/>, 42]}/>
<App>
<Text>
0
<View>
<Text>
42
const App = ({data}) => 

<View> 

{data.map(i => 

<Text key={i}>{i}</Text>) 

} 

</View>
<App data={[0]}/>, 42]}/>
<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]}/>
<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]}/>
<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]}/>
0
21
42
<App>
<Text>
0
<View>
<Text>
42
<Text>
21
0
21
42
<App>
<Text>
0
<View>
<Text>
42
<Text>
21
0
21
42
JavaScript VM
<App>
<Text>
0
<View>
<Text>
42
<Text>
21
0
21
42
Android JavaScript VM
<App>
<Text>
0
<View>
<Text>
42
<Text>
21
0
21
42
Android JavaScript VM
<App>
<Text>
0
<View>
<Text>
42
<Text>
21
0
Android JavaScript VM
<Text>
0
<App>
<View>
0
Android JavaScript VM
<Text>
0
(1) Root
<App>
<View>
0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
(1) Root
<App>
<View>
0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
(3) RCTText
(1) Root
<App>
<View>
0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
(1) Root
<App>
<View>
0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
(1) Root
<App>
<View>
0
Android JavaScript VM
<Text>
0
createView(2, RCTRawText, ...)
(2) RCTRawText
createView(3, RCTText, ...)
setChildren(3, [2])
(3) RCTText
(1) Root
<App>
<View>
3
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
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
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
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
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
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
0
42
Android JavaScript VM
<Text>
0
(2) RCTRawText
(3) RCTText
(4) RCTView
<App>
<View>
4
1
3
(1) Root
0
42
Android JavaScript VM
<Text>
0
<Text>
42
(2) RCTRawText
(3) RCTText
(4) RCTView
<App>
<View>
4
1
3 7
(1) Root
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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++)
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++
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++)
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
OLD
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
OLD
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R
OLD
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
OLD
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
setValue('R')
state.text ='R'
OLD
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
setValue('R')
state.text ='R'
OLD
RE
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
setValue('R')
state.text ='R'
OLD
RE
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
setValue('R')
E
state.text ='R'
OLD
RE
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
setValue('R')
E onChangeText('RE')
state.text ='R'
OLD
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
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
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
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
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
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
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
NEW
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
NEW
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
NEW
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R
NEW
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
NEW
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
state.text ='R'
NEW
R
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
R setValue('R')
state.text ='R'
NEW
RE
<TextInput 

onChangeText={(text)
=> this.setState({text})} 

value={this.state.text} 

/>
R onChangeText('R')
R setValue('R')
state.text ='R'
NEW
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
in Native UI
in Native UI
Embedding React Native Views
in Native UI
Embedding React Native Views
in Native UI
Embedding React Native Views
(New)in Native UI
Embedding React Native Views
React Native
Goal: No change™ to the way React Native apps are written
React Native
Goal: No change™ to the way React Native apps are written
@nparashuram
@nparashuram
Community
Community
• Slimmer JavaScript, integrates better with brownfield apps
Community
• Slimmer JavaScript, integrates better with brownfield apps
• Swappable Packager/Bundler and JavaScript VM
Community
• Slimmer JavaScript, integrates better with brownfield apps
• Swappable Packager/Bundler and JavaScript VM
• Better documentation
Community
• Slimmer JavaScript, integrates better with brownfield apps
• Swappable Packager/Bundler and JavaScript VM
• Better documentation
• Fewer breaking releases, easy to upgrade
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

Chain React 2018 - The state of React Native