Skip to content

Commit

Permalink
[FEAT] TurboModules guide (#3168)
Browse files Browse the repository at this point in the history
* [Feat] Add intro for Fabric Components

* feat: add guide to create a Fabric Component

* Beginning of guide/folder structure

* WIP JS Spec

* specification section

* Configuration

* native code intro

* Must be named Spec

* Best stab at iOS native code, but I don't know how to describe what's going on in the code very well. Extrapolated what I could.

* Android instructions

iOS isn't working for me. Builds, but can't load module.

Writing up Android auto-linking next because the steps I tested did
work.

* Include linking instructions from RNNArch repo

* Add example JavaScript

* native modules link

* Address quick feedback items

* Remove, fix for rebased branch

* fix TM parameter on Android

* Revert to 'Codegen' casing

* Revert folly version change

2021.07.22 is for current version on main

* fix typo

* getTurboModule explainer

* Sentence edits

- Fix acronym bolding
- Change wording to "recommended" because "standard" has other
  connotations of possibly being required
- Parentheses unnecessary, distracting

* Remove TODO for now

Getting inconsistent results here, not sure if this is wrong or not;
removing TODO for now so it doesn't block anything

* ABI rephrase, more in line with new Fabric guide wording

* Explain shared C++ code more

* feat: add guide to create a Fabric Component

* feat: add guide to create a Fabric Component

* package.json description

* Lint fixes

* fix: Move JS constants to reduce changes

* fix: Remove newline

* feat: add required step for Android Codegen

* fix: use the proper links

Co-authored-by: Riccardo Cipolleschi <cipolleschi@fb.com>
  • Loading branch information
lindboe and Riccardo Cipolleschi committed Jul 20, 2022
1 parent 449c3ea commit 5caf900
Show file tree
Hide file tree
Showing 3 changed files with 760 additions and 12 deletions.
4 changes: 2 additions & 2 deletions docs/the-new-architecture/pillars-codegen.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con

The **Codegen** is not a proper pillar, but it is a tool that can be used to avoid writing of a lot of repetitive code. Using the **Codegen** is not mandatory: all the code that is generated by it can also be written manually. However, it generates scaffolding code that could save you a lot of time.

The **Codegen** is invoked automatically by React Native every time an iOS or an Android app is built. Occasionally, you would like to run the scripts that generate the code manually to know which types and files are actually generated: this is a common scenario when developing [**TurboModules**](pillars-turbomodules) and [**Fabric Components**](pillars-fabric-components), for example.
The **Codegen** is invoked automatically by React Native every time an iOS or an Android app is built. Occasionally, you would like to run the scripts that generate the code manually to know which types and files are actually generated: this is a common scenario when developing [**TurboModules**](./pillars-turbomodules) and [**Fabric Components**](./pillars-fabric-components), for example.

This guide teaches how to configure the **Codegen**, how to invoke it manually for each platform, and it describes the generated code.

Expand Down Expand Up @@ -120,7 +120,7 @@ The content of each Fabric Component folder contains several files. The basic el

Additionally, the **Codegen** also creates a `ComponentDescriptor.h` and an `RCTComponentViewHelpers.h` files: the first one is used by React Native and Fabric to properly get a reference to the Component, while the latter contains some helper methods and protocols that can be implemented by the Native View to properly respond to JSI invocations.

For further details about how Fabric works, have a look at the [Renderer](../../architecture/fabric-renderer) section.
For further details about how Fabric works, have a look at the [Renderer](/architecture/fabric-renderer) section.

### RCTThirdPartyFabricComponentsProvider

Expand Down
2 changes: 1 addition & 1 deletion docs/the-new-architecture/pillars-fabric-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -605,7 +605,7 @@ To generate the code, you need to manually invoke **Codegen**. This is done simi
cd MyApp
yarn add ../RTNCenteredText
cd android
./gradlew generateCodegenArtifactsFromSchema --rerun-tasks
./gradlew generateCodegenArtifactsFromSchema
```

This script first adds the package to the app, in the same way iOS does. Then, after moving to the `android` folder, it invokes a Gradle task to generate the scaffolding code.
Expand Down
Loading

0 comments on commit 5caf900

Please sign in to comment.