WIP: FlashList Fabric Android support

Author: Marek Fořt

android/build.gradle

@@ -85,20 +85,21 @@ android {
         }
     }
 
-    if (isNewArchitectureEnabled()) {
-        externalNativeBuild {
-            ndkBuild {
-                path "src/main/jni/Android.mk"
-            }
-        }
-    }
+     if (isNewArchitectureEnabled()) {
+         externalNativeBuild {
+             ndkBuild {
+                 path "src/main/jni/Android.mk"
+             }
+         }
+     }
 
     packagingOptions {
         // For some reason gradle only complains about the duplicated version of libreact_render libraries
         // while there are more libraries copied in intermediates folder of the lib build directory, we exclude
         // only the ones that make the build fail (ideally we should only include librngesturehandler_modules but we
         // are only allowed to specify exclude patterns)
         exclude "**/libreact_render*.so"
+    }
 
     lintOptions {
         abortOnError false
@@ -120,6 +121,12 @@ dependencies {
     androidTestImplementation("androidx.test:rules:${_androidTestRunnerVersion}")
 }
 
-react {
-    jsRootDir = rootProject.file("../src/fabric")
+if (isNewArchitectureEnabled()) {
+    react {
+        reactRoot = rootProject.file("../node_modules/react-native/")
+        jsRootDir = file("../src/fabric/")
+        codegenDir = rootProject.file("../node_modules/react-native-codegen/")
+        libraryName = "rnflashlist"
+        codegenJavaPackageName = "com.shopify.reactnative.flash_list"
+    }
 }

android/src/fabric/java/com/shopify/reactnative/flash_list/FlashListComponentsRegistry.java

@@ -0,0 +1,29 @@
+package com.shopify.reactnative.flash_list.react;
+
+import com.facebook.jni.HybridData;
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.fabric.ComponentFactory;
+import com.facebook.soloader.SoLoader;
+
+@DoNotStrip
+public class FlashListComponentsRegistry {
+  static {
+    SoLoader.loadLibrary("fabricjni");
+    SoLoader.loadLibrary("flashlist_modules");
+  }
+
+  @DoNotStrip private final HybridData mHybridData;
+
+  @DoNotStrip
+  private native HybridData initHybrid(ComponentFactory componentFactory);
+
+  @DoNotStrip
+  private FlashListComponentsRegistry(ComponentFactory componentFactory) {
+    mHybridData = initHybrid(componentFactory);
+  }
+
+  @DoNotStrip
+  public static FlashListComponentsRegistry register(ComponentFactory componentFactory) {
+    return new FlashListComponentsRegistry(componentFactory);
+  }
+}

android/src/main/kotlin/com/shopify/reactnative/flash_list/FlashListPackage.kt

@@ -4,9 +4,17 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
+import com.facebook.soloader.SoLoader
 
 class ReactNativeFlashListPackage : ReactPackage {
   override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // For Fabric, we load c++ native library here, this triggers gesture handler's
+      // Fabric component registration which is necessary in order to avoid asking users
+      // to manually add init calls in their application code.
+      // This should no longer be needed if RN's autolink mechanism has Fabric support
+      SoLoader.loadLibrary("rnflashlist_modules")
+    }
     return listOf()
   }
 

src/FlashList.tsx

@@ -19,7 +19,7 @@ import {
 import StickyContainer, { StickyContainerProps } from "recyclerlistview/sticky";
 
 import { BlankAreaEventHandler } from "./AutoLayoutView";
-// import ItemContainer from "./CellContainer";
+import ItemContainer from "./CellContainer";
 import { PureComponentWrapper } from "./PureComponentWrapper";
 import GridLayoutProviderWithProps from "./GridLayoutProviderWithProps";
 import CustomError from "./errors/CustomError";
@@ -537,24 +537,24 @@ class FlashList<T> extends React.PureComponent<
 
   private itemContainer = (props: any, parentProps: any) => {
     return (
-      // <ItemContainer
-      //   {...props}
-      //   style={{
-      //     ...props.style,
-      //     flexDirection: this.props.horizontal ? "row" : "column",
-      //     alignItems: "stretch",
-      //     ...this.getTransform(),
-      //   }}
-      //   index={parentProps.index}
-      // >
-      <PureComponentWrapper
-        extendedState={parentProps.extendedState}
-        internalSnapshot={parentProps.internalSnapshot}
-        data={parentProps.data}
-        arg={parentProps.index}
-        renderer={this.getCellContainerChild}
-      />
-      // </ItemContainer>
+      <ItemContainer
+        {...props}
+        style={{
+          ...props.style,
+          flexDirection: this.props.horizontal ? "row" : "column",
+          alignItems: "stretch",
+          ...this.getTransform(),
+        }}
+        index={parentProps.index}
+      >
+        <PureComponentWrapper
+          extendedState={parentProps.extendedState}
+          internalSnapshot={parentProps.internalSnapshot}
+          data={parentProps.data}
+          arg={parentProps.index}
+          renderer={this.getCellContainerChild}
+        />
+      </ItemContainer>
     );
   };