fix: Fix android example error.

Author: jaywcjlove

HelloWorld/android/app/build.gradle

@@ -140,6 +140,7 @@ android {
         versionCode 1
         versionName "1.0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+
         if (isNewArchitectureEnabled()) {
             // We configure the NDK build only if you decide to opt-in for the New Architecture.
             externalNativeBuild {
@@ -156,7 +157,7 @@ android {
                     cppFlags "-std=c++17"
                     // Make sure this target name is the same you specify inside the
                     // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable.
-                    targets "helloworldapp_appmodules"
+                    targets "helloworld_appmodules"
                 }
             }
             if (!enableSeparateBuildPerCPUArchitecture) {
@@ -166,6 +167,7 @@ android {
             }
         }
     }
+
     if (isNewArchitectureEnabled()) {
         // We configure the NDK build only if you decide to opt-in for the New Architecture.
         externalNativeBuild {
@@ -275,7 +277,7 @@ dependencies {
     }
 
     if (enableHermes) {
-        // noinspection GradleDynamicVersion
+        //noinspection GradleDynamicVersion
         implementation("com.facebook.react:hermes-engine:+") { // From node_modules
             exclude group:'com.facebook.fbjni'
         }
@@ -315,4 +317,4 @@ def isNewArchitectureEnabled() {
     // - Invoke gradle with `-newArchEnabled=true`
     // - Set an environment variable `ORG_GRADLE_PROJECT_newArchEnabled=true`
     return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
-}
+}

HelloWorld/android/app/src/debug/java/com/helloworld/ReactNativeFlipper.java

@@ -5,6 +5,7 @@
  * directory of this source tree.
  */
 package com.helloworld;
+
 import android.content.Context;
 import com.facebook.flipper.android.AndroidFlipperClient;
 import com.facebook.flipper.android.utils.FlipperUtils;
@@ -23,15 +24,18 @@
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.modules.network.NetworkingModule;
 import okhttp3.OkHttpClient;
+
 public class ReactNativeFlipper {
   public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
     if (FlipperUtils.shouldEnableFlipper(context)) {
       final FlipperClient client = AndroidFlipperClient.getInstance(context);
+
       client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
       client.addPlugin(new ReactFlipperPlugin());
       client.addPlugin(new DatabasesFlipperPlugin(context));
       client.addPlugin(new SharedPreferencesFlipperPlugin(context));
       client.addPlugin(CrashReporterPlugin.getInstance());
+
       NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
       NetworkingModule.setCustomClientBuilder(
           new NetworkingModule.CustomClientBuilder() {
@@ -42,6 +46,7 @@ public void apply(OkHttpClient.Builder builder) {
           });
       client.addPlugin(networkFlipperPlugin);
       client.start();
+
       // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
       // Hence we run if after all native modules have been initialized
       ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
@@ -65,4 +70,4 @@ public void run() {
       }
     }
   }
-}
+}

HelloWorld/android/app/src/main/java/com/helloworld/MainActivity.java

@@ -14,6 +14,7 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "HelloWorld";
   }
+
   /**
    * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and
    * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer

HelloWorld/android/app/src/main/java/com/helloworld/newarchitecture/MainApplicationReactNativeHost.java

@@ -1,36 +1,116 @@
-package com.helloworld.newarchitecture.components;
+package com.helloworld.newarchitecture;
 
-import com.facebook.jni.HybridData;
-import com.facebook.proguard.annotations.DoNotStrip;
+import android.app.Application;
+import androidx.annotation.NonNull;
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
+import com.facebook.react.bridge.JSIModulePackage;
+import com.facebook.react.bridge.JSIModuleProvider;
+import com.facebook.react.bridge.JSIModuleSpec;
+import com.facebook.react.bridge.JSIModuleType;
+import com.facebook.react.bridge.JavaScriptContextHolder;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.UIManager;
 import com.facebook.react.fabric.ComponentFactory;
-import com.facebook.soloader.SoLoader;
+import com.facebook.react.fabric.CoreComponentsRegistry;
+import com.facebook.react.fabric.FabricJSIModuleProvider;
+import com.facebook.react.fabric.ReactNativeConfig;
+import com.facebook.react.uimanager.ViewManagerRegistry;
+import com.helloworld.BuildConfig;
+import com.helloworld.newarchitecture.components.MainComponentsRegistry;
+import com.helloworld.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
+import java.util.ArrayList;
+import java.util.List;
 
 /**
- * Class responsible to load the custom Fabric Components. This class has native methods and needs a
- * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
- * folder for you).
+ * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both
+ * TurboModule delegates and the Fabric Renderer.
  *
  * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
  * `newArchEnabled` property). Is ignored otherwise.
  */
-@DoNotStrip
-public class MainComponentsRegistry {
-  static {
-    SoLoader.loadLibrary("fabricjni");
+public class MainApplicationReactNativeHost extends ReactNativeHost {
+  public MainApplicationReactNativeHost(Application application) {
+    super(application);
   }
 
-  @DoNotStrip private final HybridData mHybridData;
+  @Override
+  public boolean getUseDeveloperSupport() {
+    return BuildConfig.DEBUG;
+  }
 
-  @DoNotStrip
-  private native HybridData initHybrid(ComponentFactory componentFactory);
+  @Override
+  protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    // Packages that cannot be autolinked yet can be added manually here, for example:
+    //     packages.add(new MyReactNativePackage());
+    // TurboModules must also be loaded here providing a valid TurboReactPackage implementation:
+    //     packages.add(new TurboReactPackage() { ... });
+    // If you have custom Fabric Components, their ViewManagers should also be loaded here
+    // inside a ReactPackage.
+    return packages;
+  }
 
-  @DoNotStrip
-  private MainComponentsRegistry(ComponentFactory componentFactory) {
-    mHybridData = initHybrid(componentFactory);
+  @Override
+  protected String getJSMainModuleName() {
+    return "index";
   }
 
-  @DoNotStrip
-  public static MainComponentsRegistry register(ComponentFactory componentFactory) {
-    return new MainComponentsRegistry(componentFactory);
+  @NonNull
+  @Override
+  protected ReactPackageTurboModuleManagerDelegate.Builder
+      getReactPackageTurboModuleManagerDelegateBuilder() {
+    // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary
+    // for the new architecture and to use TurboModules correctly.
+    return new MainApplicationTurboModuleManagerDelegate.Builder();
+  }
+
+  @Override
+  protected JSIModulePackage getJSIModulePackage() {
+    return new JSIModulePackage() {
+      @Override
+      public List<JSIModuleSpec> getJSIModules(
+          final ReactApplicationContext reactApplicationContext,
+          final JavaScriptContextHolder jsContext) {
+        final List<JSIModuleSpec> specs = new ArrayList<>();
+
+        // Here we provide a new JSIModuleSpec that will be responsible of providing the
+        // custom Fabric Components.
+        specs.add(
+            new JSIModuleSpec() {
+              @Override
+              public JSIModuleType getJSIModuleType() {
+                return JSIModuleType.UIManager;
+              }
+
+              @Override
+              public JSIModuleProvider<UIManager> getJSIModuleProvider() {
+                final ComponentFactory componentFactory = new ComponentFactory();
+                CoreComponentsRegistry.register(componentFactory);
+
+                // Here we register a Components Registry.
+                // The one that is generated with the template contains no components
+                // and just provides you the one from React Native core.
+                MainComponentsRegistry.register(componentFactory);
+
+                final ReactInstanceManager reactInstanceManager = getReactInstanceManager();
+
+                ViewManagerRegistry viewManagerRegistry =
+                    new ViewManagerRegistry(
+                        reactInstanceManager.getOrCreateViewManagers(reactApplicationContext));
+
+                return new FabricJSIModuleProvider(
+                    reactApplicationContext,
+                    componentFactory,
+                    ReactNativeConfig.DEFAULT_CONFIG,
+                    viewManagerRegistry);
+              }
+            });
+        return specs;
+      }
+    };
   }
 }