feat: Add fabric component to app - Android

Author: Riccardo Cipolleschi

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

@@ -534,6 +534,10 @@ 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 Gradle 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:
 
 ```title="Android generated code"
@@ -740,9 +744,7 @@ 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:
 
@@ -751,7 +753,11 @@ cd MyApp
 yarn add ../RTNCenteredText
 ```
 
-This command will add the `RTNCenteredText` Component to the `node_modules` of your app. Then, we need to install the new dependencies in our iOS project. To do so, we need to run these commands:
+This command will add the `RTNCenteredText` Component to the `node_modules` of your app.
+
+#### iOS
+
+Then, we need to install the new dependencies in our iOS project. To do so, we need to run these commands:
 
 ```sh
 cd ios
@@ -766,7 +772,63 @@ You may have to run `bundle install` once before you can use `RCT_NEW_ARCH_ENABL
 
 #### 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 \
+   +libreact_codegen_RTNCenteredText \
+   libreact_debug \
+   ```
+
+:::note
+The name of the library will be `libreact_codegen_<libraryname>` where `<libraryname>` is the value that has been set in the config.
+Also, this step won't be necessary anymore as soon as we release a version of React Native which supports autolinking for Android.
+:::
+
+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: