fix(accessibility): preserve inverted TalkBack order

android/build.gradle

@@ -0,0 +1,20 @@
+def safeExtGet(prop, fallback) {
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+apply plugin: "com.android.library"
+apply plugin: "org.jetbrains.kotlin.android"
+
+android {
+    namespace "com.shopify.flashlist"
+    compileSdkVersion safeExtGet("compileSdkVersion", 35)
+
+    defaultConfig {
+        minSdkVersion safeExtGet("minSdkVersion", 24)
+        targetSdkVersion safeExtGet("targetSdkVersion", 35)
+    }
+}
+
+dependencies {
+    implementation "com.facebook.react:react-android"
+}

android/src/main/AndroidManifest.xml

@@ -0,0 +1 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

android/src/main/java/com/shopify/flashlist/FlashListAccessibilityView.kt

@@ -0,0 +1,21 @@
+package com.shopify.flashlist
+
+import android.content.Context
+import android.view.View
+import com.facebook.react.views.view.ReactViewGroup
+
+internal class FlashListAccessibilityView(context: Context) : ReactViewGroup(context) {
+    var reverseAccessibilityOrder: Boolean = false
+
+    override fun addChildrenForAccessibility(outChildren: ArrayList<View>) {
+        if (!reverseAccessibilityOrder) {
+            super.addChildrenForAccessibility(outChildren)
+            return
+        }
+
+        val children = ArrayList<View>()
+        super.addChildrenForAccessibility(children)
+        children.reverse()
+        outChildren.addAll(children)
+    }
+}

android/src/main/java/com/shopify/flashlist/FlashListAccessibilityViewManager.kt

@@ -0,0 +1,24 @@
+package com.shopify.flashlist
+
+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
+
+@ReactModule(name = FlashListAccessibilityViewManager.NAME)
+internal class FlashListAccessibilityViewManager : ReactViewManager() {
+    companion object {
+        const val NAME = "FlashListAccessibilityView"
+    }
+
+    override fun getName(): String = NAME
+
+    override fun createViewInstance(context: ThemedReactContext): ReactViewGroup =
+        FlashListAccessibilityView(context)
+
+    @ReactProp(name = "reverseAccessibilityOrder", defaultBoolean = false)
+    fun setReverseAccessibilityOrder(view: ReactViewGroup, reverse: Boolean) {
+        (view as FlashListAccessibilityView).reverseAccessibilityOrder = reverse
+    }
+}

android/src/main/java/com/shopify/flashlist/FlashListPackage.kt

@@ -0,0 +1,18 @@
+@file:Suppress("DEPRECATION", "OVERRIDE_DEPRECATION")
+
+package com.shopify.flashlist
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class FlashListPackage : ReactPackage {
+    override fun createNativeModules(
+        reactContext: ReactApplicationContext
+    ): List<NativeModule> = emptyList()
+
+    override fun createViewManagers(
+        reactContext: ReactApplicationContext
+    ): List<ViewManager<*, *>> = listOf(FlashListAccessibilityViewManager())
+}

package.json

@@ -79,6 +79,8 @@
     "typescript": "5.8.3"
   },
   "files": [
+    "android/build.gradle",
+    "android/src",
     "dist",
     "src",
     "jestSetup.js",

src/__tests__/RecyclerView.test.tsx

@@ -36,13 +36,15 @@ const renderRecyclerView = (args: {
   numColumns?: number;
   masonry?: boolean;
   horizontal?: boolean;
+  inverted?: boolean;
   ref?: React.Ref<FlashListRef<number>>;
   data?: number[];
 }) => {
   const {
     numColumns = 1,
     masonry = false,
     horizontal = false,
+    inverted = false,
     ref,
     data,
   } = args;
@@ -59,6 +61,7 @@ const renderRecyclerView = (args: {
       drawDistance={0}
       numColumns={numColumns}
       horizontal={horizontal}
+      inverted={inverted}
       renderItem={({ item }) => <Text>{item}</Text>}
     />
   );
@@ -76,6 +79,23 @@ describe("RecyclerView", () => {
       expect(result).toContainReactComponent(Text, { children: 0 });
       expect(result).not.toContainReactComponent(Text, { children: 11 });
     });
+
+    it("reverses native accessibility order for inverted items", () => {
+      const result = renderRecyclerView({
+        data: [0, 1, 2],
+        inverted: true,
+      });
+
+      const accessibilityContainer = result
+        .findAll(View)
+        .find(
+          (component) => component.props.reverseAccessibilityOrder !== undefined
+        );
+
+      expect(accessibilityContainer).toHaveReactProps({
+        reverseAccessibilityOrder: true,
+      });
+    });
   });
 
   describe("Sticky header config", () => {

src/recyclerview/ViewHolderCollection.tsx

@@ -10,7 +10,7 @@ import { FlashListProps } from "../FlashListProps";
 
 import { ViewHolder, ViewHolderProps } from "./ViewHolder";
 import { RVDimension, RVLayout } from "./layout-managers/LayoutManager";
-import { CompatView } from "./components/CompatView";
+import { AccessibilityContainer } from "./components/AccessibilityContainer";
 import { useRecyclerViewContext } from "./RecyclerViewContextProvider";
 
 /**
@@ -172,7 +172,10 @@ export const ViewHolderCollection = <TItem,>(
   // );
 
   return (
-    <CompatView style={hasData && containerStyle}>
+    <AccessibilityContainer
+      style={hasData && containerStyle}
+      reverseAccessibilityOrder={Boolean(inverted)}
+    >
       {containerLayout &&
         hasData &&
         Array.from(renderStack.entries(), ([reactKey, { index }]) => {
@@ -209,6 +212,6 @@ export const ViewHolderCollection = <TItem,>(
             />
           );
         })}
-    </CompatView>
+    </AccessibilityContainer>
   );
 };

src/recyclerview/components/AccessibilityContainer.android.ts

@@ -0,0 +1,19 @@
+import type { ComponentType } from "react";
+import {
+  requireNativeComponent,
+  UIManager,
+  View,
+  ViewProps,
+} from "react-native";
+
+export interface AccessibilityContainerProps extends ViewProps {
+  reverseAccessibilityOrder?: boolean;
+}
+
+const componentName = "FlashListAccessibilityView";
+
+export const AccessibilityContainer = UIManager.hasViewManagerConfig(
+  componentName
+)
+  ? requireNativeComponent<AccessibilityContainerProps>(componentName)
+  : (View as ComponentType<AccessibilityContainerProps>);

src/recyclerview/components/AccessibilityContainer.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from "react";
+import { View, ViewProps } from "react-native";
+
+export interface AccessibilityContainerProps extends ViewProps {
+  reverseAccessibilityOrder?: boolean;
+}
+
+export const AccessibilityContainer =
+  View as ComponentType<AccessibilityContainerProps>;