add ref

Author: computerjazz

src/components/DraggableFlatList.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import React, {
+  ForwardedRef,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
 import {
   ListRenderItem,
   FlatListProps,
@@ -57,7 +63,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
   const {
     cellDataRef,
     containerRef,
-    flatlistRef,
+    flatListRef,
     isTouchActiveRef,
     keyToIndexRef,
     panGestureHandlerRef,
@@ -395,7 +401,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
           <AnimatedFlatList
             {...props}
             CellRendererComponent={CellRendererComponent}
-            ref={flatlistRef}
+            ref={flatListRef}
             onContentSizeChange={onListContentSizeChange}
             scrollEnabled={!activeKey && scrollEnabled}
             renderItem={renderItem}
@@ -422,14 +428,19 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
   );
 }
 
-export default function DraggableFlatList<T>(props: DraggableFlatListProps<T>) {
+function DraggableFlatList<T>(
+  props: DraggableFlatListProps<T>,
+  ref: React.ForwardedRef<FlatList<T>>
+) {
   return (
     <PropsProvider {...props}>
       <AnimatedValueProvider>
-        <RefProvider>
+        <RefProvider flatListRef={ref}>
           <DraggableFlatListInner {...props} />
         </RefProvider>
       </AnimatedValueProvider>
     </PropsProvider>
   );
 }
+
+export default React.forwardRef(DraggableFlatList);

src/context/refContext.tsx

@@ -13,7 +13,7 @@ type RefContextValue<T> = {
   cellDataRef: React.MutableRefObject<Map<string, CellData>>;
   keyToIndexRef: React.MutableRefObject<Map<string, number>>;
   containerRef: React.RefObject<Animated.View>;
-  flatlistRef: React.RefObject<FlatList<T>>;
+  flatListRef: React.RefObject<FlatList<T>> | React.ForwardedRef<FlatList<T>>;
   panGestureHandlerRef: React.RefObject<PanGestureHandler>;
   scrollOffsetRef: React.MutableRefObject<number>;
   isTouchActiveRef: React.MutableRefObject<{
@@ -27,10 +27,12 @@ const RefContext = React.createContext<RefContextValue<any> | undefined>(
 
 export default function RefProvider<T>({
   children,
+  flatListRef,
 }: {
   children: React.ReactNode;
+  flatListRef: React.ForwardedRef<FlatList<T>>;
 }) {
-  const value = useSetupRefs<T>();
+  const value = useSetupRefs<T>({ flatListRef });
   return <RefContext.Provider value={value}>{children}</RefContext.Provider>;
 }
 
@@ -44,7 +46,11 @@ export function useRefs<T>() {
   return value as RefContextValue<T>;
 }
 
-function useSetupRefs<T>() {
+function useSetupRefs<T>({
+  flatListRef: flatListRefProp,
+}: {
+  flatListRef: React.ForwardedRef<FlatList<T>>;
+}) {
   const props = useProps<T>();
   const { onRef, animationConfig = DEFAULT_PROPS.animationConfig } = props;
 
@@ -62,24 +68,21 @@ function useSetupRefs<T>() {
   const cellDataRef = useRef(new Map<string, CellData>());
   const keyToIndexRef = useRef(new Map<string, number>());
   const containerRef = useRef<Animated.View>(null);
-  const flatlistRef = useRef<FlatList<T>>(null);
+  const flatListRefInner = useRef<FlatList<T>>(null);
+  const flatListRef = flatListRefProp || flatListRefInner;
   const panGestureHandlerRef = useRef<PanGestureHandler>(null);
   const scrollOffsetRef = useRef(0);
   const isTouchActiveRef = useRef({
     native: isTouchActiveNative,
     js: false,
   });
 
-  useEffect(() => {
-    if (flatlistRef.current) onRef?.(flatlistRef.current);
-  }, [onRef]);
-
   const refs = useMemo(
     () => ({
       animationConfigRef,
       cellDataRef,
       containerRef,
-      flatlistRef,
+      flatListRef,
       isTouchActiveRef,
       keyToIndexRef,
       panGestureHandlerRef,

src/hooks/useAutoScroll.tsx

@@ -26,7 +26,7 @@ import { useAnimatedValues } from "../context/animatedValueContext";
 import { useRefs } from "../context/refContext";
 
 export function useAutoScroll<T>() {
-  const { flatlistRef } = useRefs();
+  const { flatListRef } = useRefs<T>();
   const {
     autoscrollThreshold = DEFAULT_PROPS.autoscrollThreshold,
     autoscrollSpeed = DEFAULT_PROPS.autoscrollSpeed,
@@ -111,11 +111,12 @@ export function useAutoScroll<T>() {
       isAutoScrollInProgress.current.js = true;
 
       function getFlatListNode(): FlatList<T> | null {
-        if (!flatlistRef.current) return null;
-        if ("scrollToOffset" in flatlistRef.current)
-          return flatlistRef.current as FlatList<T>;
+        if (!flatListRef || !("current" in flatListRef) || !flatListRef.current)
+          return null;
+        if ("scrollToOffset" in flatListRef.current)
+          return flatListRef.current as FlatList<T>;
         //@ts-ignore backwards compat
-        if ("getNode" in flatlistRef.current) return flatlistRef.getNode();
+        if ("getNode" in flatListRef.current) return flatListRef.getNode();
         return null;
       }