Skip to content

Commit ee7fa9a

Browse files
committed
docs: add React Native diagram
1 parent 6244d45 commit ee7fa9a

File tree

3 files changed

+11
-3
lines changed

3 files changed

+11
-3
lines changed

docs/react-native.md

+11-3
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,11 @@ asynchronous and the UI thread never waits for the JavaScript thread to finish p
9898
This is better understood if we look at the threads that are spawned when a React Native application
9999
starts and how they communicate with each other.
100100

101-
<!-- Simplified diagram of the threads -->
101+
<p align="center">
102+
103+
![Architecture diagram of React Native showing how the Main thread communicates with the JavaScript and Custom Native modules](/img/react-native-schema.webp)
104+
105+
</p>
102106

103107
1. **Main thread** — This is the main thread which gets spawned as soon as the application launches.
104108
It loads the app and starts the JavaScript thread to execute the JavaScript code.
@@ -120,9 +124,13 @@ starts and how they communicate with each other.
120124
Looking at the initial example of a user interacting with the screen, if they tap on a button the
121125
native code sends a message through the bridge to the JavaScript context so the handler the
122126
developer wrote is executed. Any side effect of that execution that changes the UI will be send
123-
again over the bridge.
127+
again over the bridge, to the shadow thread to compute the changes, and back to the UI one.
128+
129+
<p align="center">
130+
131+
![Interaction diagram explaining the flow of information accross threads for a user tap that changes the UI on a React Native application](/img/react-native-interaction.webp)
124132

125-
<!-- Diagram of messages being sent -->
133+
</p>
126134

127135
To address some of the concerns lined out earlier, the React Native Core team is working on removing
128136
the “bridge” and replace it with a [new renderer][fabric], called Fabric, and a new mechanism to
18.1 KB
Binary file not shown.

static/img/react-native-schema.webp

16.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)