Fixing race condition with ref setting

src/FlatList.tsx

@@ -0,0 +1,38 @@
+import React, { useRef, useState } from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+import { useMvcpTuner } from './useMvcpTuner';
+
+export type maintainVisibleContentPositionPropType = {
+  autoscrollToTopThreshold?: number;
+  minIndexForVisible: number;
+};
+
+export type FlatListComponentPropType<T = any> = FlatListProps<T> & {
+  maintainVisibleContentPosition: maintainVisibleContentPositionPropType;
+};
+
+export default React.forwardRef(
+  (props: FlatListComponentPropType, forwardedRef) => {
+    const flRef = useRef<FlatList>();
+    const [refReady, setRefReady] = useState(false);
+    const { extraData, maintainVisibleContentPosition: mvcp } = props;
+    useMvcpTuner(flRef, refReady, mvcp, extraData);
+
+    return (
+      <FlatList
+        {...props}
+        ref={(ref) => {
+          // @ts-ignore
+          flRef.current = ref;
+          setRefReady(true);
+
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(ref);
+          } else if (forwardedRef?.current) {
+            forwardedRef.current = ref;
+          }
+        }}
+      />
+    );
+  }
+);

src/ScrollView.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useRef } from 'react';
+import {
+  NativeModules,
+  FlatList,
+  ScrollViewProps,
+  ScrollView,
+} from 'react-native';
+import { useMvcpTuner } from './useMvcpTuner';
+
+export const MvcpScrollViewManager = NativeModules.MvcpScrollViewManager;
+
+export type maintainVisibleContentPositionPropType = {
+  autoscrollToTopThreshold?: number;
+  minIndexForVisible: number;
+};
+
+export type ScrollViewComponentPropType = ScrollViewProps & {
+  maintainVisibleContentPosition: maintainVisibleContentPositionPropType;
+};
+
+export default React.forwardRef(
+  (props: ScrollViewComponentPropType, forwardedRef) => {
+    const flRef = useRef<FlatList>();
+    const [refReady, setRefReady] = useState(false);
+
+    const { maintainVisibleContentPosition: mvcp } = props;
+    useMvcpTuner(flRef, refReady, mvcp);
+
+    return (
+      <ScrollView
+        {...props}
+        ref={(ref) => {
+          // @ts-ignore
+          flRef.current = ref;
+          setRefReady(true);
+
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(ref);
+          } else if (forwardedRef?.current) {
+            forwardedRef.current = ref;
+          }
+        }}
+      />
+    );
+  }
+);

src/index.android.tsx

@@ -1,5 +1,5 @@
-import FlatList from './Lists/FlatList';
-import ScrollView from './Lists/ScrollView';
+import FlatList from './FlatList';
+import ScrollView from './ScrollView';
 
 export { FlatList };
 export { ScrollView };

src/useMvcpTuner.ts

@@ -0,0 +1,66 @@
+import { MutableRefObject, useEffect, useRef } from 'react';
+import {
+  NativeModules,
+  FlatList,
+  Platform,
+  findNodeHandle,
+} from 'react-native';
+
+import type { maintainVisibleContentPositionPropType } from './FlatList';
+export const MvcpScrollViewManager = NativeModules.MvcpScrollViewManager;
+
+export const useMvcpTuner = (
+  flRef: MutableRefObject<FlatList | undefined>,
+  refReady: boolean,
+  mvcp?: maintainVisibleContentPositionPropType,
+  extraData?: any
+) => {
+  const autoscrollToTopThreshold = useRef<number>();
+  const minIndexForVisible = useRef<number>();
+
+  useEffect(() => {
+    let cleanupPromise: Promise<number> | undefined;
+    const enableMaintainVisibleContentPosition = (): void => {
+      if (!mvcp || Platform.OS !== 'android' || !flRef?.current) {
+        return;
+      }
+
+      if (
+        autoscrollToTopThreshold.current === mvcp.autoscrollToTopThreshold &&
+        minIndexForVisible.current === mvcp.minIndexForVisible
+      ) {
+        // Don't do anythinig if the values haven't changed
+        return;
+      }
+
+      autoscrollToTopThreshold.current =
+        mvcp.autoscrollToTopThreshold || -Number.MAX_SAFE_INTEGER;
+      minIndexForVisible.current = mvcp.minIndexForVisible || 0;
+
+      const viewTag = findNodeHandle(flRef.current);
+      cleanupPromise = MvcpScrollViewManager.enableMaintainVisibleContentPosition(
+        viewTag,
+        autoscrollToTopThreshold.current,
+        minIndexForVisible.current
+      );
+    };
+
+    enableMaintainVisibleContentPosition();
+
+    return () => {
+      if (
+        mvcp &&
+        autoscrollToTopThreshold.current === mvcp.autoscrollToTopThreshold &&
+        minIndexForVisible.current === mvcp.minIndexForVisible
+      ) {
+        // Don't do anythinig if the values haven't changed
+        return;
+      }
+
+      cleanupPromise?.then((handle) => {
+        MvcpScrollViewManager.disableMaintainVisibleContentPosition(handle);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refReady, extraData, mvcp]);
+};