@r0b0t3d/react-native-collapsible 1.5.2 → 1.6.0-alpha.0

package/src/components/scrollable/useAnimatedScroll.ts

@@ -1,12 +1,11 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Dimensions, SectionListScrollParams } from 'react-native';
 import {
   runOnJS,
   useAnimatedScrollHandler,
   useSharedValue,
 } from 'react-native-reanimated';
-import type { ScrollToIndexParams } from '../../types';
+import type { CollapsibleHandles, ScrollToIndexParams } from '../../types';
 import useCollapsibleContext from '../../hooks/useCollapsibleContext';
 import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
 
@@ -30,37 +29,52 @@ export default function useAnimatedScroll({
   const { setCollapsibleHandlers, fixedHeaderHeight } =
     useInternalCollapsibleContext();
 
+  // Keep a ref to the latest handlers so we can publish stable function
+  // references to setCollapsibleHandlers() that always delegate to the most
+  // recent closures. This avoids re-running the publish effect on every
+  // scrollable re-render.
+  const handlersRef = useRef<{
+    scrollTo: (y: number, animated?: boolean) => void;
+    scrollToIndex: (p: ScrollToIndexParams) => void;
+    scrollToLocation: (p: SectionListScrollParams) => void;
+  }>({ scrollTo, scrollToIndex, scrollToLocation });
+  handlersRef.current = { scrollTo, scrollToIndex, scrollToLocation };
+
   useEffect(() => {
     if (scrollY.value > 0) {
-      requestAnimationFrame(() => scrollTo(scrollY.value, false));
+      requestAnimationFrame(() =>
+        handlersRef.current.scrollTo(scrollY.value, false)
+      );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const collapse = useCallback(
     (animated = true) => {
-      scrollTo(fixedHeaderHeight.value, animated);
+      handlersRef.current.scrollTo(fixedHeaderHeight.value, animated);
     },
-    [scrollTo]
+    [fixedHeaderHeight]
   );
 
-  const expand = useCallback(() => scrollTo(0), [scrollTo]);
+  const expand = useCallback(() => handlersRef.current.scrollTo(0), []);
+
+  // Stable trampoline for use inside worklets: runOnJS captures the function
+  // reference at worklet-build time, so we must pass a stable function that
+  // dereferences handlersRef.current at JS-thread call time.
+  const scrollToOnJS = useCallback((y: number) => {
+    handlersRef.current.scrollTo(y);
+  }, []);
 
   useEffect(() => {
-    setCollapsibleHandlers({
+    const handlers: CollapsibleHandles = {
       collapse,
       expand,
-      scrollTo,
-      scrollToIndex,
-      scrollToLocation,
-    });
-  }, [
-    setCollapsibleHandlers,
-    collapse,
-    expand,
-    scrollTo,
-    scrollToIndex,
-    scrollToLocation,
-  ]);
+      scrollTo: (y, a) => handlersRef.current.scrollTo(y, a),
+      scrollToIndex: (p) => handlersRef.current.scrollToIndex(p),
+      scrollToLocation: (p) => handlersRef.current.scrollToLocation(p),
+    };
+    setCollapsibleHandlers(handlers);
+  }, [setCollapsibleHandlers, collapse, expand]);
 
   const scrollHandler = useAnimatedScrollHandler(
     {
@@ -81,12 +95,12 @@ export default function useAnimatedScroll({
             if (scrollDirection.value === 'up') {
               yValue = maxY;
             }
-            runOnJS(scrollTo)(yValue);
+            runOnJS(scrollToOnJS)(yValue);
           }
         }
       },
     },
-    [scrollTo]
+    [headerSnappable, fixedHeaderHeight, scrollY, scrollToOnJS]
   );
 
   return {

package/src/hooks/useCollapsibleHeaderContext.ts

@@ -1,10 +1,10 @@
 import { createContext, useContext } from 'react';
 import { LayoutRectangle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { SharedValue } from 'react-native-reanimated';
 
 export type CollapsibleContextHeaderType = {
   handleStickyViewLayout: (key: string, layout?: LayoutRectangle) => void;
-  animatedY: Animated.SharedValue<number>;
+  animatedY: SharedValue<number>;
 };
 
 export const CollapsibleHeaderContext =

package/src/index.tsx

@@ -9,5 +9,3 @@ export { default as CollapsibleHeaderContainer } from './components/header/Colla
 export { default as StickyView } from './components/header/StickyView';
 export { default as CollapsibleView } from './components/CollapsibleView';
 export * from './components/CollapsibleView';
-
-export { default as CollapsibleFlashList } from './plugins/CollapsibleFlashList';

package/src/plugins/CollapsibleFlashList.tsx

@@ -1,18 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
-import Animated, {
-  runOnJS,
-  useAnimatedReaction,
-} from 'react-native-reanimated';
+import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 import useAnimatedScroll from '../components/scrollable/useAnimatedScroll';
 import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
 import type { CollapsibleProps } from '../types';
 import AnimatedTopView from '../components/header/AnimatedTopView';
 import useCollapsibleContext from '../hooks/useCollapsibleContext';
-import { FlashList, FlashListProps } from '@shopify/flash-list';
-
-const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
+import { AnimatedFlashList, FlashListProps } from '@shopify/flash-list';
+import type { ScrollToIndexParams } from '../types';
 
 type Props<Data> = FlashListProps<Data> & CollapsibleProps;
 
@@ -39,7 +35,7 @@ export default function CollapsibleFlashList<Data>({
     });
   }, []);
 
-  const scrollToIndex = useCallback((params) => {
+  const scrollToIndex = useCallback((params: ScrollToIndexParams) => {
     scrollViewRef.current?.scrollToIndex?.(params);
   }, []);
 
@@ -73,11 +69,15 @@ export default function CollapsibleFlashList<Data>({
 
   const handleScrollToIndexFailed = useCallback(() => {}, []);
 
+  const ListHeaderComponent = props.ListHeaderComponent;
   function renderListHeader() {
     return (
       <View>
         <AnimatedTopView height={headerHeight} />
-        {props.ListHeaderComponent}
+        {ListHeaderComponent &&
+          (typeof ListHeaderComponent === 'function'
+            ? React.createElement(ListHeaderComponent)
+            : ListHeaderComponent)}
       </View>
     );
   }

package/src/plugins/CollapsibleLegendList.tsx

@@ -13,6 +13,7 @@ import type { CollapsibleProps } from '../types';
 import AnimatedTopView from '../components/header/AnimatedTopView';
 import useCollapsibleContext from '../hooks/useCollapsibleContext';
 import { AnimatedLegendList } from '@legendapp/list/reanimated';
+import type { ScrollToIndexParams } from '../types';
 
 type Props<Data> = FlatListProps<Data> & CollapsibleProps;
 
@@ -38,7 +39,7 @@ export default function CollapsibleLegendList<Data>({
     });
   }, []);
 
-  const scrollToIndex = useCallback((params) => {
+  const scrollToIndex = useCallback((params: ScrollToIndexParams) => {
     scrollViewRef.current?.scrollToIndex?.(params);
   }, []);
 
@@ -72,11 +73,15 @@ export default function CollapsibleLegendList<Data>({
 
   const handleScrollToIndexFailed = useCallback(() => {}, []);
 
+  const ListHeaderComponent = props.ListHeaderComponent;
   function renderListHeader() {
     return (
       <View>
         <AnimatedTopView height={headerHeight} />
-        {props.ListHeaderComponent}
+        {ListHeaderComponent &&
+          (typeof ListHeaderComponent === 'function'
+            ? React.createElement(ListHeaderComponent)
+            : ListHeaderComponent)}
       </View>
     );
   }
@@ -101,6 +106,7 @@ export default function CollapsibleLegendList<Data>({
         ListHeaderComponent={renderListHeader()}
         //@ts-ignore
         simultaneousHandlers={[]}
+        // @ts-ignore
         animatedProps={animatedProps}
       />
     </View>

package/src/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { LayoutRectangle, SectionListScrollParams } from 'react-native';
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 export type ScrollToIndexParams = {
   animated?: boolean | null;
@@ -27,9 +27,9 @@ export type CollapsibleHandles = {
 };
 
 export type CollapsibleContextType = CollapsibleHandles & {
-  scrollY: Animated.SharedValue<number>;
-  headerHeight: Animated.SharedValue<number>;
-  headerCollapsed: Animated.SharedValue<boolean>;
+  scrollY: SharedValue<number>;
+  headerHeight: SharedValue<number>;
+  headerCollapsed: SharedValue<boolean>;
   /**
    * Scroll to specific view
    * @param ref View that you want to scroll to
@@ -49,13 +49,13 @@ export type LayoutParams = {
 export type CollapsibleContextInternalType = {
   scrollViewRef: React.RefObject<any>;
   containerRef: React.RefObject<any>;
-  containerHeight: Animated.SharedValue<number>;
-  contentMinHeight: Animated.SharedValue<number>;
-  headerViewPositions: Animated.SharedValue<
+  containerHeight: SharedValue<number>;
+  contentMinHeight: SharedValue<number>;
+  headerViewPositions: SharedValue<
     Record<string, { top: number; stickyHeight: number }>
   >;
-  fixedHeaderHeight: Animated.SharedValue<number>;
-  headerHeight: Animated.SharedValue<number>;
+  fixedHeaderHeight: SharedValue<number>;
+  headerHeight: SharedValue<number>;
   handleHeaderContainerLayout: (
     key: string,
     layout?: LayoutRectangle,
@@ -69,7 +69,7 @@ export type CollapsibleProps = {
 };
 
 export type PullToRefreshContextType = {
-  refreshValue: Animated.SharedValue<number>;
-  internalRefreshing: Animated.SharedValue<boolean>;
-  internalHeight: Animated.SharedValue<number>;
+  refreshValue: SharedValue<number>;
+  internalRefreshing: SharedValue<boolean>;
+  internalHeight: SharedValue<number>;
 };

package/src/utils/useSharedValueRef.ts

@@ -1,18 +1,49 @@
 import { useCallback, useRef } from 'react';
-import Animated, { useSharedValue } from 'react-native-reanimated';
+import { SharedValue, useSharedValue } from 'react-native-reanimated';
+
+function shallowEqualKeys(
+  a: Record<string, unknown>,
+  b: Record<string, unknown>
+): boolean {
+  for (const k in a) {
+    if (a[k] !== b[k]) return false;
+  }
+  for (const k in b) {
+    if (!(k in a)) return false;
+  }
+  return true;
+}
 
 export default function useSharedValueRef<T>(
   defaultValue: T
-): [Animated.SharedValue<T>, (value: T) => void] {
+): [SharedValue<T>, (value: T) => void] {
   const sharedValue = useSharedValue<T>(defaultValue);
   const savedValue = useRef<T>(defaultValue);
 
   const appendValue = useCallback(
     (value: T) => {
-      savedValue.current = {
-        ...savedValue.current,
-        ...value,
-      };
+      const current = savedValue.current as Record<string, unknown>;
+      const next = value as Record<string, unknown>;
+      // Quick path: same reference means no change.
+      if (current === next) {
+        return;
+      }
+      // Build the merged map: take current, overlay next, then drop any
+      // resulting `undefined` slots so long-lived consumers don't
+      // accumulate stale keys across mount/unmount cycles.
+      const merged: Record<string, unknown> = { ...current, ...next };
+      for (const k in merged) {
+        if (merged[k] === undefined) {
+          delete merged[k];
+        }
+      }
+      // Skip the shared-value write if the merged map is shallow-equal to
+      // the previous one. This protects readers (useDerivedValue
+      // Object.values(...).reduce) from re-running on no-op updates.
+      if (shallowEqualKeys(merged, current)) {
+        return;
+      }
+      savedValue.current = merged as T;
       sharedValue.value = savedValue.current;
     },
     [sharedValue]

package/src/withCollapsibleContext.tsx

@@ -8,7 +8,7 @@ import type { LayoutRectangle, View } from 'react-native';
 
 export default function withCollapsibleContext<T>(Component: FC<T>) {
   return (props: T) => {
-    const collapsibleHandlers = useRef<CollapsibleHandles>();
+    const collapsibleHandlers = useRef<CollapsibleHandles>(null);
     const headerHeight = useSharedValue(0);
     const scrollY = useSharedValue(0);
     const fixedHeaderHeight = useSharedValue(0);
@@ -20,9 +20,12 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
     >({});
     const headerViewPositions = useSharedValue({});
 
-    const setCollapsibleHandlers = useCallback((handlers) => {
-      collapsibleHandlers.current = handlers;
-    }, []);
+    const setCollapsibleHandlers = useCallback(
+      (handlers: CollapsibleHandles) => {
+        collapsibleHandlers.current = handlers;
+      },
+      []
+    );
 
     const headerCollapsed = useDerivedValue(() => {
       const maxY = fixedHeaderHeight.value;