@r0b0t3d/react-native-collapsible 1.2.0-alpha.2 → 1.2.1

package/src/components/scrollable/useAnimatedScroll.ts

@@ -6,6 +6,7 @@ import {
   useAnimatedScrollHandler,
   useSharedValue,
 } from 'react-native-reanimated';
+import type { ScrollToIndexParams } from 'src/types';
 import useCollapsibleContext from '../../hooks/useCollapsibleContext';
 import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
 
@@ -14,11 +15,13 @@ const { height: wHeight } = Dimensions.get('window');
 type Props = {
   headerSnappable: boolean;
   scrollTo: (yValue: number, animated?: boolean) => void;
+  scrollToIndex: (params: ScrollToIndexParams) => void;
 };
 
 export default function useAnimatedScroll({
   headerSnappable,
   scrollTo,
+  scrollToIndex,
 }: Props) {
   const scrollDirection = useSharedValue('unknown');
   const { scrollY } = useCollapsibleContext();
@@ -31,11 +34,15 @@ export default function useAnimatedScroll({
     }
   }, []);
 
-  const collapse = useCallback(() => {
-    scrollTo(
-      Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0)
-    );
-  }, [scrollTo]);
+  const collapse = useCallback(
+    (animated = true) => {
+      scrollTo(
+        Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0),
+        animated
+      );
+    },
+    [scrollTo]
+  );
 
   const expand = useCallback(() => scrollTo(0), [scrollTo]);
 
@@ -44,8 +51,9 @@ export default function useAnimatedScroll({
       collapse,
       expand,
       scrollTo,
+      scrollToIndex,
     });
-  }, [setCollapsibleHandlers, collapse, expand, scrollTo]);
+  }, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);
 
   const scrollHandler = useAnimatedScrollHandler(
     {

package/src/types.ts

@@ -2,10 +2,18 @@ import type React from 'react';
 import type { View } from 'react-native';
 import type Animated from 'react-native-reanimated';
 
+export type ScrollToIndexParams = {
+  animated?: boolean | null;
+  index: number;
+  viewOffset?: number;
+  viewPosition?: number;
+};
+
 export type CollapsibleHandles = {
-  collapse: () => void;
+  collapse: (animated?: boolean) => void;
   expand: () => void;
   scrollTo: (offset: number, animate?: boolean) => void;
+  scrollToIndex: (params: ScrollToIndexParams) => void;
 };
 
 export type CollapsibleContextType = CollapsibleHandles & {

package/src/withCollapsibleContext.tsx

@@ -34,6 +34,8 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
     const scrollViewRef = useRef<View>(null);
 
     const setCollapsibleHandlers = useCallback((handlers) => {
+      console.log({ handlers });
+
       collapsibleHandlers.current = handlers;
     }, []);
 
@@ -138,7 +140,7 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
           0
         );
         headerHeight.value = withTiming(totalHeight, {
-          duration: fixedHeaderHeight.value === 0 ? 0 : 200,
+          duration: fixedHeaderHeight.value === 0 ? 0 : 10,
         });
         fixedHeaderHeight.value = totalHeight;
         // Try refresh sticky positions
@@ -153,10 +155,13 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
 
     const context = useMemo(() => {
       return {
-        collapse: () => collapsibleHandlers.current?.collapse(),
+        collapse: (animated?: boolean) =>
+          collapsibleHandlers.current?.collapse(animated),
         expand: () => collapsibleHandlers.current?.expand(),
         scrollTo: (offset: number, animate?: boolean) =>
           collapsibleHandlers.current?.scrollTo(offset, animate),
+        scrollToIndex: (params: any) =>
+          collapsibleHandlers.current?.scrollToIndex(params),
         headerHeight,
         scrollY,
         headerCollapsed,