diff --git a/patches/@shopify/flash-list/@shopify+flash-list+2.3.0+003+sort-for-natural-DOM-order.patch b/patches/@shopify/flash-list/@shopify+flash-list+2.3.0+003+sort-for-natural-DOM-order.patch new file mode 100644 index 0000000000000..e5f3794a8389f --- /dev/null +++ b/patches/@shopify/flash-list/@shopify+flash-list+2.3.0+003+sort-for-natural-DOM-order.patch @@ -0,0 +1,27 @@ +diff --git a/node_modules/@shopify/flash-list/dist/recyclerview/ViewHolderCollection.js b/node_modules/@shopify/flash-list/dist/recyclerview/ViewHolderCollection.js +index 8e3db51..85738f0 100644 +--- a/node_modules/@shopify/flash-list/dist/recyclerview/ViewHolderCollection.js ++++ b/node_modules/@shopify/flash-list/dist/recyclerview/ViewHolderCollection.js +@@ -7,6 +7,7 @@ import React, { useEffect, useImperativeHandle, useLayoutEffect } from "react"; + import { ViewHolder } from "./ViewHolder"; + import { CompatView } from "./components/CompatView"; + import { useRecyclerViewContext } from "./RecyclerViewContextProvider"; ++import { Platform } from "react-native"; + /** + * ViewHolderCollection component that manages the rendering of multiple ViewHolder instances + * and handles layout updates for the entire collection +@@ -72,9 +73,13 @@ export const ViewHolderCollection = (props) => { + // return `${index} => ${reactKey}`; + // }) + // ); ++ const renderEntries = Array.from(renderStack.entries()); ++ if (Platform.OS === "web") { ++ renderEntries.sort(([, a], [, b]) => a.index - b.index); ++ } + return (React.createElement(CompatView, { style: hasData && containerStyle }, containerLayout && + hasData && +- Array.from(renderStack.entries(), ([reactKey, { index }]) => { ++ renderEntries.map(([reactKey, { index }]) => { + const item = data[index]; + // Suppress separators for items in the last row to prevent + // height mismatch. The last data item has no separator (no diff --git a/patches/@shopify/flash-list/details.md b/patches/@shopify/flash-list/details.md index cdfdb86609dd7..1df88c2f0c628 100644 --- a/patches/@shopify/flash-list/details.md +++ b/patches/@shopify/flash-list/details.md @@ -9,3 +9,11 @@ - Upstream PR/issue: TBD - E/App issue: https://github.com/Expensify/App/issues/33725 - PR introducing patch: https://github.com/Expensify/App/pull/81566 + + +### [@shopify+flash-list+2.3.0+003+sort-for-natural-DOM-order.patch](@shopify+flash-list+2.3.0+003+sort-for-natural-DOM-order.patch) + +- Reason: Fixes random DOM order in virtualized list items. Forces natural DOM order in the list. +- Upstream PR/issue: TBD +- E/App issue: https://github.com/Expensify/App/pull/80122 +- PR introducing patch: https://github.com/Expensify/App/pull/85825 \ No newline at end of file