WIP: FlashList Fabric Android support

Shopify · Apr 26, 2022 · 1a8fc9f · 1a8fc9f
1 parent 14b344d
commit 1a8fc9f
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 21 deletions.
diff --git a/android/build.gradle b/android/build.gradle
@@ -91,6 +91,7 @@ android {
         // 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
@@ -112,6 +113,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"
+    }
 }
diff --git a/android/src/fabric/java/com/shopify/reactnative/flash_list/FlashListComponentsRegistry.java b/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);
+  }
+}
diff --git a/android/src/main/kotlin/com/shopify/reactnative/flash_list/FlashListPackage.kt b/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("flashlist_modules")
+    }
     return listOf()
   }
 

diff --git a/src/FlashList.tsx b/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>
     );
   };