Skip to content

Commit

Permalink
[Feat] Add intro for Fabric Components
Browse files Browse the repository at this point in the history
  • Loading branch information
Riccardo Cipolleschi committed May 23, 2022
1 parent bd74d25 commit 478c01a
Showing 1 changed file with 29 additions and 9 deletions.
38 changes: 29 additions & 9 deletions docs/the-new-architecture/pillars-fabric-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,37 @@ id: pillars-fabric-components
title: Fabric Components
---

This section contains a high-level introduction to Fabric components. It provides enough context to understand when a Fabric component is needed and how it roughly works.
It points to the [Renderer](https://reactnative.dev/architecture/fabric-renderer) section of the [Architecture](https://reactnative.dev/architecture/overview) tab for a deep dive into the technical details.
A Fabric Component is a UI component which is rendered on the screen using the [Fabric Renderer](https://reactnative.dev/architecture/fabric-renderer).

This section must have a warning that it works only with the new architecture enabled. It points to the [migration section](../new-architecture-intro).
Using Fabric Components instead of Native Components allows us to reap all the [benefit](./why) coming from the **New Architecture**. Specifically, we are able to leverage JSI to efficiently connect the Native UI code and the JavaScript one, and all the other features provided by the new renderer.

A Fabric Component is created starting from a **JS specification**. This, with the help of a bit of [**Codegen**](./pillars-codegen), will create some C++ code, shared among all the RN's platforms. Then, after filling in the missing **native code** with component specific logic, the component can be **integrated** in the app.

The following section will guide you through the creation of a Fabric Component, step-by-step.

:::caution
Fabric Components only works with the **New Architecture** enabled.
To migrate to the **New Architecture**, follow the [Migration guide](../new-architecture-intro)
:::

## How to Create a Fabric Components

This section is a step-by-step guide to create a Fabric component from scratch. The list of subsections is roughly:
To create a Fabric Component, we have to follow these steps:

- Define a set of JS specification.
- Configure the component so that it can be consumed by an app.
- Write the native code required to make it works.

Once these steps are done, the component is ready to be consumend by an app. Therefore, the guide shows how to add it to an app, leveraging the _autolinking_, and how to reference it from the JavaScript code.

### Javascript Specification

### Component Configuration

### Native Code

#### iOS

#### Android

- JS spec (with all the supported features)
- Configuration (package.json, cocoapods, gradle, …) and CodeGen
- Native code (one section for iOS and one for Android)
- Integration in an App (`yarn add` and how to connect the JS specs to the app itself)
- Troubleshooting (common issues and how to solve them)
### Adding the Fabric Component To Your App

0 comments on commit 478c01a

Please sign in to comment.