What is a bridge in React Native ?
A React Native app comprises two sides as given below.
- The Native Side
The Native Side should be Java or Kotlin for Android and Swift or Objective-C for iOS.
Dispatching data: Now we know that how layouts are described at the begin however what takes place after the app starts running? what happens when we need to impair a button? Does this detail is sent through the bridge?
Flow of Information: As we have discussed React ideas that power up React Native, and be one of them is that UI is a function of data. You can convert the condition and React notices that what to be updated. Now let us suppose that how details flow along with the usual React app. Explore the diagram given below :
Explanation of above diagram:
- We have a React section, which proceeds details to three child sections.
- What is occurring anonymously is that a Virtual DOM tree is generated, constituting these section hierarchies.
- When the condition of the parent section is updated, React notices that how to proceed detail to the children.
- As children are primarily a depiction of UI, React recognizes that how to group Browser DOM updates and implements them.
Now let us detach the Browser DOM and suppose that rather of grouping Browser DOM updates, React Native do the same in return with calls to Native modules. So proceeding details to Native modules can be done by two means, which are given below:
- Shared mutable data
Architecture: Following is the diagram that explains the structure of React Native architecture :
Three layers are stated in the diagram above:
Threading Model: Now, after all the things that we have discussed above it is significant to recognize that all the things discussed above are done on three major threads:
- UI (the application’s main thread)
- Native modules
Let’s understand about each of the above threads:
The UI (the application’s main thread): It is the Native thread where the native-level perception takes place and It is the place where our platform of choices such as iOS or Android, carries out drawing, styling, and measuring.
Native modules: If the application accesses any Native APIs then the accessing is done on a different Native modules thread. For instance, if the camera, location, photos, and any further Native API is accessed then generally arrangement and indications are also concluded on this thread.