[DF] feat(Shopify#547): experimentalMaintainTopContentPosition work…

…s vertically

fixture/ios/FlatListPro.xcodeproj/xcshareddata/xcschemes/FlatListPro.xcscheme

@@ -41,7 +41,7 @@
       </Testables>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Debug"
+      buildConfiguration = "Release"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"

fixture/src/List.tsx

@@ -9,40 +9,64 @@ import {
   Pressable,
   LayoutAnimation,
   StyleSheet,
+  Button,
 } from "react-native";
 import { FlashList } from "@shopify/flash-list";
+import { useFocusEffect } from "@react-navigation/native";
 
-const generateArray = (size: number) => {
-  const arr = new Array(size);
+interface ListItem {
+  value: number;
+  type?: string;
+}
+
+let newItemIndexes = 1001;
+
+const generateArray = (size: number): ListItem[] => {
+  const arr = new Array<ListItem>(size);
   for (let i = 0; i < size; i++) {
-    arr[i] = i;
+    arr[i] = { value: i };
   }
+
   return arr;
 };
 
 const List = () => {
   const [refreshing, setRefreshing] = useState(false);
   const [data, setData] = useState(generateArray(100));
+  const [isLoading, setIsLoading] = useState(false);
 
-  const list = useRef<FlashList<number> | null>(null);
+  const list = useRef<FlashList<ListItem> | null>(null);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      newItemIndexes = 1001;
+    }, [])
+  );
 
   const removeItem = (item: number) => {
     setData(
       data.filter((dataItem) => {
-        return dataItem !== item;
+        return dataItem.value !== item;
       })
     );
     list.current?.prepareForLayoutAnimationRender();
     // after removing the item, we start animation
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
   };
 
-  const renderItem = ({ item }: { item: number }) => {
-    const backgroundColor = item % 2 === 0 ? "#00a1f1" : "#ffbb00";
+  const renderItem = ({ item }: { item: ListItem }) => {
+    const backgroundColor = item.value % 2 === 0 ? "#00a1f1" : "#ffbb00";
+
+    // if (Number(item.value) >= 90 && Number(item.value) <= 99) {
+    //   return <View />;
+    // }
+    // item.value % 2 === 0
+    // ? 100 + (item.value > 1000 ? item.value / 10 : item.value) + 1
+    // : 200 + (item.value > 1000 ? item.value / 10 : item.value),
     return (
       <Pressable
         onPress={() => {
-          removeItem(item);
+          removeItem(item.value);
         }}
       >
         <View
@@ -52,7 +76,7 @@ const List = () => {
             height: item % 2 === 0 ? 100 : 200,
           }}
         >
-          <Text>Cell Id: {item}</Text>
+          <Text>Cell Id: {item.value}</Text>
         </View>
       </Pressable>
     );

ios/Sources/AutoLayoutView.swift

@@ -13,7 +13,7 @@ import UIKit
     }
 
     @objc func setScrollOffset(_ scrollOffset: Int) {
-        self.scrollOffset = CGFloat(scrollOffset)
+//        self.scrollOffset = CGFloat(scrollOffset)
     }
 
     @objc func setWindowSize(_ windowSize: Int) {
@@ -51,6 +51,19 @@ import UIKit
     /// Tracks where first pixel is drawn in the visible window
     private var lastMinBound: CGFloat = 0
 
+    /// Marks the first Item in the Scroll View
+    private var firstItemMarker: CellContainer? = nil
+
+    /// The position of the item in the Scroll View after insertion / deletion
+    private var previousMarkerOffset: CGFloat = -1
+
+    /// State that informs us whether this is the first render
+    private var isInitialRender: Bool = true
+
+
+    private var firstItemStableId: String = ""
+    private var firstItemOffset: CGFloat = 0
+
     /// State that informs us whether this is the first render
     private var isInitialRender: Bool = true
 
@@ -276,6 +289,11 @@ import UIKit
             updateLastMaxBoundOverall(currentCell: cellContainer, nextCell: nextCell)
         }
 
+        // This was placed here so that offset adjustments would ONLY be performed after
+        // all necessary views were pulled up to remove the white space
+        cellContainers.indices.forEach { index in
+            let cellContainer = cellContainers[index]
+
         if maintainTopContentPosition {
             adjustTopContentPosition(
                 cellContainers: cellContainers,

ios/Sources/CellContainer.swift

@@ -3,11 +3,11 @@ import Foundation
 @objc class CellContainer: UIView {
     var index: Int = -1
     var stableId: String = ""
-    
+
     @objc func setIndex(_ index: Int) {
         self.index = index
     }
-  
+
     @objc func setStableId(_ stableId: String) {
         self.stableId = stableId
     }

src/FlashList.tsx

@@ -160,6 +160,7 @@ class FlashList<T> extends React.PureComponent<
     prevState: FlashListState<T>
   ): FlashListState<T> {
     const newState = { ...prevState };
+
     if (prevState.numColumns !== nextProps.numColumns) {
       newState.numColumns = nextProps.numColumns || 1;
       newState.layoutProvider = FlashList.getLayoutProvider<T>(