feat: connect Fabric Component to Android

docs/the-new-architecture/pillars-fabric-components.md

@@ -531,6 +531,11 @@ cd android
 
 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 `gradlew` task to generate the codegen.
 
+:::note
+To run the codegen, you need to enable the **New Architecture** in the Android app. This can be done by opening the `gradle.properties` files and by switching the `newArchEnabled` property from `false` to `true`.
+
+:::
+
 The generated code is stored in the `MyApp/node_modules/rnt-centered-text/android/build/generated/source/codegen` folder and it has this structure:
 
 ```sh title="Android generated code"
@@ -737,11 +742,9 @@ This is the last piece of Native Code for Android. It defines the Package object
 
 This is the last step to finally see our Fabric Component running on our app.
 
-#### iOS
-
-To achieve this in iOS, we need to issue a couple of commands and then we can read the Component from JS.
+#### Shared
 
-First of all, we need to add the npm package which contains the Component to the app. This can be done with the following command:
+To connect our Component to the app, we have to first add it as a dependency for our app. This step is required for both iOS and Android and can be done using the following command:
 
 ```sh
 cd MyApp
@@ -759,7 +762,9 @@ yarn remove rn-centered-text
 
 :::
 
-Then, we need to install the new dependencies in our iOS project. To do so, we need to run these commands:
+#### iOS
+
+To use the new component in iOS, we need to install the dependencies in our iOS project, given that they are changed. To do so, we need to run these commands:
 
 ```sh
 cd ios
@@ -770,7 +775,64 @@ This command will look for all the dependencies of the project and it will insta
 
 #### Android
 
-#### JS
+Android configuration requires slightly more steps in order to be able to use our new Component.
+
+First, we need to enable the **New Architecture**, because **Fabric** requires it to run properly. This can be done by:
+
+1. Open the `android/gradle.properties` file
+2. Scroll down to the end of the file and switch the `newArchEnabled` property from `false` to `true`.
+
+Then, we need to instruct the `Android.mk` file that it needs to build also the new library.
+This can be with these steps:
+
+1. Open the `android/app/src/main/jni/Android.mk` file
+1. Add this line to include the library at the beginning of the file:
+
+   ```diff
+   include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
+
+   # If you wish to add a custom TurboModule or Fabric component in your app you
+   # will have to include the following autogenerated makefile.
+   # include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
+
+   +include $(NODE_MODULES_DIR)/rnt-centered-text/android/build/generated/source/codegen/jni/Android.mk
+   include $(CLEAR_VARS)
+   ```
+
+1. In the same file, scroll down until you find a list of `libreact` libraries. There, we have to add the the library that has been generated. To do so, we need to add this line:
+   ```diff
+   libreact_codegen_rncore \
+   +react_codegen_RTNCenteredText \
+   libreact_debug \
+   ```
+
+:::note
+The exact name of the library can be found in the generated `Android.mk` that is located in the folder:
+`node_modules/rnt-centered-text/android/build/generated/source/codegen/jni/Android.mk`.
+The name of the library is the value of the `LOCAL_MODULE` variable of that file.
+:::
+
+Finally, we need to configure the Fabric component registry to load the Fabric Component at runtime. This can be done by:
+
+1. Open the `MyApp/android/app/src/main/jni/MainComponentsRegistry.cpp`
+1. Add the following include:
+
+   ```c++
+   #include <react/renderer/components/RTNCenteredText/ComponentDescriptors.h>
+   ```
+
+1. Update the `sharedProviderRegistry` with this line:
+
+   ```diff
+   auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
+
+   +providerRegistry->add(concreteComponentDescriptorProvider<RTNCenteredTextComponentDescriptor>());
+
+   // Custom Fabric Components go here. You can register custom
+   ```
+
+#### JS
+
 Finally, we can read the Component in our JS application.
 To do so, we have to: