[DF] feat(#547): rename some variables

CHANGELOG.md

@@ -7,9 +7,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
-- Add support for `experimentalMaintainTopContentPosition`
-
-- Add support for `experimentalMaintainTopContentPosition`
+- Add support for `experimentalScrollPositionManagement`
   - https://github.com/Shopify/flash-list/issues/547
 
 ## [1.4.3] - 2023-04-24

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

@@ -20,10 +20,10 @@ class AutoLayoutView(context: Context) : ReactViewGroup(context) {
     var enableInstrumentation = false
     var disableAutoLayout = false
     var pixelDensity = 1.0
-    var maintainTopContentPosition = false
+    var experimentalScrollPositionManagement = false
 
     override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
-        if(maintainTopContentPosition) {
+        if(experimentalScrollPositionManagement) {
             fixLayout()
         }
         super.onLayout(changed, left, top, right, bottom)
@@ -74,7 +74,7 @@ class AutoLayoutView(context: Context) : ReactViewGroup(context) {
             alShadow.clearGapsAndOverlaps(
                     positionSortedViews,
                     getParentScrollView() as ScrollView,
-                    maintainTopContentPosition
+                    experimentalScrollPositionManagement
             )
         }
     }

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

@@ -63,9 +63,9 @@ class AutoLayoutViewManager: ReactViewManager() {
         view.enableInstrumentation = enableInstrumentation
     }
 
-    @ReactProp(name = "experimentalMaintainTopContentPosition")
+    @ReactProp(name = "experimentalScrollPositionManagement")
     fun setExperimentalMaintainContentPosition(view: AutoLayoutView, isMaintaining: Boolean) {
-        view.maintainTopContentPosition = isMaintaining
+        view.experimentalScrollPositionManagement = isMaintaining
     }
 
     private fun convertToPixelLayout(dp: Double, density: Double): Int {

android/src/main/kotlin/com/shopify/reactnative/flash_list/DoubleSidedScrollView.java

@@ -37,11 +37,11 @@ public void setShiftHeight(double shiftHeight) {
 
     public void setShiftOffset(double shiftOffset) {
         mShiftOffset = shiftOffset;
-        dispatchDraw();
+        adjustOverscroller();
         Log.d("ScrollView", "set shiftOffset " + shiftOffset);
     }
 
-    protected void dispatchDraw() {
+    protected void adjustOverscroller() {
         int scrollWindowHeight = getHeight() - getPaddingBottom() - getPaddingTop();
         if(mShiftOffset != 0) {
             // correct
@@ -75,7 +75,7 @@ protected void dispatchDraw() {
     @Override
     public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
         super.onLayoutChange(v, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom);
-        dispatchDraw();
+        adjustOverscroller();
     }
 
     @Nullable

fixture/src/List.tsx

@@ -77,6 +77,7 @@ const List = () => {
       renderItem={renderItem}
       estimatedItemSize={100}
       data={data}
+      experimentalScrollPositionManagement
     />
   );
 };

fixture/src/Messages/Messages.tsx

@@ -1,15 +1,16 @@
 import { KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
 import { FlashList } from "@shopify/flash-list";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 
 import MessageType from "./models/MessageType";
+import initialMessages from "./data/messages";
 import TextInputBar from "./TextInputBar";
 import userName from "./userName";
 import MessageItem from "./MessageItem";
 import Message from "./models/Message";
 
 const Messages = () => {
-  const [messages, setMessages] = useState([] as Message[]);
+  const [messages, setMessages] = useState(initialMessages);
 
   const appendMessage = (text: string) => {
     const message = {
@@ -19,25 +20,15 @@ const Messages = () => {
       type: MessageType.Text,
     } as Message;
     setMessages([message, ...messages]);
-    requestAnimationFrame(() => {
-      if (
-        flashListRef.current?.experimentalFindApproxFirstVisibleIndex()! < 2
-      ) {
-        flashListRef.current?.scrollToIndex({ index: 0, animated: true });
-      }
-    });
   };
 
-  const flashListRef = useRef<FlashList<Message>>(null);
-
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : undefined}
       keyboardVerticalOffset={100}
       style={styles.keyboardAvoidingViewStyles}
     >
       <FlashList
-        ref={flashListRef}
         renderItem={MessageItem}
         inverted
         estimatedItemSize={100}
@@ -55,7 +46,6 @@ const Messages = () => {
           return item.type;
         }}
         data={messages}
-        experimentalMaintainTopContentPosition
       />
       <TextInputBar
         onSend={(text) => {

ios/Sources/AutoLayoutView.swift

@@ -32,12 +32,12 @@ import UIKit
         self.disableAutoLayout = disableAutoLayout
     }
 
-    @objc func setExperimentalMaintainTopContentPosition(_ experimentalMaintainTopContentPosition: Bool) {
-        self.maintainTopContentPosition = experimentalMaintainTopContentPosition
+    @objc func setExperimentalScrollPositionManagement(_ experimentalScrollPositionManagement: Bool) {
+        self.experimentalScrollPositionManagement = experimentalScrollPositionManagement
     }
 
     private var horizontal = false
-    private var maintainTopContentPosition = false
+    private var experimentalScrollPositionManagement = false
     private var scrollOffset: CGFloat = 0
     private var windowSize: CGFloat = 0
     private var renderAheadOffset: CGFloat = 0
@@ -104,7 +104,7 @@ import UIKit
         /// doesn't work at scale.
         ///
         /// The goal is that we can remove this in the future and get the offset from only one place 🤞
-        if let scrollView, maintainTopContentPosition {
+        if let scrollView, experimentalScrollPositionManagement {
             return horizontal ?
                 scrollView.contentOffset.x :
                 scrollView.contentOffset.y
@@ -264,7 +264,7 @@ import UIKit
                 nextAnchorStableId == "" ||
                 nextCell.stableId == anchorStableId
 
-            if maintainTopContentPosition && isAnchorFound {
+            if experimentalScrollPositionManagement && isAnchorFound {
                 nextAnchorOffset = horizontal ?
                     nextCell.frame.minX :
                     nextCell.frame.minY
@@ -275,7 +275,7 @@ import UIKit
             updateLastMaxBoundOverall(currentCell: cellContainer, nextCell: nextCell)
         }
 
-        if maintainTopContentPosition {
+        if experimentalScrollPositionManagement {
             adjustTopContentPosition(
                 cellContainers: cellContainers,
                 scrollView: scrollView

ios/Sources/AutoLayoutViewManager.m

@@ -10,6 +10,6 @@ @interface RCT_EXTERN_MODULE(AutoLayoutViewManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(enableInstrumentation, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(disableAutoLayout, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onBlankAreaEvent, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(experimentalMaintainTopContentPosition, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(experimentalScrollPositionManagement, BOOL)
 
 @end

src/FlashList.tsx

@@ -138,6 +138,19 @@ class FlashList<T> extends React.PureComponent<
     if (Number(this.props.numColumns) > 1 && this.props.horizontal) {
       throw new CustomError(ExceptionList.columnsWhileHorizontalNotSupported);
     }
+    if (
+      this.props.horizontal &&
+      this.props.experimentalScrollPositionManagement
+    ) {
+      throw new CustomError(ExceptionList.horizontalMaintainScrollNotSupported);
+    }
+
+    if (
+      this.props.experimentalScrollPositionManagement &&
+      this.props.renderScrollComponent
+    ) {
+      throw new CustomError(ExceptionList.customMaintainScrollNotSupported);
+    }
 
     // `createAnimatedComponent` always passes a blank style object. To avoid warning while using AnimatedFlashList we've modified the check
     // `style` prop can be an array. So we need to validate every object in array. Check: https://github.com/Shopify/flash-list/issues/651
@@ -385,7 +398,7 @@ class FlashList<T> extends React.PureComponent<
           itemAnimator={this.itemAnimator}
           suppressBoundedSizeException
           externalScrollView={
-            this.props.experimentalMaintainTopContentPosition &&
+            this.props.experimentalScrollPositionManagement &&
             Platform.OS === "android"
               ? (BidirectionalScrollView as unknown as RecyclerListViewProps["externalScrollView"])
               : (renderScrollComponent as RecyclerListViewProps["externalScrollView"])
@@ -471,8 +484,8 @@ class FlashList<T> extends React.PureComponent<
           onBlankAreaEvent={this.props.onBlankArea}
           onLayout={this.updateDistanceFromWindow}
           disableAutoLayout={this.props.disableAutoLayout}
-          experimentalMaintainTopContentPosition={
-            this.props.experimentalMaintainTopContentPosition
+          experimentalScrollPositionManagement={
+            this.props.experimentalScrollPositionManagement
           }
         >
           {children}

src/FlashListProps.ts

@@ -335,9 +335,10 @@ export interface FlashListProps<TItem> extends ScrollViewProps {
 
   /**
    * If enabled, FlashList will try and maintain the position of the list when items are added from the top.
+   * Additionally, it will fix scroll position when chainging scroll orientation on your device.
    * This prop requires you define a `keyExtractor` function. The `keyExtractor` is used to compute the list
    * top anchor. Without it, the list will fail to render. If in debug mode, you may see flashes if new data
    * comes in quickly. If this happens, please confirm you see this in release mode before reporting an issue.
    */
-  experimentalMaintainTopContentPosition?: boolean;
+  experimentalScrollPositionManagement?: boolean;
 }

src/errors/ExceptionList.ts

@@ -24,5 +24,13 @@ const ExceptionList = {
       "optimizeItemArrangement has been enabled on `MasonryFlashList` but overrideItemLayout is not set.",
     type: "InvariantViolation",
   },
+  horizontalMaintainScrollNotSupported: {
+    message: "Cannot Scroll Horizontally while maintaining content position",
+    type: "NotSupportedException",
+  },
+  customMaintainScrollNotSupported: {
+    message: "Cannot maintain scroll position for a custom scroll view",
+    type: "NotSupportedException",
+  },
 };
 export default ExceptionList;

src/native/auto-layout/AutoLayoutView.tsx

@@ -29,7 +29,7 @@ export interface AutoLayoutViewProps {
   onBlankAreaEvent?: BlankAreaEventHandler;
   onLayout?: (event: LayoutChangeEvent) => void;
   disableAutoLayout?: boolean;
-  experimentalMaintainTopContentPosition?: boolean;
+  experimentalScrollPositionManagement?: boolean;
 }
 
 class AutoLayoutView extends React.Component<AutoLayoutViewProps> {
@@ -64,8 +64,8 @@ class AutoLayoutView extends React.Component<AutoLayoutViewProps> {
           listeners.length !== 0 || Boolean(this.props.onBlankAreaEvent)
         }
         disableAutoLayout={this.props.disableAutoLayout}
-        experimentalMaintainTopContentPosition={Boolean(
-          this.props.experimentalMaintainTopContentPosition
+        experimentalScrollPositionManagement={Boolean(
+          this.props.experimentalScrollPositionManagement
         )}
       >
         {this.props.children}

src/native/auto-layout/AutoLayoutViewNativeComponentProps.ts

@@ -14,5 +14,5 @@ export interface AutoLayoutViewNativeComponentProps {
   onBlankAreaEvent: OnBlankAreaEventHandler;
   enableInstrumentation: boolean;
   disableAutoLayout?: boolean;
-  experimentalMaintainTopContentPosition?: boolean;
+  experimentalScrollPositionManagement?: boolean;
 }