- Trending Categories
- Data Structure
- Operating System
- MS Excel
- C Programming
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How does the Fabric architecture work in React Native?
React Native's Fabric architecture is a performance-focused update to the traditional React architecture. It uses asynchronous rendering and a new reconciliation algorithm to improve app performance and reduce the time it takes to update the UI. Fabric also allows for more efficient use of memory and better handling of complex animations and interactions.
In the current architecture, all the UI operations are handled by a sequence of cross-bridge steps. There are four core sections in the current architecture −
The React code written by the developer (which is very similar to its web counterpart),
A series of elements collectively known as “The Bridge,”
And the Native side.
The Solution (Fabric Architecture)
The new architecture (Fabric architecture) mainly consists of two main components −
The layout engine is responsible for calculating the layout of a component and its children.
It uses a new algorithm called Yoga, which is a fork of Facebook's Yoga layout engine. Yoga is more efficient than the traditional layout engine and is able to calculate layout faster and with less memory usage. This results in improved performance for complex and large components.
The renderer is responsible for rendering the component on the screen.
It uses a new technique called async rendering. This allows the renderer to work on multiple components at the same time, which improves performance and reduces the amount of time it takes to render a component.
How it works (Fabric Architecture)
React Native app starts via user interaction.
The new Fabric architecture loads the native side instead of opening the native modules.
Then it notifies the JS thread to do their side of things.
JS called through the ref native function (the one that was exposed as an object using the JSI API) to Fabric and the shadow node creates the tree as before.
And at last Yoga does the layout calculation converting from flexbox-based style to host layout.
Fabric does its thing and shows the UI.
Overall, the Fabric architecture in React Native provides a more efficient and performant way to slayout and render components, resulting in a smoother user experience.
- Related Articles
- How does React work?
- How to use Flexbox in React Native?
- What is React Native?
- How to display loading indicator in React Native?
- How to use Redux with React Native?
- What are props in react native?
- What is Metro in React-Native?
- Explain the importance of SafeViewArea in React Native?
- Explain the working of Animations in React Native?
- How to display Material Chip View in React Native?
- What is a state in react native?
- How to load data from a server in React Native?
- Explain working of the Modal window in React Native
- List the important core components of React Native