@r0b0t3d/react-native-collapsible 1.3.5-beta.2 → 1.3.5-beta.3

package/lib/module/withCollapsibleContext.js

@@ -2,112 +2,61 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { CollapsibleContext } from './hooks/useCollapsibleContext';
 import { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';
-import { useAnimatedReaction, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
-import { debounce } from './utils/debounce';
-import CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';
+import { useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
 export default function withCollapsibleContext(Component) {
   return props => {
     const collapsibleHandlers = useRef();
     const headerHeight = useSharedValue(0);
     const scrollY = useSharedValue(0);
-    const stickyViewRefs = useRef({});
-    const stickyViewTops = useSharedValue({});
-    const stickyViewPositionsRef = useRef({});
-    const stickyViewPositions = useSharedValue({});
     const fixedHeaderHeight = useSharedValue(0);
     const containerHeight = useSharedValue(0);
-    const firstStickyViewY = useSharedValue(1000000);
     const containerRef = useRef(null);
     const scrollViewRef = useRef(null);
+    const headerContainerLayouts = useRef({});
+    const headerViewPositions = useSharedValue({});
     const setCollapsibleHandlers = useCallback(handlers => {
       collapsibleHandlers.current = handlers;
     }, []);
     const headerCollapsed = useDerivedValue(() => {
-      const maxY = fixedHeaderHeight.value - firstStickyViewY.value;
+      const maxY = fixedHeaderHeight.value;
       return scrollY.value >= maxY;
     }, []);
     const contentMinHeight = useDerivedValue(() => {
       return containerHeight.value + fixedHeaderHeight.value;
     }, []);
-    useAnimatedReaction(() => {
-      const totalHeight = Object.keys(stickyViewPositions.value).reduce((acc, item) => {
-        const value = stickyViewPositions.value[item];
-        if (value) {
-          return acc + value.top;
-        }
-        return acc;
+    const handleHeaderContainerLayout = useCallback((key, layout, stickyHeight) => {
+      headerContainerLayouts.current[key] = layout ? {
+        ...layout,
+        stickyHeight
+      } : undefined;
+      const headerContainers = Object.keys(headerContainerLayouts.current).filter(k => !!headerContainerLayouts.current[k]);
+      // Calculate total header height
+      const totalHeight = headerContainers.reduce((acc, value) => {
+        var _headerContainerLayou;
+        return acc + (((_headerContainerLayou = headerContainerLayouts.current[value]) === null || _headerContainerLayou === void 0 ? void 0 : _headerContainerLayou.height) ?? 0);
       }, 0);
-      return totalHeight - fixedHeaderHeight.value;
-    }, (result, previous) => {
-      if (result !== previous) {
-        var _viewPositions$sorted;
-        const viewPositions = stickyViewPositions.value;
-        const sortedKeys = Object.keys(viewPositions).filter(v => !!viewPositions[v])
-        // @ts-ignore
-        .sort((a, b) => viewPositions[a].top - viewPositions[b].top);
-        let totalTop = 0;
-        const values = {};
-        for (let i = 0; i < sortedKeys.length; i++) {
-          // @ts-ignore
-          values[sortedKeys[i]] = totalTop;
-          // Try minus 1 make it filled when scrolling up.
-          // Otherwise, we can see a small space between the persits views
-          // @ts-ignore
-          totalTop += viewPositions[sortedKeys[i]].height - 1;
-        }
-        stickyViewTops.value = values;
-        // @ts-ignore
-        firstStickyViewY.value = ((_viewPositions$sorted = viewPositions[sortedKeys[0]]) === null || _viewPositions$sorted === void 0 ? void 0 : _viewPositions$sorted.top) || 0;
-      }
-    });
-    const handleStickyViewLayout = useCallback((viewKey, viewRef) => {
-      if (viewRef && viewRef.current && containerRef.current) {
-        stickyViewRefs.current[viewKey] = viewRef;
-        viewRef.current.measureLayout(
-        // @ts-ignore
-        containerRef.current, (left, top, width, height) => {
-          stickyViewPositionsRef.current = {
-            ...stickyViewPositionsRef.current,
-            [viewKey]: {
-              left,
-              top,
-              width,
-              height
-            }
-          };
-          // @ts-ignore
-          stickyViewPositions.value = stickyViewPositionsRef.current;
-        }, () => {});
-      } else {
-        stickyViewRefs.current = {
-          ...stickyViewRefs.current,
-          [viewKey]: undefined
-        };
-        stickyViewPositionsRef.current = {
-          ...stickyViewPositionsRef.current,
-          [viewKey]: undefined
-        };
-        // @ts-ignore
-        stickyViewPositions.value = stickyViewPositionsRef.current;
-      }
-    }, []);
-    const debounceRefreshStickyPositions = useMemo(() => {
-      return debounce(() => {
-        Object.keys(stickyViewRefs.current).forEach(key => {
-          const viewRef = stickyViewRefs.current[key];
-          if (viewRef) {
-            handleStickyViewLayout(key, viewRef);
-          }
-        });
-      }, 200);
-    }, []);
-    const handleHeaderContainerLayout = useCallback(height => {
-      headerHeight.value = withTiming(height, {
+      headerHeight.value = withTiming(totalHeight, {
         duration: fixedHeaderHeight.value === 0 ? 0 : 10
       });
-      fixedHeaderHeight.value = height;
-      // Try refresh sticky positions
-      debounceRefreshStickyPositions();
+      fixedHeaderHeight.value = totalHeight;
+      // Calculate header positions
+      const sortedHeaders = headerContainers.sort((a, b) => {
+        var _headerContainerLayou2, _headerContainerLayou3;
+        return (((_headerContainerLayou2 = headerContainerLayouts.current[a]) === null || _headerContainerLayou2 === void 0 ? void 0 : _headerContainerLayou2.y) || 0) - (((_headerContainerLayou3 = headerContainerLayouts.current[b]) === null || _headerContainerLayou3 === void 0 ? void 0 : _headerContainerLayou3.y) || 0);
+      });
+      const values = {};
+      let aStickyHeight = 0;
+      for (let index = 0; index < sortedHeaders.length; index++) {
+        var _headerContainerLayou4;
+        const headerKey = sortedHeaders[index];
+        const sHeight = ((_headerContainerLayou4 = headerContainerLayouts.current[headerKey]) === null || _headerContainerLayou4 === void 0 ? void 0 : _headerContainerLayou4.stickyHeight) ?? 0;
+        values[headerKey] = {
+          top: aStickyHeight,
+          stickyHeight: sHeight
+        };
+        aStickyHeight += sHeight;
+      }
+      headerViewPositions.value = values;
     }, []);
     const handleContainerHeight = useCallback(height => {
       containerHeight.value = height;
@@ -138,21 +87,18 @@ export default function withCollapsibleContext(Component) {
     const internalContext = useMemo(() => ({
       scrollViewRef,
       containerRef,
-      handleStickyViewLayout,
       handleHeaderContainerLayout,
       setCollapsibleHandlers,
       handleContainerHeight,
-      firstStickyViewY,
-      stickyViewTops,
-      stickyViewPositions,
       fixedHeaderHeight,
-      contentMinHeight
-    }), [setCollapsibleHandlers, handleStickyViewLayout, handleHeaderContainerLayout, handleContainerHeight, firstStickyViewY, stickyViewTops, stickyViewPositions, fixedHeaderHeight, contentMinHeight]);
+      contentMinHeight,
+      headerViewPositions
+    }), [setCollapsibleHandlers, handleHeaderContainerLayout, handleContainerHeight, fixedHeaderHeight, contentMinHeight, headerViewPositions]);
     return /*#__PURE__*/React.createElement(CollapsibleContext.Provider, {
       value: context
     }, /*#__PURE__*/React.createElement(InternalCollapsibleContext.Provider, {
       value: internalContext
-    }, /*#__PURE__*/React.createElement(CollapsibleHeaderProvider, null, /*#__PURE__*/React.createElement(Component, props))));
+    }, /*#__PURE__*/React.createElement(Component, props)));
   };
 }
 //# sourceMappingURL=withCollapsibleContext.js.map

package/lib/module/withCollapsibleContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useAnimatedReaction","useDerivedValue","useSharedValue","withTiming","debounce","CollapsibleHeaderProvider","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","containerHeight","firstStickyViewY","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","_viewPositions$sorted","viewPositions","sortedKeys","filter","v","sort","a","b","totalTop","values","i","length","height","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","undefined","debounceRefreshStickyPositions","forEach","key","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","animated","_collapsibleHandlers$","expand","_collapsibleHandlers$2","scrollTo","offset","animate","_collapsibleHandlers$3","scrollToIndex","params","_collapsibleHandlers$4","internalContext","createElement","Provider"],"sourceRoot":"../../src","sources":["withCollapsibleContext.tsx"],"mappings":"AAAA;AACA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAY,OAAO;AAE/D,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,0BAA0B,QAAQ,uCAAuC;AAClF,SACEC,mBAAmB,EACnBC,eAAe,EACfC,cAAc,EACdC,UAAU,QACL,yBAAyB;AAEhC,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,OAAOC,yBAAyB,MAAM,+CAA+C;AAErF,eAAe,SAASC,sBAAsBA,CAAIC,SAAgB,EAAE;EAClE,OAAQC,KAAQ,IAAK;IACnB,MAAMC,mBAAmB,GAAGZ,MAAM,CAAqB,CAAC;IACxD,MAAMa,YAAY,GAAGR,cAAc,CAAC,CAAC,CAAC;IACtC,MAAMS,OAAO,GAAGT,cAAc,CAAC,CAAC,CAAC;IACjC,MAAMU,cAAc,GAAGf,MAAM,CAE3B,CAAC,CAAC,CAAC;IACL,MAAMgB,cAAc,GAAGX,cAAc,CAAyB,CAAC,CAAC,CAAC;IACjE,MAAMY,sBAAsB,GAAGjB,MAAM,CAEnC,CAAC,CAAC,CAAC;IACL,MAAMkB,mBAAmB,GAAGb,cAAc,CACxC,CAAC,CACH,CAAC;IACD,MAAMc,iBAAiB,GAAGd,cAAc,CAAC,CAAC,CAAC;IAC3C,MAAMe,eAAe,GAAGf,cAAc,CAAC,CAAC,CAAC;IACzC,MAAMgB,gBAAgB,GAAGhB,cAAc,CAAC,OAAO,CAAC;IAChD,MAAMiB,YAAY,GAAGtB,MAAM,CAAO,IAAI,CAAC;IACvC,MAAMuB,aAAa,GAAGvB,MAAM,CAAO,IAAI,CAAC;IAExC,MAAMwB,sBAAsB,GAAG1B,WAAW,CAAE2B,QAAQ,IAAK;MACvDb,mBAAmB,CAACc,OAAO,GAAGD,QAAQ;IACxC,CAAC,EAAE,EAAE,CAAC;IAEN,MAAME,eAAe,GAAGvB,eAAe,CAAC,MAAM;MAC5C,MAAMwB,IAAI,GAAGT,iBAAiB,CAACU,KAAK,GAAGR,gBAAgB,CAACQ,KAAK;MAC7D,OAAOf,OAAO,CAACe,KAAK,IAAID,IAAI;IAC9B,CAAC,EAAE,EAAE,CAAC;IAEN,MAAME,gBAAgB,GAAG1B,eAAe,CAAC,MAAM;MAC7C,OAAOgB,eAAe,CAACS,KAAK,GAAGV,iBAAiB,CAACU,KAAK;IACxD,CAAC,EAAE,EAAE,CAAC;IAEN1B,mBAAmB,CACjB,MAAM;MACJ,MAAM4B,WAAW,GAAGC,MAAM,CAACC,IAAI,CAACf,mBAAmB,CAACW,KAAK,CAAC,CAACK,MAAM,CAC/D,CAACC,GAAG,EAAEC,IAAI,KAAK;QACb,MAAMP,KAAK,GAAGX,mBAAmB,CAACW,KAAK,CAACO,IAAI,CAAC;QAC7C,IAAIP,KAAK,EAAE;UACT,OAAOM,GAAG,GAAGN,KAAK,CAACQ,GAAG;QACxB;QACA,OAAOF,GAAG;MACZ,CAAC,EACD,CACF,CAAC;MACD,OAAOJ,WAAW,GAAGZ,iBAAiB,CAACU,KAAK;IAC9C,CAAC,EACD,CAACS,MAAM,EAAEC,QAAQ,KAAK;MACpB,IAAID,MAAM,KAAKC,QAAQ,EAAE;QAAA,IAAAC,qBAAA;QACvB,MAAMC,aAAa,GAAGvB,mBAAmB,CAACW,KAAK;QAC/C,MAAMa,UAAU,GAAGV,MAAM,CAACC,IAAI,CAACQ,aAAa,CAAC,CAC1CE,MAAM,CAAEC,CAAC,IAAK,CAAC,CAACH,aAAa,CAACG,CAAC,CAAC;QACjC;QAAA,CACCC,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKN,aAAa,CAACK,CAAC,CAAC,CAACT,GAAG,GAAGI,aAAa,CAACM,CAAC,CAAC,CAACV,GAAG,CAAC;QAC9D,IAAIW,QAAQ,GAAG,CAAC;QAChB,MAAMC,MAAW,GAAG,CAAC,CAAC;QACtB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGR,UAAU,CAACS,MAAM,EAAED,CAAC,EAAE,EAAE;UAC1C;UACAD,MAAM,CAACP,UAAU,CAACQ,CAAC,CAAC,CAAC,GAAGF,QAAQ;UAChC;UACA;UACA;UACAA,QAAQ,IAAIP,aAAa,CAACC,UAAU,CAACQ,CAAC,CAAC,CAAC,CAACE,MAAM,GAAG,CAAC;QACrD;QACApC,cAAc,CAACa,KAAK,GAAGoB,MAAM;QAC7B;QACA5B,gBAAgB,CAACQ,KAAK,GAAG,EAAAW,qBAAA,GAAAC,aAAa,CAACC,UAAU,CAAC,CAAC,CAAC,CAAC,cAAAF,qBAAA,uBAA5BA,qBAAA,CAA8BH,GAAG,KAAI,CAAC;MACjE;IACF,CACF,CAAC;IAED,MAAMgB,sBAAsB,GAAGvD,WAAW,CACxC,CAACwD,OAAe,EAAEC,OAA+B,KAAK;MACpD,IAAIA,OAAO,IAAIA,OAAO,CAAC7B,OAAO,IAAIJ,YAAY,CAACI,OAAO,EAAE;QACtDX,cAAc,CAACW,OAAO,CAAC4B,OAAO,CAAC,GAAGC,OAAO;QACzCA,OAAO,CAAC7B,OAAO,CAAC8B,aAAa;QAC3B;QACAlC,YAAY,CAACI,OAAO,EACpB,CAAC+B,IAAI,EAAEpB,GAAG,EAAEqB,KAAK,EAAEN,MAAM,KAAK;UAC5BnC,sBAAsB,CAACS,OAAO,GAAG;YAC/B,GAAGT,sBAAsB,CAACS,OAAO;YACjC,CAAC4B,OAAO,GAAG;cAAEG,IAAI;cAAEpB,GAAG;cAAEqB,KAAK;cAAEN;YAAO;UACxC,CAAC;UACD;UACAlC,mBAAmB,CAACW,KAAK,GAAGZ,sBAAsB,CAACS,OAAO;QAC5D,CAAC,EACD,MAAM,CAAC,CACT,CAAC;MACH,CAAC,MAAM;QACLX,cAAc,CAACW,OAAO,GAAG;UACvB,GAAGX,cAAc,CAACW,OAAO;UACzB,CAAC4B,OAAO,GAAGK;QACb,CAAC;QACD1C,sBAAsB,CAACS,OAAO,GAAG;UAC/B,GAAGT,sBAAsB,CAACS,OAAO;UACjC,CAAC4B,OAAO,GAAGK;QACb,CAAC;QACD;QACAzC,mBAAmB,CAACW,KAAK,GAAGZ,sBAAsB,CAACS,OAAO;MAC5D;IACF,CAAC,EACD,EACF,CAAC;IAED,MAAMkC,8BAA8B,GAAG7D,OAAO,CAAC,MAAM;MACnD,OAAOQ,QAAQ,CAAC,MAAM;QACpByB,MAAM,CAACC,IAAI,CAAClB,cAAc,CAACW,OAAO,CAAC,CAACmC,OAAO,CAAEC,GAAG,IAAK;UACnD,MAAMP,OAAO,GAAGxC,cAAc,CAACW,OAAO,CAACoC,GAAG,CAAC;UAC3C,IAAIP,OAAO,EAAE;YACXF,sBAAsB,CAACS,GAAG,EAAEP,OAAO,CAAC;UACtC;QACF,CAAC,CAAC;MACJ,CAAC,EAAE,GAAG,CAAC;IACT,CAAC,EAAE,EAAE,CAAC;IAEN,MAAMQ,2BAA2B,GAAGjE,WAAW,CAAEsD,MAAc,IAAK;MAClEvC,YAAY,CAACgB,KAAK,GAAGvB,UAAU,CAAC8C,MAAM,EAAE;QACtCY,QAAQ,EAAE7C,iBAAiB,CAACU,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG;MAChD,CAAC,CAAC;MACFV,iBAAiB,CAACU,KAAK,GAAGuB,MAAM;MAChC;MACAQ,8BAA8B,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC;IAEN,MAAMK,qBAAqB,GAAGnE,WAAW,CAAEsD,MAAc,IAAK;MAC5DhC,eAAe,CAACS,KAAK,GAAGuB,MAAM;IAChC,CAAC,EAAE,EAAE,CAAC;IAEN,MAAMc,OAAO,GAAGnE,OAAO,CAAC,MAAM;MAC5B,OAAO;QACLoE,QAAQ,EAAGC,QAAkB;UAAA,IAAAC,qBAAA;UAAA,QAAAA,qBAAA,GAC3BzD,mBAAmB,CAACc,OAAO,cAAA2C,qBAAA,uBAA3BA,qBAAA,CAA6BF,QAAQ,CAACC,QAAQ,CAAC;QAAA;QACjDE,MAAM,EAAEA,CAAA;UAAA,IAAAC,sBAAA;UAAA,QAAAA,sBAAA,GAAM3D,mBAAmB,CAACc,OAAO,cAAA6C,sBAAA,uBAA3BA,sBAAA,CAA6BD,MAAM,CAAC,CAAC;QAAA;QACnDE,QAAQ,EAAEA,CAACC,MAAc,EAAEC,OAAiB;UAAA,IAAAC,sBAAA;UAAA,QAAAA,sBAAA,GAC1C/D,mBAAmB,CAACc,OAAO,cAAAiD,sBAAA,uBAA3BA,sBAAA,CAA6BH,QAAQ,CAACC,MAAM,EAAEC,OAAO,CAAC;QAAA;QACxDE,aAAa,EAAGC,MAAW;UAAA,IAAAC,sBAAA;UAAA,QAAAA,sBAAA,GACzBlE,mBAAmB,CAACc,OAAO,cAAAoD,sBAAA,uBAA3BA,sBAAA,CAA6BF,aAAa,CAACC,MAAM,CAAC;QAAA;QACpDhE,YAAY;QACZC,OAAO;QACPa;MACF,CAAC;IACH,CAAC,EAAE,CAACb,OAAO,EAAED,YAAY,EAAEc,eAAe,CAAC,CAAC;IAE5C,MAAMoD,eAAe,GAAGhF,OAAO,CAC7B,OAAO;MACLwB,aAAa;MACbD,YAAY;MACZ+B,sBAAsB;MACtBU,2BAA2B;MAC3BvC,sBAAsB;MACtByC,qBAAqB;MACrB5C,gBAAgB;MAChBL,cAAc;MACdE,mBAAmB;MACnBC,iBAAiB;MACjBW;IACF,CAAC,CAAC,EACF,CACEN,sBAAsB,EACtB6B,sBAAsB,EACtBU,2BAA2B,EAC3BE,qBAAqB,EACrB5C,gBAAgB,EAChBL,cAAc,EACdE,mBAAmB,EACnBC,iBAAiB,EACjBW,gBAAgB,CAEpB,CAAC;IAED,oBACEjC,KAAA,CAAAmF,aAAA,CAAC/E,kBAAkB,CAACgF,QAAQ;MAACpD,KAAK,EAAEqC;IAAQ,gBAC1CrE,KAAA,CAAAmF,aAAA,CAAC9E,0BAA0B,CAAC+E,QAAQ;MAACpD,KAAK,EAAEkD;IAAgB,gBAC1DlF,KAAA,CAAAmF,aAAA,CAACxE,yBAAyB,qBAExBX,KAAA,CAAAmF,aAAA,CAACtE,SAAS,EAAKC,KAAQ,CACE,CACQ,CACV,CAAC;EAElC,CAAC;AACH"}
+{"version":3,"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useDerivedValue","useSharedValue","withTiming","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","fixedHeaderHeight","containerHeight","containerRef","scrollViewRef","headerContainerLayouts","headerViewPositions","setCollapsibleHandlers","handlers","current","headerCollapsed","maxY","value","contentMinHeight","handleHeaderContainerLayout","key","layout","stickyHeight","undefined","headerContainers","Object","keys","filter","k","totalHeight","reduce","acc","_headerContainerLayou","height","duration","sortedHeaders","sort","a","b","_headerContainerLayou2","_headerContainerLayou3","y","values","aStickyHeight","index","length","_headerContainerLayou4","headerKey","sHeight","top","handleContainerHeight","context","collapse","animated","_collapsibleHandlers$","expand","_collapsibleHandlers$2","scrollTo","offset","animate","_collapsibleHandlers$3","scrollToIndex","params","_collapsibleHandlers$4","internalContext","createElement","Provider"],"sourceRoot":"../../src","sources":["withCollapsibleContext.tsx"],"mappings":"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"}

package/lib/typescript/components/CollapsibleContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleContainer.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsibleContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,yBAAyB,EAIzB,SAAS,EACV,MAAM,cAAc,CAAC;AAMtB,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACjD,QAAQ,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;IACtD,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,yBAAyB,EACzB,aAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,qBAwDP"}
+{"version":3,"file":"CollapsibleContainer.d.ts","sourceRoot":"","sources":["../../../src/components/CollapsibleContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,yBAAyB,EAIzB,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACjD,QAAQ,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;IACtD,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,yBAAyB,EACzB,aAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,qBAuDP"}

package/lib/typescript/components/header/CollapsibleHeaderContainer.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 type Props = {
     children: ReactNode;
     containerStyle?: StyleProp<ViewStyle>;
 };
-export default function CollapsibleHeaderContainer({ children, containerStyle, }: Props): null;
+export default function CollapsibleHeaderContainer({ children, containerStyle, }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=CollapsibleHeaderContainer.d.ts.map

package/lib/typescript/components/header/CollapsibleHeaderContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleHeaderContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/header/CollapsibleHeaderContainer.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,SAAS,EAAsB,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,EACjD,QAAQ,EACR,cAAc,GACf,EAAE,KAAK,QAmCP"}
+{"version":3,"file":"CollapsibleHeaderContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/header/CollapsibleHeaderContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAC1E,OAAO,EACL,SAAS,EACT,SAAS,EAIV,MAAM,cAAc,CAAC;AAkBtB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,EACjD,QAAQ,EACR,cAAc,GACf,EAAE,KAAK,qBAgIP"}

package/lib/typescript/components/header/StickyView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StickyView.d.ts","sourceRoot":"","sources":["../../../../src/components/header/StickyView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAUtE,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,qBAiD5D"}
+{"version":3,"file":"StickyView.d.ts","sourceRoot":"","sources":["../../../../src/components/header/StickyView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAGL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAUtB,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,qBAyD5D"}

package/lib/typescript/components/scrollable/useAnimatedScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/scrollable/useAnimatedScroll.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAMvD,KAAK,KAAK,GAAG;IACX,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,aAAa,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,eAAe,EACf,QAAQ,EACR,aAAa,GACd,EAAE,KAAK;;;;EAoEP"}
+{"version":3,"file":"useAnimatedScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/scrollable/useAnimatedScroll.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAMvD,KAAK,KAAK,GAAG;IACX,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,aAAa,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,eAAe,EACf,QAAQ,EACR,aAAa,GACd,EAAE,KAAK;;;;EA8DP"}

package/lib/typescript/hooks/useCollapsibleHeaderContext.d.ts

@@ -1,15 +1,10 @@
-import { ReactNode } from 'react';
-export type HeaderItem = {
-    key: string;
-    children: ReactNode;
-};
-type CollapsibleContextHeaderType = {
-    headers: HeaderItem[];
-    mount: (key: string, header: ReactNode) => void;
-    update: (key: string, header: ReactNode) => void;
-    unmount: (key: string) => void;
+/// <reference types="react" />
+import { LayoutRectangle } from 'react-native';
+import Animated from 'react-native-reanimated';
+export type CollapsibleContextHeaderType = {
+    handleStickyViewLayout: (key: string, layout?: LayoutRectangle) => void;
+    animatedY: Animated.SharedValue<number>;
 };
 export declare const CollapsibleHeaderContext: import("react").Context<CollapsibleContextHeaderType>;
 export default function useCollapsibleHeaderContext(): CollapsibleContextHeaderType;
-export {};
 //# sourceMappingURL=useCollapsibleHeaderContext.d.ts.map

package/lib/typescript/hooks/useCollapsibleHeaderContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCollapsibleHeaderContext.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCollapsibleHeaderContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC;AAE9D,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IAChD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACjD,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,wBAAwB,uDAEY,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,2BAA2B,iCAMlD"}
+{"version":3,"file":"useCollapsibleHeaderContext.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCollapsibleHeaderContext.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAE/C,MAAM,MAAM,4BAA4B,GAAG;IACzC,sBAAsB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACxE,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,wBAAwB,uDAEY,CAAC;AAElD,MAAM,CAAC,OAAO,UAAU,2BAA2B,iCAMlD"}

package/lib/typescript/types.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { View } from 'react-native';
+import type { LayoutRectangle, View } from 'react-native';
 import type Animated from 'react-native-reanimated';
 export type ScrollToIndexParams = {
     animated?: boolean | null;
@@ -28,13 +28,13 @@ export type CollapsibleContextInternalType = {
     scrollViewRef: React.RefObject<any>;
     containerRef: React.RefObject<View>;
     contentMinHeight: Animated.SharedValue<number>;
-    firstStickyViewY: Animated.SharedValue<number>;
-    stickyViewPositions: Animated.SharedValue<Record<string, LayoutParams>>;
-    stickyViewTops: Animated.SharedValue<Record<string, number>>;
+    headerViewPositions: Animated.SharedValue<Record<string, {
+        top: number;
+        stickyHeight: number;
+    }>>;
     fixedHeaderHeight: Animated.SharedValue<number>;
     handleContainerHeight: (height: number) => void;
-    handleStickyViewLayout: (viewKey: string, viewRef?: React.RefObject<View>) => void;
-    handleHeaderContainerLayout: (height: number) => void;
+    handleHeaderContainerLayout: (key: string, layout?: LayoutRectangle, stickyHeight?: number) => void;
     setCollapsibleHandlers: (handlers: CollapsibleHandles) => void;
 };
 export type CollapsibleProps = {

package/lib/typescript/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;IACxD,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACpC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACpC,gBAAgB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/C,gBAAgB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/C,mBAAmB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IACxE,cAAc,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7D,iBAAiB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAChD,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CACtB,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAC5B,IAAI,CAAC;IACV,2BAA2B,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,kBAAkB,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAClD,cAAc,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;IACxD,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACpC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACpC,gBAAgB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/C,mBAAmB,EAAE,QAAQ,CAAC,WAAW,CACvC,MAAM,CAAC,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC,CACtD,CAAC;IACF,iBAAiB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAChD,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,2BAA2B,EAAE,CAC3B,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,eAAe,EACxB,YAAY,CAAC,EAAE,MAAM,KAClB,IAAI,CAAC;IACV,sBAAsB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,kBAAkB,EAAE,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAClD,cAAc,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9C,CAAC"}

package/lib/typescript/utils/useSharedValueRef.d.ts

@@ -0,0 +1,3 @@
+import Animated from 'react-native-reanimated';
+export default function useSharedValueRef<T>(defaultValue: T): [Animated.SharedValue<T>, (value: T) => void];
+//# sourceMappingURL=useSharedValueRef.d.ts.map

package/lib/typescript/utils/useSharedValueRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSharedValueRef.d.ts","sourceRoot":"","sources":["../../../src/utils/useSharedValueRef.ts"],"names":[],"mappings":"AACA,OAAO,QAA4B,MAAM,yBAAyB,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,EACzC,YAAY,EAAE,CAAC,GACd,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAgB/C"}

package/lib/typescript/withCollapsibleContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withCollapsibleContext.d.ts","sourceRoot":"","sources":["../../src/withCollapsibleContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgC,EAAE,EAAE,MAAM,OAAO,CAAC;AAchE,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WACjD,CAAC,uBAqLjB"}
+{"version":3,"file":"withCollapsibleContext.d.ts","sourceRoot":"","sources":["../../src/withCollapsibleContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAgC,EAAE,EAAE,MAAM,OAAO,CAAC;AAWhE,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WACjD,CAAC,uBAwHjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r0b0t3d/react-native-collapsible",
-  "version": "1.3.5-beta.2",
+  "version": "1.3.5-beta.3",
   "description": "Fully customizable collapsible views",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/CollapsibleContainer.tsx

@@ -11,7 +11,6 @@ import {
 import useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';
 import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
 import useCollapsibleContext from '../hooks/useCollapsibleContext';
-import CollapsibleHeaderConsumer from './header/CollapsibleHeaderConsumer';
 
 type Props = Omit<ViewProps, 'ref' | 'onLayout'> & {
   children: Element;
@@ -76,7 +75,6 @@ export default function CollapsibleContainer({
         collapsable={false}
       >
         {children}
-        <CollapsibleHeaderConsumer />
       </View>
     </KeyboardAvoidingView>
   );

package/src/components/CollapsibleView.tsx

@@ -208,6 +208,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   headerTitle: {
-    flex: 1,
+    // flex: 1,
   },
 });

package/src/components/header/CollapsibleHeaderContainer.tsx

@@ -1,7 +1,27 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { ReactNode, useEffect, useMemo } from 'react';
-import { View, StyleProp, ViewStyle } from 'react-native';
-import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
+import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
+import {
+  StyleProp,
+  ViewStyle,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  StyleSheet,
+} from 'react-native';
+import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
+import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import Animated, {
+  Extrapolate,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+import {
+  CollapsibleContextHeaderType,
+  CollapsibleHeaderContext,
+} from '../../hooks/useCollapsibleHeaderContext';
+import useSharedValueRef from '../../utils/useSharedValueRef';
 
 type Props = {
   children: ReactNode;
@@ -15,7 +35,65 @@ export default function CollapsibleHeaderContainer({
   containerStyle,
 }: Props) {
   const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
-  const { mount, unmount, update } = useCollapsibleHeaderContext();
+  const { handleHeaderContainerLayout, headerViewPositions } =
+    useInternalCollapsibleContext();
+  const { scrollY } = useCollapsibleContext();
+  const currentLayout = useSharedValue<LayoutRectangle | undefined>(undefined);
+  const [stickyLayouts, setStickyLayouts] = useSharedValueRef<
+    Record<string, LayoutRectangle | undefined>
+  >({});
+
+  useEffect(() => {
+    return () => {
+      handleHeaderContainerLayout(contentKey);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentKey]);
+
+  const stickyHeight = useDerivedValue(
+    () =>
+      Object.values(stickyLayouts.value).reduce(
+        (acc, value) => acc + (value?.height ?? 0),
+        0
+      ),
+    []
+  );
+
+  useAnimatedReaction(
+    () => {
+      if (!currentLayout.value) {
+        return -1;
+      }
+      return currentLayout.value.height - stickyHeight.value;
+    },
+    (result, previous) => {
+      if (result !== -1 && result !== previous) {
+        runOnJS(handleHeaderContainerLayout)(
+          contentKey,
+          currentLayout.value,
+          stickyHeight.value
+        );
+      }
+    }
+  );
+
+  const handleLayout = useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      currentLayout.value = layout;
+    },
+    [currentLayout]
+  );
+
+  const handleStickyViewLayout = useCallback(
+    (stickyKey: string, layout?: LayoutRectangle) => {
+      console.log('handleStickyViewLayout', stickyKey, layout);
+
+      setStickyLayouts({
+        [stickyKey]: layout,
+      });
+    },
+    [setStickyLayouts]
+  );
 
   const internalStyle = useMemo(() => {
     return {
@@ -23,29 +101,71 @@ export default function CollapsibleHeaderContainer({
     };
   }, []);
 
-  const content = useMemo(() => {
-    return (
-      <View
-        key={contentKey}
-        style={[containerStyle, internalStyle]}
-        pointerEvents="box-none"
-      >
-        {children}
-      </View>
-    );
-  }, [children, containerStyle]);
+  const translateY = useDerivedValue(() => {
+    const position = headerViewPositions.value[contentKey];
+    if (!currentLayout.value || !position) {
+      return scrollY.value;
+    }
+    const topPosition =
+      currentLayout.value.height +
+      currentLayout.value.y -
+      position.top -
+      position.stickyHeight;
 
-  useEffect(() => {
-    mount(contentKey, content);
+    return interpolate(
+      scrollY.value,
+      [0, topPosition, 10000],
+      [0, -topPosition, -topPosition],
+      Extrapolate.CLAMP
+    );
+  });
 
-    return () => {
-      unmount(contentKey);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: translateY.value,
+        },
+      ],
     };
-  }, [contentKey]);
+  });
 
-  useEffect(() => {
-    update(contentKey, content);
-  }, [content]);
+  const animatedY = useDerivedValue(() => {
+    const position = headerViewPositions.value[contentKey];
+    if (!currentLayout.value || !position) {
+      return 0;
+    }
+    const value = scrollY.value - currentLayout.value.y + position.top;
+    const maxV = currentLayout.value.height - stickyHeight.value;
 
-  return null;
+    return Math.max(0, Math.min(value, maxV));
+  });
+
+  const value: CollapsibleContextHeaderType = useMemo(
+    () => ({
+      handleStickyViewLayout,
+      animatedY,
+    }),
+    [handleStickyViewLayout, animatedY]
+  );
+
+  return (
+    <CollapsibleHeaderContext.Provider value={value}>
+      <Animated.View
+        key={contentKey}
+        style={[styles.container, containerStyle, internalStyle, animatedStyle]}
+        pointerEvents="box-none"
+        onLayout={handleLayout}
+      >
+        {children}
+      </Animated.View>
+    </CollapsibleHeaderContext.Provider>
+  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    backgroundColor: 'white',
+  },
+});