diff --git a/docs/the-new-architecture/pillars-fabric-components.md b/docs/the-new-architecture/pillars-fabric-components.md index 732bc0139de..ad1c18dedea 100644 --- a/docs/the-new-architecture/pillars-fabric-components.md +++ b/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_` where `` 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 + ``` + +1. Update the `sharedProviderRegistry` with this line: + + ```diff + auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry(); + + +providerRegistry->add(concreteComponentDescriptorProvider()); + + // 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: