Skip to content

Commit

Permalink
docs: add React Native diagram
Browse files Browse the repository at this point in the history
  • Loading branch information
molant committed Oct 16, 2021
1 parent 6244d45 commit ee7fa9a
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 3 deletions.
14 changes: 11 additions & 3 deletions docs/react-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,11 @@ asynchronous and the UI thread never waits for the JavaScript thread to finish p
This is better understood if we look at the threads that are spawned when a React Native application
starts and how they communicate with each other.

<!-- Simplified diagram of the threads -->
<p align="center">

![Architecture diagram of React Native showing how the Main thread communicates with the JavaScript and Custom Native modules](/img/react-native-schema.webp)

</p>

1. **Main thread** — This is the main thread which gets spawned as soon as the application launches.
It loads the app and starts the JavaScript thread to execute the JavaScript code.
Expand All @@ -120,9 +124,13 @@ starts and how they communicate with each other.
Looking at the initial example of a user interacting with the screen, if they tap on a button the
native code sends a message through the bridge to the JavaScript context so the handler the
developer wrote is executed. Any side effect of that execution that changes the UI will be send
again over the bridge.
again over the bridge, to the shadow thread to compute the changes, and back to the UI one.

<p align="center">

![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)

<!-- Diagram of messages being sent -->
</p>

To address some of the concerns lined out earlier, the React Native Core team is working on removing
the “bridge” and replace it with a [new renderer][fabric], called Fabric, and a new mechanism to
Expand Down
Binary file added static/img/react-native-interaction.webp
Binary file not shown.
Binary file added static/img/react-native-schema.webp
Binary file not shown.

0 comments on commit ee7fa9a

Please sign in to comment.