feat: autolinking for the new architecture on Android #1603

thymikee · 2022-05-06T14:33:40Z

Summary:

This PR introduces an initial support for autolinking the new architecture for Android platform. iOS is already handled AFAIK.

Closes #1596

High-level overview of how it works

When the new architecture is turned on, the generateNewArchitectureFiles task is fired, generating /android/build/generated/rn/src/main/jni directory with the following files:

Android-rncli.mk – creates a list of codegen'd libs. Used by the project's Android.mk.
rncli.cpp – registers codegen'd Turbo Modules and Fabric component providers. Used by MainApplicationModuleProvider.cpp and MainComponentsRegistry.cpp.
rncli.h - a header file for rncli.cpp.

This change requires updating the default template in react-native repository. PR: facebook/react-native#33777

Test Plan:

So far I've been testing it with following libraries:

https://github.com/react-native-community/RNNewArchitectureLibraries/tree/feat/back-turbomodule
https://github.com/react-native-community/RNNewArchitectureLibraries/tree/feat/back-fabric-comp

react-native-screens, react-native-safe-area-context through React Navigation – RNScreens provides a custom setup which bypasses autolinking through obfuscating its configuration. To have it compile we need to opt-out from autolinking by nulling added properties, like so:

module.exports = {
  dependencies: {
    'react-native-screens': {
      platforms: {
        android: {
          libraryName: null,
          componentDescriptors: null,
          androidMkPath: null,
        },
      },
    },
    'react-native-safe-area-context': {
      platforms: {
        android: {
          libraryName: null,
          componentDescriptors: null,
          androidMkPath: null,
        },
      },
    },
  },
};

I've only been able to build RNScreens under RN 0.68. It failed with "Android NDK: Module rnscreens_common depends on undefined modules: folly_json folly_futures" under RN 0.69 RC0. It also needed this patch:

diff --git a/node_modules/react-native-screens/android/build.gradle b/node_modules/react-native-screens/android/build.gradle
index 5097a1a..7ceb834 100644
--- a/node_modules/react-native-screens/android/build.gradle
+++ b/node_modules/react-native-screens/android/build.gradle
@@ -35,6 +35,15 @@ apply plugin: 'kotlin-android'
 android {
     compileSdkVersion safeExtGet('compileSdkVersion', 28)
 
+    // Used to override the NDK path/version on internal CI or by allowing
+    // users to customize the NDK path/version from their root project (e.g. for M1 support)
+    if (rootProject.hasProperty("ndkPath")) {
+        ndkPath rootProject.ext.ndkPath
+    }
+    if (rootProject.hasProperty("ndkVersion")) {
+        ndkVersion rootProject.ext.ndkVersion
+    }
+
     defaultConfig {
         minSdkVersion safeExtGet('minSdkVersion', 16)
         targetSdkVersion safeExtGet('targetSdkVersion', 22)

How to test it:

Init a RN 0.68+ app
Link RN CLI libraries (instructions in CONTRIBUTING.md)
Apply the following changes to the initialized project:

diff --git a/android/app/src/main/jni/Android.mk b/android/app/src/main/jni/Android.mk
index becd71a..6385ed9 100644
--- a/android/app/src/main/jni/Android.mk
+++ b/android/app/src/main/jni/Android.mk
@@ -5,6 +5,10 @@ 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
+
+# Includes the MK file for autolinked libraries
+include $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni/Android-rncli.mk  
+
 include $(CLEAR_VARS)
 
 LOCAL_PATH := $(THIS_DIR)
@@ -16,6 +20,11 @@ LOCAL_C_INCLUDES := $(LOCAL_PATH)
 LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)
 LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
 
+# Autolinked TurboModules and Fabric components
+LOCAL_C_INCLUDES += $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni
+LOCAL_SRC_FILES += $(wildcard $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni/*.cpp)
+LOCAL_EXPORT_C_INCLUDES += $(PROJECT_BUILD_DIR)/generated/rncli/src/main/jni
+
 # If you wish to add a custom TurboModule or Fabric component in your app you
 # will have to uncomment those lines to include the generated source 
 # files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
@@ -44,6 +53,9 @@ LOCAL_SHARED_LIBRARIES := \
   libturbomodulejsijni \
   libyoga
 
+# Autolinked libraries
+LOCAL_SHARED_LIBRARIES += $(call import-codegen-modules) 
+
 LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall
 
 include $(BUILD_SHARED_LIBRARY)
diff --git a/android/app/src/main/jni/MainApplicationModuleProvider.cpp b/android/app/src/main/jni/MainApplicationModuleProvider.cpp
index 0ac23cc..b961e35 100644
--- a/android/app/src/main/jni/MainApplicationModuleProvider.cpp
+++ b/android/app/src/main/jni/MainApplicationModuleProvider.cpp
@@ -1,6 +1,7 @@
 #include "MainApplicationModuleProvider.h"
 
 #include <rncore.h>
+#include <rncli.h>
 
 namespace facebook {
 namespace react {
@@ -17,6 +18,13 @@ std::shared_ptr<TurboModule> MainApplicationModuleProvider(
   //    return module;
   // }
   // return rncore_ModuleProvider(moduleName, params);
+
+  // Module providers autolinked by RN CLI  
+  auto rncli_module = rncli_ModuleProvider(moduleName, params);
+  if (rncli_module != nullptr) {
+     return rncli_module;
+  }
+  
   return rncore_ModuleProvider(moduleName, params);
 }
 
diff --git a/android/app/src/main/jni/MainComponentsRegistry.cpp b/android/app/src/main/jni/MainComponentsRegistry.cpp
index 8f7edff..12ba43a 100644
--- a/android/app/src/main/jni/MainComponentsRegistry.cpp
+++ b/android/app/src/main/jni/MainComponentsRegistry.cpp
@@ -4,6 +4,7 @@
 #include <fbjni/fbjni.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/rncore/ComponentDescriptors.h>
+#include <rncli.h>
 
 namespace facebook {
 namespace react {
@@ -14,6 +15,9 @@ std::shared_ptr<ComponentDescriptorProviderRegistry const>
 MainComponentsRegistry::sharedProviderRegistry() {
   auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
 
+  // Providers registered automatically by RN CLI
+  rncli_registerProviders(providerRegistry);
+  
   // Custom Fabric Components go here. You can register custom
   // components coming from your App or from 3rd party libraries here.
   //

Add your fabric component or turbo module and verify that android/build/generated/rn/src/main/jni is populated with Android-rncli.mk, rncli.cpp and rncli.h, correctly referencing your library.

Verify that yarn react-native config contains 3 newly added config keys with correct values. E.g.:

{
  "dependencies": {
    "example-component": {
      "root": "<PROJECT_ROOT>/node_modules/example-component",
      "name": "example-component",
      "platforms": {
        "ios": null,
        "android": {
          "sourceDir": "<PROJECT_ROOT>/node_modules/example-component/android",
          "packageImportPath": "import com.rnnewarchitecturelibrary.ColoredViewPackage;",
          "packageInstance": "new ColoredViewPackage()",
          "buildTypes": [],
          "libraryName": "colorview",
          "componentDescriptors": ["ColoredViewComponentDescriptor"],
          "androidMkPath": "<PROJECT_ROOT>/node_modules/example-component/android/build/generated/source/codegen/jni/Android.mk"
        }
      }
    }
  }
}

cortinico

Did a first pass. left a couple of minor comments.

Q: Are those:

  libraryName?: string;
  componentDescriptors?: string[];
  androidMkPath?: string;

configurable via npx react-native config?

packages/platform-android/native_modules.gradle

cortinico · 2022-05-06T17:34:16Z

packages/platform-android/native_modules.gradle

+      rncliCppIncludes = packages.collect {
+        def result = "#include <${it.libraryName}.h>"
+        if (it.componentDescriptors.size() > 0) {
+          result += "\n#include <react/renderer/components/${it.libraryName}/ComponentDescriptors.h>"


Two things here:

Please export to a constant the react/renderer/components/ and ComponentDescriptors.h

There might be some escaping to do. I'll check and get back to you

cortinico · 2022-05-06T17:35:44Z

packages/platform-android/native_modules.gradle


  task generatePackageList {
    doLast {
      autoModules.generatePackagesFile(generatedCodeDir, generatedFileName, generatedFileContentsTemplate)
    }
  }

+  task generateNewArchitectureFiles {
+    doLast {


I would refrain from using doLast. Those are terrible from the caching point of view (as they invalidate the gradle caches). We should move this to a proper task.

Not a blocker though :), just a heads up

Sure! I'm not a heavy user of Gradle, so I'd appreciate any contributions in code or pointers on what to leverage exactly :)

packages/platform-android/native_modules.gradle

thymikee · 2022-05-08T16:45:34Z

Q: Are those:
libraryName?: string;
componentDescriptors?: string[];
androidMkPath?: string;
configurable via npx react-native config?

@cortinico yup, although in current implementation they're only configurable for libraries themselves. It's not yet possible to override this from user's configuration (I'm not yet sure if it's worth the complexity, but I acknowledge it may be for the time of transition)

EDIT: it's now possible to override both from library or app config.

thymikee · 2022-05-16T19:44:12Z

Made it work for libraries with their own autolinking setup (RNScreens, RNSafeAreaContext). This is ready to be published in next major version. Planned for this week.

…cy config

…ed on

thymikee · 2022-05-18T10:57:29Z

Released in v9.0.0-alpha.0

Summary: Provides necessary changes for the autolinking to work in new architecture on Android. Depends on react-native-community/cli#1603 and is subject to change. Upgraded the RN CLI to v9.0.0-alpha.0 so that it's testable locally. ## Changelog  [Android] [Change] - Adapt template to new architecture autolinking on Android Pull Request resolved: #33777 Test Plan: CI Reviewed By: cipolleschi Differential Revision: D36478984 Pulled By: cortinico fbshipit-source-id: 970fa7bcb77898d9defae18c20026a7783ba4108

thymikee requested review from grabbou and Esemesek as code owners May 6, 2022 14:33

thymikee changed the title ~~feat: autolinking for the new architecture~~ feat: autolinking for the new architecture on Android May 6, 2022

thymikee mentioned this pull request May 6, 2022

Adapt template to new architecture autolinking on Android facebook/react-native#33777

Closed

fortmarek mentioned this pull request May 6, 2022

Fabric support android Shopify/flash-list#356

Closed

1 task

cortinico reviewed May 6, 2022

View reviewed changes

thymikee mentioned this pull request May 16, 2022

Tracking issue: React Native New Architecture support callstack/react-native-slider#380

Closed

10 tasks

thymikee added 12 commits May 18, 2022 11:28

feat: generate new arch files with hardcoded values

fc6b49a

feat: add libraryName to android dependency config

b55b7cd

feat: add componentNames and componentDescriptors to android dependen…

5a92357

…cy config

feat: add androidMkPath to android dependency config

a2e951c

fix: remove duplicate component names

1a24013

chore: run generateNewArchitectureFiles when new architecture is turn…

9052b35

…ed on

feat: use only componentDescriptors, take interfacesOnly into account

ed38393

docs: document new architecture autolinking

2a84ade

chore: add comments

c5bea26

fix: TurboModule support and indentation

98bb2b7

chore: prettify mk output; remove jni sourceset; extract variables

eac476b

feat: make new config nullable

58b7122

thymikee force-pushed the feat/new-arch-autolinking branch from 1883f11 to 58b7122 Compare May 18, 2022 09:29

chore: update docs on how to disable new arch autolinking

7f70fe5

thymikee merged commit 00781eb into master May 18, 2022

thymikee deleted the feat/new-arch-autolinking branch May 18, 2022 09:42

This was referenced May 18, 2022

feat: add support for TurboModule microsoft/react-native-test-app#843

Merged

Add support for TurboModule microsoft/react-native-test-app#836

Closed

cortinico mentioned this pull request Jun 25, 2022

[android] Add support for autolinking via CMake #1630

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: autolinking for the new architecture on Android #1603

feat: autolinking for the new architecture on Android #1603

thymikee commented May 6, 2022 •

edited

Loading

cortinico left a comment

cortinico May 6, 2022

cortinico May 6, 2022

thymikee May 8, 2022

thymikee commented May 8, 2022 •

edited

Loading

thymikee commented May 16, 2022

thymikee commented May 18, 2022

feat: autolinking for the new architecture on Android #1603

feat: autolinking for the new architecture on Android #1603

Conversation

thymikee commented May 6, 2022 • edited Loading

Summary:

High-level overview of how it works

Test Plan:

cortinico left a comment

Choose a reason for hiding this comment

cortinico May 6, 2022

Choose a reason for hiding this comment

cortinico May 6, 2022

Choose a reason for hiding this comment

thymikee May 8, 2022

Choose a reason for hiding this comment

thymikee commented May 8, 2022 • edited Loading

thymikee commented May 16, 2022

thymikee commented May 18, 2022

thymikee commented May 6, 2022 •

edited

Loading

thymikee commented May 8, 2022 •

edited

Loading