From 73139fa7bc03df22711b292c4a7867d2400c71f0 Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Wed, 4 Oct 2023 16:00:15 -0400
Subject: [PATCH] Implement maintainVisibleContentPosition

---
 .../pages/scroll-view/index.js                |  85 ++++++--
 .../src/exports/ScrollView/ScrollViewBase.js  | 187 +++++++++++++++++-
 .../src/exports/ScrollView/index.js           |   1 +
 3 files changed, 255 insertions(+), 18 deletions(-)

diff --git a/packages/react-native-web-examples/pages/scroll-view/index.js b/packages/react-native-web-examples/pages/scroll-view/index.js
index aff8007924..8a55ed4273 100644
--- a/packages/react-native-web-examples/pages/scroll-view/index.js
+++ b/packages/react-native-web-examples/pages/scroll-view/index.js
@@ -3,29 +3,39 @@ import { ScrollView, StyleSheet, Text, Pressable, View } from 'react-native';
 import Button from '../../shared/button';
 import Example from '../../shared/example';
 
-const ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);
+const ITEMS = [...Array(12)].map((_, i) => ({ id: i, text: `Item ${i}` }));
 
-function createItemRow(msg, index) {
+function createItemRow(msg) {
   return (
-    <Pressable key={index} style={[styles.item]}>
-      <Text style={styles.text}>{msg}</Text>
+    <Pressable key={msg.id} style={[styles.item]}>
+      <Text style={styles.text}>{msg.text}</Text>
     </Pressable>
   );
 }
 
-function Divider() {
-  return <View style={styles.divider} />;
-}
-
 export default function ScrollViewPage() {
   const [scrollEnabled, setEnabled] = React.useState(true);
+  const [horizontal, setHorizontal] = React.useState(false);
   const [throttle, setThrottle] = React.useState(16);
+  const [maintainVisibleContentPosition, setMaintainVisibleContentPosition] =
+    React.useState(false);
+  const [autoscrollToTop, setAutoScrollToTop] = React.useState(false);
+  const [items, setItems] = React.useState(ITEMS);
   const scrollRef = React.useRef(null);
 
   return (
     <Example title="ScrollView">
       <View style={styles.container}>
         <ScrollView
+          horizontal={horizontal}
+          maintainVisibleContentPosition={
+            maintainVisibleContentPosition
+              ? {
+                  minIndexForVisible: 0,
+                  autoscrollToTopThreshold: autoscrollToTop ? 100 : null
+                }
+              : null
+          }
           onScroll={() => {
             console.log('onScroll');
           }}
@@ -34,45 +44,87 @@ export default function ScrollViewPage() {
           scrollEventThrottle={throttle}
           style={[styles.scrollView, !scrollEnabled && styles.disabled]}
         >
-          {ITEMS.map(createItemRow)}
+          {items.map(createItemRow)}
         </ScrollView>
 
         <View style={styles.buttons}>
+          <Button
+            onPress={() => {
+              setHorizontal((val) => !val);
+            }}
+            title={horizontal ? 'Vertical' : 'Horizontal'}
+          />
           <Button
             onPress={() => {
               setEnabled((val) => !val);
             }}
             title={scrollEnabled ? 'Disable' : 'Enable'}
           />
-          <Divider />
           <Button
             onPress={() => {
               setThrottle((val) => (val !== 16 ? 16 : 1000));
             }}
             title="Throttle"
           />
-        </View>
-        <View style={styles.buttons}>
           <Button
             onPress={() => {
               scrollRef.current.scrollTo({ y: 0 });
             }}
             title="To start"
           />
-          <Divider />
           <Button
             onPress={() => {
               scrollRef.current.scrollTo({ y: 50 });
             }}
             title="To 50px"
           />
-          <Divider />
           <Button
             onPress={() => {
               scrollRef.current.scrollToEnd({ animated: true });
             }}
             title="To end"
           />
+          <Button
+            onPress={() => {
+              setMaintainVisibleContentPosition((val) => !val);
+            }}
+            title={
+              maintainVisibleContentPosition ? 'Disable MVCP' : 'Enable MVCP'
+            }
+          />
+          {maintainVisibleContentPosition && (
+            <Button
+              onPress={() => {
+                setAutoScrollToTop((val) => !val);
+              }}
+              title={
+                autoscrollToTop
+                  ? 'Disable auto scroll top'
+                  : 'Enable auto scroll top'
+              }
+            />
+          )}
+          <Button
+            onPress={() => {
+              setItems((items) => [
+                { id: items[0].id - 1, text: `Item ${items[0].id - 1}` },
+                ...items
+              ]);
+            }}
+            title="Add item start"
+          />
+          <Button
+            onPress={() => {
+              setItems((items) => [
+                ...items,
+                {
+                  id: items[items.length - 1].id + 1,
+                  text: `Item ${items[items.length - 1].id + 1}`
+                }
+              ]);
+            }}
+            title="Add item end"
+          />
         </View>
       </View>
     </Example>
@@ -105,9 +157,8 @@ const styles = StyleSheet.create({
   buttons: {
     flexDirection: 'row',
     justifyContent: 'center',
+    gap: '1rem',
+    flexWrap: 'wrap',
     marginVertical: '1rem'
-  },
-  divider: {
-    width: '1rem'
   }
 });
diff --git a/packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js b/packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js
index a006d2b404..31799e0c9c 100644
--- a/packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js
+++ b/packages/react-native-web/src/exports/ScrollView/ScrollViewBase.js
@@ -16,6 +16,11 @@ import useMergeRefs from '../../modules/useMergeRefs';
 
 type Props = {
   ...ViewProps,
+  horizontal?: boolean,
+  maintainVisibleContentPosition?: {
+    minIndexForVisible: number,
+    autoscrollToTopThreshold?: number
+  },
   onMomentumScrollBegin?: (e: any) => void,
   onMomentumScrollEnd?: (e: any) => void,
   onScroll?: (e: any) => void,
@@ -74,6 +79,8 @@ const ScrollViewBase: React.AbstractComponent<
   React.ElementRef<typeof View>
 > = React.forwardRef((props, forwardedRef) => {
   const {
+    horizontal,
+    maintainVisibleContentPosition,
     onScroll,
     onTouchMove,
     onWheel,
@@ -84,10 +91,27 @@ const ScrollViewBase: React.AbstractComponent<
     style,
     ...rest
   } = props;
+  const {
+    minIndexForVisible: mvcpMinIndexForVisible,
+    autoscrollToTopThreshold: mvcpAutoscrollToTopThreshold
+  } = maintainVisibleContentPosition ?? {};
 
   const scrollState = React.useRef({ isScrolling: false, scrollLastTick: 0 });
   const scrollTimeout = React.useRef(null);
   const scrollRef = React.useRef(null);
+  const prevFirstVisibleOffsetRef = React.useRef(null);
+  const firstVisibleViewRef = React.useRef(null);
+  const mutationObserverRef = React.useRef(null);
+  const lastScrollOffsetRef = React.useRef(0);
+
+  const getScrollOffset = React.useCallback(() => {
+    if (scrollRef.current == null) {
+      return 0;
+    }
+    return horizontal
+      ? scrollRef.current.scrollLeft
+      : scrollRef.current.scrollTop;
+  }, [horizontal]);
 
   function createPreventableScrollHandler(handler: Function) {
     return (e: Object) => {
@@ -101,8 +125,14 @@ const ScrollViewBase: React.AbstractComponent<
 
   function handleScroll(e: Object) {
     e.stopPropagation();
+
     if (e.target === scrollRef.current) {
       e.persist();
+
+      lastScrollOffsetRef.current = getScrollOffset();
+
+      prepareForMaintainVisibleContentPosition();
+
       // A scroll happened, so the scroll resets the scrollend timeout.
       if (scrollTimeout.current != null) {
         clearTimeout(scrollTimeout.current);
@@ -146,17 +176,172 @@ const ScrollViewBase: React.AbstractComponent<
     }
   }
 
+  const getContentView = React.useCallback(() => {
+    return scrollRef.current?.childNodes[0];
+  }, []);
+
+  const scrollToOffset = React.useCallback(
+    (offset, animated) => {
+      const behavior = animated ? 'smooth' : 'instant';
+      scrollRef.current?.scroll(
+        horizontal ? { left: offset, behavior } : { top: offset, behavior }
+      );
+    },
+    [horizontal]
+  );
+
+  const prepareForMaintainVisibleContentPosition = React.useCallback(() => {
+    if (mvcpMinIndexForVisible == null) {
+      return;
+    }
+
+    const scrollNode = scrollRef.current;
+    const contentView = getContentView();
+    if (scrollNode == null || contentView == null) {
+      return;
+    }
+
+    const scrollOffset = getScrollOffset();
+
+    for (
+      let i = mvcpMinIndexForVisible;
+      i < contentView.childNodes.length;
+      i++
+    ) {
+      const subview = contentView.childNodes[i];
+      const subviewOffset = horizontal ? subview.offsetLeft : subview.offsetTop;
+      if (
+        subviewOffset > scrollOffset ||
+        i === contentView.childNodes.length - 1
+      ) {
+        prevFirstVisibleOffsetRef.current = subviewOffset;
+        firstVisibleViewRef.current = subview;
+        break;
+      }
+    }
+  }, [getContentView, getScrollOffset, mvcpMinIndexForVisible, horizontal]);
+
+  const adjustForMaintainVisibleContentPosition = React.useCallback(() => {
+    if (mvcpMinIndexForVisible == null) {
+      return;
+    }
+
+    const scrollNode = scrollRef.current;
+    const firstVisibleView = firstVisibleViewRef.current;
+    const prevFirstVisibleOffset = prevFirstVisibleOffsetRef.current;
+    if (
+      scrollNode == null ||
+      firstVisibleView == null ||
+      prevFirstVisibleOffset == null
+    ) {
+      return;
+    }
+
+    const firstVisibleViewOffset = horizontal
+      ? firstVisibleView.offsetLeft
+      : firstVisibleView.offsetTop;
+    const delta = firstVisibleViewOffset - prevFirstVisibleOffset;
+    if (Math.abs(delta) > 0.5) {
+      const scrollOffset = getScrollOffset();
+      prevFirstVisibleOffsetRef.current = firstVisibleViewOffset;
+      scrollToOffset(scrollOffset + delta, false);
+      if (
+        mvcpAutoscrollToTopThreshold != null &&
+        scrollOffset <= mvcpAutoscrollToTopThreshold
+      ) {
+        scrollToOffset(0, true);
+      }
+    }
+  }, [
+    getScrollOffset,
+    scrollToOffset,
+    mvcpMinIndexForVisible,
+    mvcpAutoscrollToTopThreshold,
+    horizontal
+  ]);
+
+  const setupMutationObserver = React.useCallback(() => {
+    const scrollNode = scrollRef.current;
+    const contentView = getContentView();
+    if (contentView == null || scrollNode == null) {
+      return;
+    }
+
+    mutationObserverRef.current?.disconnect();
+
+    const mutationObserver = new MutationObserver(() => {
+      // Chrome adjusts scroll position when elements are added at the top of the
+      // view. We want to have the same behavior as react-native / Safari so we
+      // reset the scroll position to the last value we got from an event.
+      const lastScrollOffset = lastScrollOffsetRef.current;
+      const scrollOffset = getScrollOffset();
+      if (lastScrollOffset !== scrollOffset) {
+        scrollToOffset(lastScrollOffset, false);
+      }
+
+      // This needs to execute after scroll events are dispatched, but
+      // in the same tick to avoid flickering. rAF provides the right timing.
+      requestAnimationFrame(() => {
+        adjustForMaintainVisibleContentPosition();
+      });
+    });
+    mutationObserver.observe(contentView, {
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+
+    mutationObserverRef.current = mutationObserver;
+  }, [
+    adjustForMaintainVisibleContentPosition,
+    getContentView,
+    getScrollOffset,
+    scrollToOffset
+  ]);
+
+  React.useEffect(() => {
+    prepareForMaintainVisibleContentPosition();
+    setupMutationObserver();
+  }, [prepareForMaintainVisibleContentPosition, setupMutationObserver]);
+
   const hideScrollbar =
     showsHorizontalScrollIndicator === false ||
     showsVerticalScrollIndicator === false;
 
+  const setMergedRef = useMergeRefs(scrollRef, forwardedRef);
+
+  const onRef = React.useCallback(
+    (newRef) => {
+      // Make sure to only call refs and re-attach listeners if the node changed.
+      if (newRef == null || newRef === scrollRef.current) {
+        return;
+      }
+
+      setMergedRef(newRef);
+      prepareForMaintainVisibleContentPosition();
+      setupMutationObserver();
+    },
+    [
+      prepareForMaintainVisibleContentPosition,
+      setMergedRef,
+      setupMutationObserver
+    ]
+  );
+
+  React.useEffect(() => {
+    const mutationObserver = mutationObserverRef.current;
+    return () => {
+      mutationObserver?.disconnect();
+    };
+  }, []);
+
   return (
     <View
       {...rest}
       onScroll={handleScroll}
       onTouchMove={createPreventableScrollHandler(onTouchMove)}
       onWheel={createPreventableScrollHandler(onWheel)}
-      ref={useMergeRefs(scrollRef, forwardedRef)}
+      ref={onRef}
       style={[
         style,
         !scrollEnabled && styles.scrollDisabled,
diff --git a/packages/react-native-web/src/exports/ScrollView/index.js b/packages/react-native-web/src/exports/ScrollView/index.js
index d387e26273..c1f7998cac 100644
--- a/packages/react-native-web/src/exports/ScrollView/index.js
+++ b/packages/react-native-web/src/exports/ScrollView/index.js
@@ -624,6 +624,7 @@ class ScrollView extends React.Component<ScrollViewProps> {
 
     const props = {
       ...other,
+      horizontal,
       style: [baseStyle, pagingEnabled && pagingEnabledStyle, this.props.style],
       onTouchStart: this.scrollResponderHandleTouchStart,
       onTouchMove: this.scrollResponderHandleTouchMove,