Support for ScrollView.maintainVisibleContentPosition on Android

Libraries/Components/ScrollView/ScrollView.js

@@ -249,34 +249,6 @@ type IOSProps = $ReadOnly<{|
    * @platform ios
    */
   canCancelContentTouches?: ?boolean,
-  /**
-   * When set, the scroll view will adjust the scroll position so that the first child that is
-   * currently visible and at or beyond `minIndexForVisible` will not change position. This is
-   * useful for lists that are loading content in both directions, e.g. a chat thread, where new
-   * messages coming in might otherwise cause the scroll position to jump. A value of 0 is common,
-   * but other values such as 1 can be used to skip loading spinners or other content that should
-   * not maintain position.
-   *
-   * The optional `autoscrollToTopThreshold` can be used to make the content automatically scroll
-   * to the top after making the adjustment if the user was within the threshold of the top before
-   * the adjustment was made. This is also useful for chat-like applications where you want to see
-   * new messages scroll into place, but not if the user has scrolled up a ways and it would be
-   * disruptive to scroll a bunch.
-   *
-   * Caveat 1: Reordering elements in the scrollview with this enabled will probably cause
-   * jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now,
-   * don't re-order the content of any ScrollViews or Lists that use this feature.
-   *
-   * Caveat 2: This simply uses `contentOffset` and `frame.origin` in native code to compute
-   * visibility. Occlusion, transforms, and other complexity won't be taken into account as to
-   * whether content is "visible" or not.
-   *
-   * @platform ios
-   */
-  maintainVisibleContentPosition?: ?$ReadOnly<{|
-    minIndexForVisible: number,
-    autoscrollToTopThreshold?: ?number,
-  |}>,
   /**
    * The maximum allowed zoom scale. The default value is 1.0.
    * @platform ios
@@ -513,6 +485,32 @@ export type Props = $ReadOnly<{|
    *   - `true`, deprecated, use 'always' instead
    */
   keyboardShouldPersistTaps?: ?('always' | 'never' | 'handled' | true | false),
+  /**
+   * When set, the scroll view will adjust the scroll position so that the first child that is
+   * currently visible and at or beyond `minIndexForVisible` will not change position. This is
+   * useful for lists that are loading content in both directions, e.g. a chat thread, where new
+   * messages coming in might otherwise cause the scroll position to jump. A value of 0 is common,
+   * but other values such as 1 can be used to skip loading spinners or other content that should
+   * not maintain position.
+   *
+   * The optional `autoscrollToTopThreshold` can be used to make the content automatically scroll
+   * to the top after making the adjustment if the user was within the threshold of the top before
+   * the adjustment was made. This is also useful for chat-like applications where you want to see
+   * new messages scroll into place, but not if the user has scrolled up a ways and it would be
+   * disruptive to scroll a bunch.
+   *
+   * Caveat 1: Reordering elements in the scrollview with this enabled will probably cause
+   * jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now,
+   * don't re-order the content of any ScrollViews or Lists that use this feature.
+   *
+   * Caveat 2: This simply uses `contentOffset` and `frame.origin` in native code to compute
+   * visibility. Occlusion, transforms, and other complexity won't be taken into account as to
+   * whether content is "visible" or not.
+   */
+  maintainVisibleContentPosition?: ?$ReadOnly<{|
+    minIndexForVisible: number,
+    autoscrollToTopThreshold?: ?number,
+  |}>,
   /**
    * Called when the momentum scroll starts (scroll which occurs as the ScrollView glides to a stop).
    */

ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java

@@ -17,10 +17,12 @@
 import android.graphics.Rect;
 import android.graphics.drawable.ColorDrawable;
 import android.graphics.drawable.Drawable;
+import android.os.Handler;
 import android.view.FocusFinder;
 import android.view.KeyEvent;
 import android.view.MotionEvent;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.accessibility.AccessibilityEvent;
 import android.widget.HorizontalScrollView;
 import android.widget.OverScroller;
@@ -43,13 +45,19 @@
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.events.NativeGestureUtil;
 import com.facebook.react.views.view.ReactViewBackgroundManager;
+import com.facebook.react.views.view.ReactViewGroup;
+
+import java.lang.ref.WeakReference;
 import java.lang.reflect.Field;
 import java.util.ArrayList;
 import java.util.List;
 
 /** Similar to {@link ReactScrollView} but only supports horizontal scrolling. */
 public class ReactHorizontalScrollView extends HorizontalScrollView
-    implements ReactClippingViewGroup, FabricViewStateManager.HasFabricViewStateManager {
+    implements ReactClippingViewGroup,
+        ViewGroup.OnHierarchyChangeListener,
+        View.OnLayoutChangeListener,
+        FabricViewStateManager.HasFabricViewStateManager {
 
   private static boolean DEBUG_MODE = false && ReactBuildConfig.DEBUG;
   private static String TAG = ReactHorizontalScrollView.class.getSimpleName();
@@ -91,11 +99,23 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
   private @Nullable List<Integer> mSnapOffsets;
   private boolean mSnapToStart = true;
   private boolean mSnapToEnd = true;
+  private View mContentView;
   private ReactViewBackgroundManager mReactBackgroundManager;
   private boolean mPagedArrowScrolling = false;
   private int pendingContentOffsetX = UNSET_CONTENT_OFFSET;
   private int pendingContentOffsetY = UNSET_CONTENT_OFFSET;
   private final FabricViewStateManager mFabricViewStateManager = new FabricViewStateManager();
+  private @Nullable ReactScrollViewMaintainVisibleContentPositionData mMaintainVisibleContentPositionData;
+  private @Nullable WeakReference<View> firstVisibleViewForMaintainVisibleContentPosition = null;
+  private @Nullable Rect prevFirstVisibleFrameForMaintainVisibleContentPosition = null;
+
+  private final Handler mHandler = new Handler();
+  private final Runnable mComputeFirstVisibleViewRunnable = new Runnable() {
+    @Override
+    public void run() {
+      computeFirstVisibleItemForMaintainVisibleContentPosition();
+    }
+  };
 
   private @Nullable ValueAnimator mScrollAnimator;
   private int mFinalAnimatedPositionScrollX = 0;
@@ -133,6 +153,7 @@ public void onInitializeAccessibilityNodeInfo(
         });
 
     mScroller = getOverScrollerFromParent();
+    setOnHierarchyChangeListener(this);
     mLayoutDirection =
         I18nUtil.getInstance().isRTL(context)
             ? ViewCompat.LAYOUT_DIRECTION_RTL
@@ -245,6 +266,13 @@ public void setOverflow(String overflow) {
     invalidate();
   }
 
+  public void setMaintainVisibleContentPosition(ReactScrollViewMaintainVisibleContentPositionData maintainVisibleContentPositionData) {
+    mMaintainVisibleContentPositionData = maintainVisibleContentPositionData;
+    if (maintainVisibleContentPositionData != null) {
+      computeFirstVisibleItemForMaintainVisibleContentPosition();
+    }
+  }
+
   @Override
   protected void onDraw(Canvas canvas) {
     if (DEBUG_MODE) {
@@ -422,6 +450,13 @@ protected void onScrollChanged(int x, int y, int oldX, int oldY) {
           mOnScrollDispatchHelper.getXFlingVelocity(),
           mOnScrollDispatchHelper.getYFlingVelocity());
     }
+
+    if (mMaintainVisibleContentPositionData != null) {
+      // We don't want to compute the first visible view everytime onScrollChanged gets called (can be multiple times per second).
+      // The following logic debounces the computation by 100ms (arbitrary value).
+      mHandler.removeCallbacks(mComputeFirstVisibleViewRunnable);
+      mHandler.postDelayed(mComputeFirstVisibleViewRunnable, 100);
+    }
   }
 
   @Override
@@ -1070,6 +1105,18 @@ public void setBorderStyle(@Nullable String style) {
     mReactBackgroundManager.setBorderStyle(style);
   }
 
+  @Override
+  public void onChildViewAdded(View parent, View child) {
+    mContentView = child;
+    mContentView.addOnLayoutChangeListener(this);
+  }
+
+  @Override
+  public void onChildViewRemoved(View parent, View child) {
+    mContentView.removeOnLayoutChangeListener(this);
+    mContentView = null;
+  }
+
   /**
    * Calls `smoothScrollTo` and updates state.
    *
@@ -1225,6 +1272,91 @@ private void updateStateOnScroll() {
     updateStateOnScroll(getScrollX(), getScrollY());
   }
 
+  /**
+   * Called when a mContentView's layout has changed. Fixes the scroll position depending on maintainVisibleContentPosition
+   */
+  @Override
+  public void onLayoutChange(
+    View v,
+    int left,
+    int top,
+    int right,
+    int bottom,
+    int oldLeft,
+    int oldTop,
+    int oldRight,
+    int oldBottom) {
+    if (mContentView == null) {
+      return;
+    }
+
+    if (this.mMaintainVisibleContentPositionData != null) {
+      scrollMaintainVisibleContentPosition();
+    }
+  }
+
+  /**
+   * Called when maintainVisibleContentPosition is used and after a scroll.
+   * Finds the first completely visible view in the ScrollView and stores it for later use.
+   */
+  private void computeFirstVisibleItemForMaintainVisibleContentPosition() {
+    ReactScrollViewMaintainVisibleContentPositionData maintainVisibleContentPositionData = mMaintainVisibleContentPositionData;
+    if (maintainVisibleContentPositionData == null) return;
+
+    int currentScrollX = getScrollX();
+    int minIdx = maintainVisibleContentPositionData.minIndexForVisible;
+
+    ReactViewGroup contentView = (ReactViewGroup) getChildAt(0);
+    if (contentView == null) return;
+
+    for (int i = minIdx; i < contentView.getChildCount(); i++) {
+      // Find the first entirely visible view. This must be done after we update the content offset
+      // or it will tend to grab rows that were made visible by the shift in position
+      View child = contentView.getChildAt(i);
+      if (child.getX() >= currentScrollX || i == contentView.getChildCount() - 1) {
+        firstVisibleViewForMaintainVisibleContentPosition = new WeakReference<>(child);
+        Rect frame = new Rect();
+        child.getHitRect(frame);
+        prevFirstVisibleFrameForMaintainVisibleContentPosition = frame;
+        break;
+      }
+    }
+  }
+
+  /**
+   * Called when maintainVisibleContentPosition is used and after a layout change.
+   * Detects if the layout change impacts the scroll position and corrects it if needed.
+   */
+  private void scrollMaintainVisibleContentPosition() {
+    ReactScrollViewMaintainVisibleContentPositionData maintainVisibleContentPositionData = this.mMaintainVisibleContentPositionData;
+    if (maintainVisibleContentPositionData == null) return;
+
+    int currentScrollX = getScrollX();
+
+    View firstVisibleView = firstVisibleViewForMaintainVisibleContentPosition != null ? firstVisibleViewForMaintainVisibleContentPosition.get() : null;
+    if (firstVisibleView == null) return;
+    Rect prevFirstVisibleFrame = this.prevFirstVisibleFrameForMaintainVisibleContentPosition;
+    if (prevFirstVisibleFrame == null) return;
+
+    Rect newFrame = new Rect();
+    firstVisibleView.getHitRect(newFrame);
+    int deltaX = newFrame.left - prevFirstVisibleFrame.left;
+
+    if (Math.abs(deltaX) > 1) {
+      int scrollXTo = getScrollX() + deltaX;
+
+      scrollTo(scrollXTo, getScrollY());
+
+      Integer autoScrollThreshold = maintainVisibleContentPositionData.autoScrollToTopThreshold;
+      if (autoScrollThreshold != null) {
+        // If the offset WAS within the threshold of the start, animate to the start.
+        if (currentScrollX - deltaX <= autoScrollThreshold) {
+          reactSmoothScrollTo(0, getScrollY());
+        }
+      }
+    }
+  }
+
   @Override
   public FabricViewStateManager getFabricViewStateManager() {
     return mFabricViewStateManager;

ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java

@@ -311,4 +311,16 @@ public void setContentOffset(ReactHorizontalScrollView view, ReadableMap value)
       view.scrollTo(0, 0);
     }
   }
+
+  @ReactProp(name = "maintainVisibleContentPosition")
+  public void setMaintainVisibleContentPosition(ReactHorizontalScrollView view, ReadableMap value) {
+    if (value != null) {
+      int minIndexForVisible = value.getInt("minIndexForVisible");
+      Integer autoScrollToTopThreshold = value.hasKey("autoscrollToTopThreshold") ? value.getInt("autoscrollToTopThreshold") : null;
+      ReactScrollViewMaintainVisibleContentPositionData maintainVisibleContentPositionData = new ReactScrollViewMaintainVisibleContentPositionData(minIndexForVisible, autoScrollToTopThreshold);
+      view.setMaintainVisibleContentPosition(maintainVisibleContentPositionData);
+    } else {
+      view.setMaintainVisibleContentPosition(null);
+    }
+  }
 }