Support for New Architecture - iOS & Android (Fabric)

.github/workflows/flash-list.yml

@@ -142,7 +142,9 @@ jobs:
           cd fixture/react-native
           yarn
           cd ios
-          bundle exec pod install
+          gem install bundler:2.4.8
+          bundle install
+          USE_FRAMEWORKS=static bundle exec pod install
       - name: Build iOS
         run: |
           mkdir -p /tmp/artifacts
@@ -155,6 +157,11 @@ jobs:
     steps:
       - name: Repository checkout
         uses: actions/checkout@v3
+      - name: Java setup
+        uses: actions/setup-java@v2
+        with:
+          distribution: "temurin"
+          java-version: 17
       - name: Node setup
         uses: actions/setup-node@v3
         with:
@@ -199,7 +206,9 @@ jobs:
           cd fixture/react-native
           yarn
           cd ios
-          bundle exec pod install
+          gem install bundler:2.4.8
+          bundle install
+          USE_FRAMEWORKS=static bundle exec pod install
       - name: Build and Run e2e tests
         run: |
           cd fixture/react-native

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
+- Added Fabric (new architecture) support for iOS and Android
+  - https://github.com/Shopify/flash-list/pull/931
 
 ## [1.6.4] - 2024-03-18
 

README.md

@@ -62,3 +62,17 @@ To avoid common pitfalls, you can also follow these steps for migrating from `Fl
 ## App / Playground
 
 The [fixture](https://github.com/Shopify/flash-list/tree/main/fixture) is an example app showing how to use the library.
+
+To get started clone the repository and run `yarn` in the root directory
+
+#### If using expo:
+
+`yarn fixture:expo:up && yarn fixture:expo:start`
+
+#### If using bare react-native:
+
+`yarn fixture:rn:up && yarn fixture:rn:ios` or `yarn fixture:rn:android`
+
+#### For the new architecture:
+
+`yarn fixture:rn:fabric:up && fixture:rn:ios:fabric` or `yarn fixture:rn:android:fabric`

RNFlashList.podspec

@@ -9,14 +9,19 @@ Pod::Spec.new do |s|
   s.homepage         = package['homepage']
   s.license          = package['license']
   s.author           = package['author']
-  s.platforms        = { :ios => '11.0', :tvos => '12.0' }
+  s.platforms        = { ios: '12.4', tvos: '12.0' }
   s.source           = { git: 'https://github.com/shopify/flash-list.git', tag: "v#{s.version}" }
   s.source_files     = 'ios/Sources/**/*'
   s.requires_arc     = true
   s.swift_version    = '5.0'
 
-  # Dependencies
-  s.dependency 'React-Core'
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  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,14 @@
-apply plugin: 'com.android.library'
+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 +47,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"
@@ -61,7 +75,7 @@ android {
 
 dependencies {
     compileOnly "com.facebook.react:react-native:${_reactNativeVersion}"
-    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${_kotlinVersion}"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:${_kotlinVersion}"
     testImplementation "junit:junit:${_junitVersion}"
     testImplementation "org.mockito.kotlin:mockito-kotlin:${_mockitoVersion}"
     testImplementation "org.mockito:mockito-inline:${_mockitoVersion}"

android/src/fabric/java/com/shopify/reactnative/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

@@ -2,18 +2,18 @@ package com.shopify.reactnative.flash_list
 
 import android.content.Context
 import android.graphics.Canvas
-import android.util.DisplayMetrics
-import android.util.Log
 import android.view.View
 import android.view.ViewGroup
 import android.widget.HorizontalScrollView
 import android.widget.ScrollView
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.WritableMap
-import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.facebook.react.views.view.ReactViewGroup
-
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.shopify.reactnative.flash_list.events.OnBlankAreaEvent
 
 /** Container for all RecyclerListView children. This will automatically remove all gaps and overlaps for GridLayouts with flexible spans.
  * Note: This cannot work for masonry layouts i.e, pinterest like layout */
@@ -136,15 +136,12 @@ class AutoLayoutView(context: Context) : ReactViewGroup(context) {
         return null
     }
 
-
-    /** TODO: Check migration to Fabric */
     private fun emitBlankAreaEvent() {
-        val event: WritableMap = Arguments.createMap()
-        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)
+        val eventDispatcher: EventDispatcher? =
+            UIManagerHelper.getEventDispatcherForReactTag(context as ReactContext, id)
+        if(eventDispatcher != null) {
+            val surfaceId = UIManagerHelper.getSurfaceId(context as ReactContext)
+            eventDispatcher.dispatchEvent(OnBlankAreaEvent(surfaceId, id, alShadow.blankOffsetAtStart / pixelDensity, alShadow.blankOffsetAtEnd / pixelDensity))
+        }
     }
 }

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

@@ -3,15 +3,22 @@ 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.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.AutoLayoutViewManagerDelegate
+import com.facebook.react.viewmanagers.AutoLayoutViewManagerInterface
 import com.facebook.react.common.MapBuilder
 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: ViewManagerDelegate<AutoLayoutView>
+
+    init {
+        mDelegate = AutoLayoutViewManagerDelegate(this)
+    }
 
     companion object {
         const val REACT_CLASS = "AutoLayoutView"
@@ -21,45 +28,42 @@ class AutoLayoutViewManager: ReactViewManager() {
         return REACT_CLASS
     }
 
-    override fun createViewInstance(context: ThemedReactContext): ReactViewGroup {
+    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,20 @@ 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: ViewManagerDelegate<CellContainerImpl>
+
+    init {
+        mDelegate = CellContainerManagerDelegate(this);
+    }
+
     companion object {
         const val REACT_CLASS = "CellContainer"
     }
@@ -16,12 +24,12 @@ class CellContainerManager: ReactViewManager() {
         return REACT_CLASS
     }
 
-    override fun createViewInstance(context: ThemedReactContext): ReactViewGroup {
+    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/main/kotlin/com/shopify/reactnative/flash_list/events/OnBlankAreaEvent.kt

@@ -0,0 +1,30 @@
+@file:Suppress("DEPRECATION") // We want to use RCTEventEmitter for interop purposes
+package com.shopify.reactnative.flash_list.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+class OnBlankAreaEvent(surfaceId: Int, viewId: Int, val offsetStart: Double, val offsetEnd: Double) :
+    Event<OnBlankAreaEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String {
+    return EVENT_NAME
+  }
+
+  override fun getEventData(): WritableMap {
+    val eventData: WritableMap = Arguments.createMap()
+    eventData.putDouble("offsetStart", offsetStart)
+    eventData.putDouble("offsetEnd", offsetEnd)
+    return eventData
+  }
+
+  override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+    rctEventEmitter.receiveEvent(viewTag, eventName, eventData)
+  }
+
+  companion object {
+    const val EVENT_NAME: String = "onBlankAreaEvent"
+  }
+}

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);
+    }
+  }
+}