New architecture support

CHANGELOG.md

@@ -11,6 +11,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
   - https://github.com/Shopify/flash-list/pull/1076
 - Fix stale reference to onScroll and onLoad
   - https://github.com/Shopify/flash-list/pull/1112
+- New architecture support
+  - https://github.com/Shopify/flash-list/pull/550
 
 ## [1.6.4] - 2024-03-18
 

RNFlashList.podspec

@@ -1,6 +1,7 @@
 require 'json'
 
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+new_arch_enabled = ENV['RCT_NEW_ARCH_ENABLED']
 
 Pod::Spec.new do |s|
   s.name             = 'RNFlashList'
@@ -15,8 +16,18 @@ Pod::Spec.new do |s|
   s.requires_arc     = true
   s.swift_version    = '5.0'
 
-  # Dependencies
-  s.dependency 'React-Core'
+  if new_arch_enabled
+    s.pod_target_xcconfig = {
+      'OTHER_SWIFT_FLAGS' => '-D RCT_NEW_ARCH_ENABLED',
+    }
+  end
+
+  # install_modules_dependencies is available since RN 0.71
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+  end
 
   # Tests spec
   s.test_spec 'Tests' do |test_spec|

android/build.gradle

@@ -1,7 +1,15 @@
+def isNewArchitectureEnabled() {
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
+
 apply plugin: 'com.android.library'
 
 apply plugin: 'kotlin-android'
 
+if (isNewArchitectureEnabled()) {
+    apply plugin: 'com.facebook.react'
+}
+
 def _ext = rootProject.ext
 
 def _reactNativeVersion = _ext.has('reactNative') ? _ext.reactNative : '+'
@@ -40,11 +48,18 @@ android {
         debug.java.srcDirs += 'src/debug/kotlin'
         test.java.srcDirs += 'src/test/kotlin'
         androidTest.java.srcDirs += 'src/androidTest/kotlin'
+
+        if (isNewArchitectureEnabled()) {
+            main.java.srcDirs += ['src/fabric/java']
+        } else {
+            main.java.srcDirs += ['src/paper/java']
+        }
     }
 
     defaultConfig {
         minSdkVersion _minSdkVersion
         targetSdkVersion _targetSdkVersion
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
         versionCode 1
         versionName "1.0"
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"

android/src/fabric/java/com/shopify/flash_list/ReactContextExtensions.kt

@@ -0,0 +1,12 @@
+package com.shopify.reactnative.flash_list
+
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.fabric.FabricUIManager
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.common.UIManagerType
+import com.facebook.react.bridge.WritableMap
+
+fun ReactContext.dispatchEvent(nativeTag: Int, eventName: String, event: WritableMap) {
+    val fabricUIManager = UIManagerHelper.getUIManager(this, UIManagerType.FABRIC) as FabricUIManager
+    fabricUIManager.receiveEvent(nativeTag, eventName, event)
+}

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

@@ -143,8 +143,6 @@ class AutoLayoutView(context: Context) : ReactViewGroup(context) {
         event.putDouble("offsetStart", alShadow.blankOffsetAtStart / pixelDensity)
         event.putDouble("offsetEnd", alShadow.blankOffsetAtEnd / pixelDensity)
         val reactContext = context as ReactContext
-        reactContext
-                .getJSModule(RCTEventEmitter::class.java)
-                .receiveEvent(id, "onBlankAreaEvent", event)
+        reactContext.dispatchEvent(id, "onBlankAreaEvent", event)
     }
 }

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

@@ -3,15 +3,18 @@ package com.shopify.reactnative.flash_list
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.views.view.ReactViewGroup
-import com.facebook.react.views.view.ReactViewManager
-import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.AutoLayoutViewManagerDelegate
+import com.facebook.react.viewmanagers.AutoLayoutViewManagerInterface
 import kotlin.math.roundToInt
 
 /** ViewManager for AutoLayoutView - Container for all RecyclerListView children. Automatically removes all gaps and overlaps for GridLayouts with flexible spans.
  * Note: This cannot work for masonry layouts i.e, pinterest like layout */
 @ReactModule(name = AutoLayoutViewManager.REACT_CLASS)
-class AutoLayoutViewManager: ReactViewManager() {
+class AutoLayoutViewManager: ViewGroupManager<AutoLayoutView>(), AutoLayoutViewManagerInterface<AutoLayoutView> {
+    private val mDelegate: AutoLayoutViewManagerDelegate<AutoLayoutView, AutoLayoutViewManager> =
+        AutoLayoutViewManagerDelegate(this)
 
     companion object {
         const val REACT_CLASS = "AutoLayoutView"
@@ -21,45 +24,44 @@ class AutoLayoutViewManager: ReactViewManager() {
         return REACT_CLASS
     }
 
-    override fun createViewInstance(context: ThemedReactContext): ReactViewGroup {
+    override fun getDelegate(): ViewManagerDelegate<AutoLayoutView> = mDelegate
+
+    override fun createViewInstance(context: ThemedReactContext): AutoLayoutView {
         return AutoLayoutView(context).also { it.pixelDensity = context.resources.displayMetrics.density.toDouble() }
     }
 
-    override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
-        return MapBuilder.builder<String, Any>().put(
-                "onBlankAreaEvent",
-                MapBuilder.of(
-                        "registrationName", "onBlankAreaEvent")
-        ).build();
-    }
+    override fun getExportedCustomDirectEventTypeConstants() = mutableMapOf(
+        "onBlankAreaEvent" to mutableMapOf("registrationName" to "onBlankAreaEvent"),
+        "topOnBlankAreaEvent" to mutableMapOf("registrationName" to "onBlankAreaEvent"),
+    )
 
     @ReactProp(name = "horizontal")
-    fun setHorizontal(view: AutoLayoutView, isHorizontal: Boolean) {
+    override fun setHorizontal(view: AutoLayoutView, isHorizontal: Boolean) {
         view.alShadow.horizontal = isHorizontal
     }
 
     @ReactProp(name = "disableAutoLayout")
-    fun setDisableAutoLayout(view: AutoLayoutView, disableAutoLayout: Boolean) {
+    override fun setDisableAutoLayout(view: AutoLayoutView, disableAutoLayout: Boolean) {
         view.disableAutoLayout = disableAutoLayout
     }
 
     @ReactProp(name = "scrollOffset")
-    fun setScrollOffset(view: AutoLayoutView, scrollOffset: Double) {
+    override fun setScrollOffset(view: AutoLayoutView, scrollOffset: Double) {
         view.alShadow.scrollOffset = convertToPixelLayout(scrollOffset, view.pixelDensity)
     }
 
     @ReactProp(name = "windowSize")
-    fun setWindowSize(view: AutoLayoutView, windowSize: Double) {
+    override fun setWindowSize(view: AutoLayoutView, windowSize: Double) {
         view.alShadow.windowSize = convertToPixelLayout(windowSize, view.pixelDensity)
     }
 
     @ReactProp(name = "renderAheadOffset")
-    fun setRenderAheadOffset(view: AutoLayoutView, renderOffset: Double) {
+    override fun setRenderAheadOffset(view: AutoLayoutView, renderOffset: Double) {
         view.alShadow.renderOffset = convertToPixelLayout(renderOffset, view.pixelDensity)
     }
 
     @ReactProp(name = "enableInstrumentation")
-    fun setEnableInstrumentation(view: AutoLayoutView, enableInstrumentation: Boolean) {
+    override fun setEnableInstrumentation(view: AutoLayoutView, enableInstrumentation: Boolean) {
         view.enableInstrumentation = enableInstrumentation
     }
 

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

@@ -2,12 +2,17 @@ package com.shopify.reactnative.flash_list
 
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.views.view.ReactViewGroup
-import com.facebook.react.views.view.ReactViewManager
+import com.facebook.react.viewmanagers.CellContainerManagerDelegate
+import com.facebook.react.viewmanagers.CellContainerManagerInterface
 
 @ReactModule(name = AutoLayoutViewManager.REACT_CLASS)
-class CellContainerManager: ReactViewManager() {
+class CellContainerManager: ViewGroupManager<CellContainerImpl>(), CellContainerManagerInterface<CellContainerImpl> {
+    private val mDelegate: CellContainerManagerDelegate<CellContainerImpl, CellContainerManager>
+        = CellContainerManagerDelegate(this)
+
     companion object {
         const val REACT_CLASS = "CellContainer"
     }
@@ -16,12 +21,14 @@ class CellContainerManager: ReactViewManager() {
         return REACT_CLASS
     }
 
-    override fun createViewInstance(context: ThemedReactContext): ReactViewGroup {
+    override fun getDelegate(): ViewManagerDelegate<CellContainerImpl> = mDelegate
+
+    override fun createViewInstance(context: ThemedReactContext): CellContainerImpl {
         return CellContainerImpl(context)
     }
 
     @ReactProp(name = "index")
-    fun setIndex(view: CellContainerImpl, index: Int) {
+    override fun setIndex(view: CellContainerImpl, index: Int) {
         view.index = index
     }
 }

android/src/paper/java/com/facebook/react/viewmanagers/AutoLayoutViewManagerDelegate.java

@@ -0,0 +1,46 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaDelegate.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.BaseViewManagerInterface;
+
+public class AutoLayoutViewManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & AutoLayoutViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public AutoLayoutViewManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case "horizontal":
+        mViewManager.setHorizontal(view, value == null ? false : (boolean) value);
+        break;
+      case "scrollOffset":
+        mViewManager.setScrollOffset(view, value == null ? 0f : ((Double) value).doubleValue());
+        break;
+      case "windowSize":
+        mViewManager.setWindowSize(view, value == null ? 0f : ((Double) value).doubleValue());
+        break;
+      case "renderAheadOffset":
+        mViewManager.setRenderAheadOffset(view, value == null ? 0f : ((Double) value).doubleValue());
+        break;
+      case "enableInstrumentation":
+        mViewManager.setEnableInstrumentation(view, value == null ? false : (boolean) value);
+        break;
+      case "disableAutoLayout":
+        mViewManager.setDisableAutoLayout(view, value == null ? false : (boolean) value);
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
+  }
+}

android/src/paper/java/com/facebook/react/viewmanagers/AutoLayoutViewManagerInterface.java

@@ -0,0 +1,21 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaInterface.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+
+public interface AutoLayoutViewManagerInterface<T extends View> {
+  void setHorizontal(T view, boolean value);
+  void setScrollOffset(T view, double value);
+  void setWindowSize(T view, double value);
+  void setRenderAheadOffset(T view, double value);
+  void setEnableInstrumentation(T view, boolean value);
+  void setDisableAutoLayout(T view, boolean value);
+}

android/src/paper/java/com/facebook/react/viewmanagers/CellContainerManagerDelegate.java

@@ -0,0 +1,31 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaDelegate.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.BaseViewManagerInterface;
+
+public class CellContainerManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & CellContainerManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public CellContainerManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case "index":
+        mViewManager.setIndex(view, value == null ? 0 : ((Double) value).intValue());
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
+  }
+}

android/src/paper/java/com/facebook/react/viewmanagers/CellContainerManagerInterface.java

@@ -0,0 +1,16 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaInterface.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+
+public interface CellContainerManagerInterface<T extends View> {
+  void setIndex(T view, int value);
+}

android/src/paper/java/com/shopify/flash_list/ReactContextExtensions.kt

@@ -0,0 +1,11 @@
+
+package com.shopify.reactnative.flash_list
+
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.facebook.react.bridge.WritableMap
+
+fun ReactContext.dispatchEvent(nativeTag: Int, eventName: String, event: WritableMap) {
+    this.getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(nativeTag, eventName, event)
+}

fixture/react-native/android/gradle.properties

@@ -37,7 +37,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.

fixture/react-native/ios/Podfile

@@ -29,6 +29,11 @@ if linkage != nil
   use_frameworks! :linkage => linkage.to_sym
 end
 
+ENV['RCT_NEW_ARCH_ENABLED'] = '1'
+
+# Shouldn't be necessary in newer versions of React Native
+use_frameworks! :linkage => :static
+
 target 'FlatListPro' do
   config = use_native_modules!