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 Jun 17, 2022
1 parent bd74d25 commit 476c85d
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 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 [benefits](./why) of the **New Architecture**. Specifically, we are able to leverage JSI to efficiently connect the Native UI code JavaScript.

A Fabric Component is created starting from a **JavaScript specification**. This, with the help of [**CodeGen**](./pillars-codegen), will create some C++ code, integrated in the platform native layer and shared among all the React Native platforms. The C++ code is boilerplate code that the component-specific logic needs to use to be properly used by React Native. After the component-specific logic has been connected with the generated code, 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 JavaScript specifications.
- Configure the component so that it can be consumed by an app.
- Write the native code required to make it work.

Once these steps are done, the component is ready to be consumed by an app. Therefore, the guide shows how to add it to an app, leveraging _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 476c85d

Please sign in to comment.