@r0b0t3d/react-native-collapsible 1.0.1 → 1.2.0-alpha.0

package/lib/commonjs/components/{CollapsibleFlatList.js → scrollable/CollapsibleFlatList.js}

@@ -11,13 +11,15 @@ var _reactNative = require("react-native");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _AnimatedTopView = _interopRequireDefault(require("./AnimatedTopView"));
+var _AnimatedTopView = _interopRequireDefault(require("../header/AnimatedTopView"));
 
-var _useAnimatedScroll = _interopRequireDefault(require("../hooks/useAnimatedScroll"));
+var _useAnimatedScroll = _interopRequireDefault(require("./useAnimatedScroll"));
 
-var _useCollapsibleContext = _interopRequireDefault(require("../hooks/useCollapsibleContext"));
+var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
 
-var _useInternalCollapsibleContext = require("../hooks/useInternalCollapsibleContext");
+var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
+
+var _PullToRefreshContainer = _interopRequireDefault(require("../pullToRefresh/PullToRefreshContainer"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,13 +35,14 @@ function CollapsibleFlatList({
   headerSnappable = true,
   ...props
 }) {
-  const scrollView = (0, _react.useRef)(null);
   const {
-    headerHeight
+    headerHeight,
+    scrollY
   } = (0, _useCollapsibleContext.default)();
   const {
     contentMinHeight
-  } = (0, _useInternalCollapsibleContext.useInternalCollapsibleContext)();
+  } = (0, _useInternalCollapsibleContext.default)();
+  const scrollRef = (0, _react.useRef)(null);
   const mounted = (0, _react.useRef)(true);
   const contentHeight = (0, _react.useRef)(0);
   (0, _react.useEffect)(() => {
@@ -48,13 +51,13 @@ function CollapsibleFlatList({
     };
   }, []);
   const scrollTo = (0, _react.useCallback)((yValue, animated = true) => {
-    var _scrollView$current;
+    var _scrollRef$current;
 
-    (_scrollView$current = scrollView.current) === null || _scrollView$current === void 0 ? void 0 : _scrollView$current.scrollToOffset({
+    (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollToOffset({
       offset: yValue,
       animated
     });
-  }, []);
+  }, [scrollRef]);
   const handleInternalContentHeight = (0, _react.useCallback)(value => {
     if (mounted.current) {
       setInternalContentMinHeight(value);
@@ -67,11 +70,15 @@ function CollapsibleFlatList({
     scrollTo
   });
   const [internalContentMinHeight, setInternalContentMinHeight] = (0, _react.useState)(contentMinHeight.value);
-  (0, _reactNativeReanimated.useDerivedValue)(() => {
-    if (contentHeight.current < contentMinHeight.value && contentMinHeight.value !== internalContentMinHeight) {
-      (0, _reactNativeReanimated.runOnJS)(handleInternalContentHeight)(contentMinHeight.value);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => {
+    return contentMinHeight.value;
+  }, (result, previous) => {
+    if (result !== previous) {
+      if (contentHeight.current < contentMinHeight.value && internalContentMinHeight !== contentMinHeight.value) {
+        (0, _reactNativeReanimated.runOnJS)(handleInternalContentHeight)(contentMinHeight.value);
+      }
     }
-  }, [internalContentMinHeight, contentHeight.current]);
+  });
   const contentContainerStyle = (0, _react.useMemo)(() => [styles.contentContainer, {
     minHeight: internalContentMinHeight
   }, props.contentContainerStyle], [props.contentContainerStyle, internalContentMinHeight]);
@@ -83,23 +90,21 @@ function CollapsibleFlatList({
     height: headerHeight
   }), props.ListHeaderComponent);
 
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    _react.default.createElement(AnimatedFlatList, _extends({
-      ref: scrollView,
-      bounces: false,
-      keyboardDismissMode: "on-drag",
-      keyboardShouldPersistTaps: "handled",
-      scrollEventThrottle: 16
-    }, props, {
-      style: [styles.container, props.style],
-      contentContainerStyle: contentContainerStyle,
-      onScroll: scrollHandler,
-      ListHeaderComponent: renderListHeader(),
-      onContentSizeChange: handleContentSizeChange
-    }))
-  );
+  return /*#__PURE__*/_react.default.createElement(_PullToRefreshContainer.default, {
+    scrollY: scrollY
+  }, /*#__PURE__*/_react.default.createElement(AnimatedFlatList, _extends({
+    ref: scrollRef,
+    bounces: false,
+    keyboardDismissMode: "on-drag",
+    keyboardShouldPersistTaps: "handled",
+    scrollEventThrottle: 1
+  }, props, {
+    style: [styles.container, props.style],
+    contentContainerStyle: contentContainerStyle,
+    onScroll: scrollHandler,
+    ListHeaderComponent: renderListHeader(),
+    onContentSizeChange: handleContentSizeChange
+  })));
 }
 
 const styles = _reactNative.StyleSheet.create({

package/lib/commonjs/components/scrollable/CollapsibleFlatList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["AnimatedFlatList","Animated","createAnimatedComponent","FlatList","CollapsibleFlatList","headerSnappable","props","headerHeight","scrollY","contentMinHeight","scrollRef","mounted","contentHeight","current","scrollTo","yValue","animated","scrollToOffset","offset","handleInternalContentHeight","value","setInternalContentMinHeight","scrollHandler","internalContentMinHeight","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","renderListHeader","ListHeaderComponent","container","style","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":"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","sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { FlatListProps, View, StyleSheet, FlatList } from 'react-native';\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n} from 'react-native-reanimated';\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport type { CollapsibleProps } from '../../types';\nimport PullToRefreshContainer from '../pullToRefresh/PullToRefreshContainer';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent(FlatList);\n\ntype Props<Data> = Omit<FlatListProps<Data>, 'scrollEnabled'> &\n  CollapsibleProps;\n\nexport default function CollapsibleFlatList<Data>({\n  headerSnappable = true,\n  ...props\n}: Props<Data>) {\n  const { headerHeight, scrollY } = useCollapsibleContext();\n  const { contentMinHeight } = useInternalCollapsibleContext();\n  const scrollRef = useRef<any>(null);\n  const mounted = useRef(true);\n  const contentHeight = useRef(0);\n\n  useEffect(() => {\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const scrollTo = useCallback(\n    (yValue: number, animated = true) => {\n      scrollRef.current?.scrollToOffset({\n        offset: yValue,\n        animated,\n      });\n    },\n    [scrollRef]\n  );\n\n  const handleInternalContentHeight = useCallback((value: number) => {\n    if (mounted.current) {\n      setInternalContentMinHeight(value);\n    }\n  }, []);\n\n  const { scrollHandler } = useAnimatedScroll({\n    headerSnappable,\n    scrollTo,\n  });\n\n  const [internalContentMinHeight, setInternalContentMinHeight] = useState(\n    contentMinHeight.value\n  );\n\n  useAnimatedReaction(\n    () => {\n      return contentMinHeight.value;\n    },\n    (result, previous) => {\n      if (result !== previous) {\n        if (\n          contentHeight.current < contentMinHeight.value &&\n          internalContentMinHeight !== contentMinHeight.value\n        ) {\n          runOnJS(handleInternalContentHeight)(contentMinHeight.value);\n        }\n      }\n    }\n  );\n\n  const contentContainerStyle = useMemo(\n    () => [\n      styles.contentContainer,\n      { minHeight: internalContentMinHeight },\n      props.contentContainerStyle,\n    ],\n    [props.contentContainerStyle, internalContentMinHeight]\n  );\n\n  const handleContentSizeChange = useCallback((_, height) => {\n    contentHeight.current = height;\n  }, []);\n\n  const renderListHeader = () => (\n    <View>\n      <AnimatedTopView height={headerHeight} />\n      {props.ListHeaderComponent}\n    </View>\n  );\n\n  return (\n    <PullToRefreshContainer scrollY={scrollY}>\n      {/* @ts-ignore */}\n      <AnimatedFlatList\n        ref={scrollRef}\n        bounces={false}\n        keyboardDismissMode=\"on-drag\"\n        keyboardShouldPersistTaps=\"handled\"\n        scrollEventThrottle={1}\n        {...props}\n        style={[styles.container, props.style]}\n        contentContainerStyle={contentContainerStyle}\n        onScroll={scrollHandler}\n        ListHeaderComponent={renderListHeader()}\n        onContentSizeChange={handleContentSizeChange}\n      />\n    </PullToRefreshContainer>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    ...StyleSheet.absoluteFillObject,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  topView: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  },\n});\n"]}

package/lib/commonjs/components/{CollapsibleScrollView.js → scrollable/CollapsibleScrollView.js}

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CollapsibleScrollView;
 
-var _AnimatedTopView = _interopRequireDefault(require("./AnimatedTopView"));
+var _AnimatedTopView = _interopRequireDefault(require("../header/AnimatedTopView"));
 
-var _useAnimatedScroll = _interopRequireDefault(require("../hooks/useAnimatedScroll"));
+var _useAnimatedScroll = _interopRequireDefault(require("./useAnimatedScroll"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -15,9 +15,9 @@ var _reactNative = require("react-native");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _useCollapsibleContext = _interopRequireDefault(require("../hooks/useCollapsibleContext"));
+var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
 
-var _useInternalCollapsibleContext = require("../hooks/useInternalCollapsibleContext");
+var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -35,7 +35,7 @@ function CollapsibleScrollView({
   const scrollView = (0, _react.useRef)(null);
   const {
     contentMinHeight
-  } = (0, _useInternalCollapsibleContext.useInternalCollapsibleContext)();
+  } = (0, _useInternalCollapsibleContext.default)();
   const {
     headerHeight
   } = (0, _useCollapsibleContext.default)();
@@ -69,7 +69,7 @@ function CollapsibleScrollView({
     onScroll: scrollHandler,
     keyboardDismissMode: "on-drag",
     keyboardShouldPersistTaps: "handled",
-    scrollEventThrottle: 16
+    scrollEventThrottle: 1
   }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: animatedStyle
   }, /*#__PURE__*/_react.default.createElement(_AnimatedTopView.default, {

package/lib/commonjs/components/scrollable/CollapsibleScrollView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["CollapsibleScrollView","headerSnappable","children","props","scrollView","contentMinHeight","headerHeight","scrollTo","yValue","animated","current","y","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAOe,SAASA,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAMC,UAAU,GAAG,mBAA4B,IAA5B,CAAnB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAuB,6CAA7B;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAmB,qCAAzB;AAEA,QAAMC,QAAQ,GAAG,wBAAY,CAACC,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE;AACA,2BAAAL,UAAU,CAACM,OAAX,4EAAoBH,QAApB,CAA6B;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAA7B;AACD,GAHgB,EAGd,EAHc,CAAjB;AAKA,QAAM;AAAEG,IAAAA;AAAF,MAAoB,gCAAkB;AAC1CX,IAAAA,eAD0C;AAE1CM,IAAAA;AAF0C,GAAlB,CAA1B;AAKA,QAAMM,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,SAAS,EAAET,gBAAgB,CAACU;AADvB,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,QAAMC,qBAAqB,GAAG,oBAC5B,MAAM,CAACC,MAAM,CAACC,gBAAR,EAA0Bf,KAAK,CAACa,qBAAhC,CADsB,EAE5B,CAACb,KAAK,CAACa,qBAAP,CAF4B,CAA9B;AAKA,sBACE,6BAAC,8BAAD,CAAU,UAAV;AACE,IAAA,GAAG,EAAEZ,UADP;AAEE,IAAA,OAAO,EAAE;AAFX,KAGMD,KAHN;AAIE,IAAA,KAAK,EAAE,CAACc,MAAM,CAACE,SAAR,EAAmBhB,KAAK,CAACiB,KAAzB,CAJT;AAKE,IAAA,qBAAqB,EAAEJ,qBALzB;AAME,IAAA,QAAQ,EAAEJ,aANZ;AAOE,IAAA,mBAAmB,EAAC,SAPtB;AAQE,IAAA,yBAAyB,EAAC,SAR5B;AASE,IAAA,mBAAmB,EAAE;AATvB,mBAWE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEC;AAAtB,kBACE,6BAAC,wBAAD;AAAiB,IAAA,MAAM,EAAEP;AAAzB,IADF,EAEGJ,QAFH,CAXF,CADF;AAkBD;;AAED,MAAMe,MAAM,GAAGI,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE,EACT,GAAGE,wBAAWE;AADL,GADoB;AAI/BL,EAAAA,gBAAgB,EAAE;AAChBM,IAAAA,QAAQ,EAAE;AADM,GAJa;AAO/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,QAAQ,EAAE,UADH;AAEPC,IAAAA,GAAG,EAAE,CAFE;AAGPC,IAAAA,IAAI,EAAE,CAHC;AAIPC,IAAAA,KAAK,EAAE;AAJA;AAPsB,CAAlB,CAAf","sourcesContent":["import AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, { ReactNode, useCallback, useMemo, useRef } from 'react';\nimport { ScrollViewProps, StyleSheet } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { CollapsibleProps } from '../../types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\ntype Props = ScrollViewProps &\n  CollapsibleProps & {\n    children?: ReactNode;\n  };\n\nexport default function CollapsibleScrollView({\n  headerSnappable = true,\n  children,\n  ...props\n}: Props) {\n  const scrollView = useRef<Animated.ScrollView>(null);\n  const { contentMinHeight } = useInternalCollapsibleContext();\n  const { headerHeight } = useCollapsibleContext();\n\n  const scrollTo = useCallback((yValue: number, animated = true) => {\n    // @ts-ignore\n    scrollView.current?.scrollTo({ y: yValue, animated });\n  }, []);\n\n  const { scrollHandler } = useAnimatedScroll({\n    headerSnappable,\n    scrollTo,\n  });\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      minHeight: contentMinHeight.value,\n    };\n  }, []);\n\n  const contentContainerStyle = useMemo(\n    () => [styles.contentContainer, props.contentContainerStyle],\n    [props.contentContainerStyle]\n  );\n\n  return (\n    <Animated.ScrollView\n      ref={scrollView}\n      bounces={false}\n      {...props}\n      style={[styles.container, props.style]}\n      contentContainerStyle={contentContainerStyle}\n      onScroll={scrollHandler}\n      keyboardDismissMode=\"on-drag\"\n      keyboardShouldPersistTaps=\"handled\"\n      scrollEventThrottle={1}\n    >\n      <Animated.View style={animatedStyle}>\n        <AnimatedTopView height={headerHeight} />\n        {children}\n      </Animated.View>\n    </Animated.ScrollView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    ...StyleSheet.absoluteFillObject,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  topView: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  },\n});\n"]}

package/lib/commonjs/{hooks → components/scrollable}/useAnimatedScroll.js

@@ -11,9 +11,9 @@ var _reactNative = require("react-native");
 
 var _reactNativeReanimated = require("react-native-reanimated");
 
-var _useCollapsibleContext = _interopRequireDefault(require("./useCollapsibleContext"));
+var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
 
-var _useInternalCollapsibleContext = require("./useInternalCollapsibleContext");
+var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -34,15 +34,15 @@ function useAnimatedScroll({
     setCollapsibleHandlers,
     firstStickyViewY,
     fixedHeaderHeight
-  } = (0, _useInternalCollapsibleContext.useInternalCollapsibleContext)();
+  } = (0, _useInternalCollapsibleContext.default)();
   (0, _react.useEffect)(() => {
     if (scrollY.value > 0) {
       requestAnimationFrame(() => scrollTo(scrollY.value, false));
     }
   }, []);
   const collapse = (0, _react.useCallback)(() => {
-    scrollTo(Math.min(fixedHeaderHeight.current || 0, firstStickyViewY.current || 0));
-  }, [scrollTo, fixedHeaderHeight.current, firstStickyViewY.current]);
+    scrollTo(Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0));
+  }, [scrollTo]);
   const expand = (0, _react.useCallback)(() => scrollTo(0), [scrollTo]);
   (0, _react.useEffect)(() => {
     setCollapsibleHandlers({
@@ -60,7 +60,7 @@ function useAnimatedScroll({
     },
     onEndDrag: () => {
       if (!headerSnappable) return;
-      const maxY = firstStickyViewY.current && firstStickyViewY.current > 0 ? firstStickyViewY.current : fixedHeaderHeight.current || 0;
+      const maxY = firstStickyViewY.value && firstStickyViewY.value > 0 ? firstStickyViewY.value : fixedHeaderHeight.value || 0;
 
       if (scrollY.value < maxY) {
         const delta = Math.abs(scrollY.value - maxY);
@@ -76,7 +76,7 @@ function useAnimatedScroll({
         }
       }
     }
-  }, [firstStickyViewY.current, fixedHeaderHeight.current]);
+  }, [scrollTo]);
   return {
     scrollHandler,
     collapse,

package/lib/commonjs/components/scrollable/useAnimatedScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAnimatedScroll.ts"],"names":["height","wHeight","Dimensions","get","useAnimatedScroll","headerSnappable","scrollTo","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAKA;;AACA;;;;AATA;AAWA,MAAM;AAAEA,EAAAA,MAAM,EAAEC;AAAV,IAAsBC,wBAAWC,GAAX,CAAe,QAAf,CAA5B;;AAOe,SAASC,iBAAT,CAA2B;AACxCC,EAAAA,eADwC;AAExCC,EAAAA;AAFwC,CAA3B,EAGL;AACR,QAAMC,eAAe,GAAG,2CAAe,SAAf,CAAxB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAc,qCAApB;AACA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,gBAA1B;AAA4CC,IAAAA;AAA5C,MACJ,6CADF;AAGA,wBAAU,MAAM;AACd,QAAIH,OAAO,CAACI,KAAR,GAAgB,CAApB,EAAuB;AACrBC,MAAAA,qBAAqB,CAAC,MAAMP,QAAQ,CAACE,OAAO,CAACI,KAAT,EAAgB,KAAhB,CAAf,CAArB;AACD;AACF,GAJD,EAIG,EAJH;AAMA,QAAME,QAAQ,GAAG,wBAAY,MAAM;AACjCR,IAAAA,QAAQ,CACNS,IAAI,CAACC,GAAL,CAASL,iBAAiB,CAACC,KAAlB,IAA2B,CAApC,EAAuCF,gBAAgB,CAACE,KAAjB,IAA0B,CAAjE,CADM,CAAR;AAGD,GAJgB,EAId,CAACN,QAAD,CAJc,CAAjB;AAMA,QAAMW,MAAM,GAAG,wBAAY,MAAMX,QAAQ,CAAC,CAAD,CAA1B,EAA+B,CAACA,QAAD,CAA/B,CAAf;AAEA,wBAAU,MAAM;AACdG,IAAAA,sBAAsB,CAAC;AACrBK,MAAAA,QADqB;AAErBG,MAAAA,MAFqB;AAGrBX,MAAAA;AAHqB,KAAD,CAAtB;AAKD,GAND,EAMG,CAACG,sBAAD,EAAyBK,QAAzB,EAAmCG,MAAnC,EAA2CX,QAA3C,CANH;AAQA,QAAMY,aAAa,GAAG,qDACpB;AACEC,IAAAA,QAAQ,EAAGC,KAAD,IAAW;AACnB,YAAMC,MAAM,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAAnC;AACA,YAAMC,IAAI,GAAGhB,OAAO,CAACI,KAAR,GAAgBS,MAA7B;AACAd,MAAAA,eAAe,CAACK,KAAhB,GAAwBY,IAAI,GAAG,CAAP,GAAW,MAAX,GAAoBA,IAAI,GAAG,CAAP,GAAW,IAAX,GAAkB,SAA9D;AACAhB,MAAAA,OAAO,CAACI,KAAR,GAAgBS,MAAhB;AACD,KANH;AAOEI,IAAAA,SAAS,EAAE,MAAM;AACf,UAAI,CAACpB,eAAL,EAAsB;AACtB,YAAMqB,IAAI,GACRhB,gBAAgB,CAACE,KAAjB,IAA0BF,gBAAgB,CAACE,KAAjB,GAAyB,CAAnD,GACIF,gBAAgB,CAACE,KADrB,GAEID,iBAAiB,CAACC,KAAlB,IAA2B,CAHjC;;AAKA,UAAIJ,OAAO,CAACI,KAAR,GAAgBc,IAApB,EAA0B;AACxB,cAAMC,KAAK,GAAGZ,IAAI,CAACa,GAAL,CAASpB,OAAO,CAACI,KAAR,GAAgBc,IAAzB,CAAd;;AACA,YAAIC,KAAK,GAAG1B,OAAO,GAAG,CAAtB,EAAyB;AACvB,cAAI4B,MAAM,GAAG,CAAb;;AACA,cAAItB,eAAe,CAACK,KAAhB,KAA0B,IAA9B,EAAoC;AAClCiB,YAAAA,MAAM,GAAGH,IAAT;AACD;;AACD,8CAAQpB,QAAR,EAAkBuB,MAAlB;AACD;AACF;AACF;AAxBH,GADoB,EA2BpB,CAACvB,QAAD,CA3BoB,CAAtB;AA8BA,SAAO;AACLY,IAAAA,aADK;AAELJ,IAAAA,QAFK;AAGLG,IAAAA;AAHK,GAAP;AAKD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n  runOnJS,\n  useAnimatedScrollHandler,\n  useSharedValue,\n} from 'react-native-reanimated';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\nconst { height: wHeight } = Dimensions.get('window');\n\ntype Props = {\n  headerSnappable: boolean;\n  scrollTo: (yValue: number, animated?: boolean) => void;\n};\n\nexport default function useAnimatedScroll({\n  headerSnappable,\n  scrollTo,\n}: Props) {\n  const scrollDirection = useSharedValue('unknown');\n  const { scrollY } = useCollapsibleContext();\n  const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =\n    useInternalCollapsibleContext();\n\n  useEffect(() => {\n    if (scrollY.value > 0) {\n      requestAnimationFrame(() => scrollTo(scrollY.value, false));\n    }\n  }, []);\n\n  const collapse = useCallback(() => {\n    scrollTo(\n      Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0)\n    );\n  }, [scrollTo]);\n\n  const expand = useCallback(() => scrollTo(0), [scrollTo]);\n\n  useEffect(() => {\n    setCollapsibleHandlers({\n      collapse,\n      expand,\n      scrollTo,\n    });\n  }, [setCollapsibleHandlers, collapse, expand, scrollTo]);\n\n  const scrollHandler = useAnimatedScrollHandler(\n    {\n      onScroll: (event) => {\n        const offset = event.contentOffset.y;\n        const diff = scrollY.value - offset;\n        scrollDirection.value = diff > 0 ? 'down' : diff < 0 ? 'up' : 'unknown';\n        scrollY.value = offset;\n      },\n      onEndDrag: () => {\n        if (!headerSnappable) return;\n        const maxY =\n          firstStickyViewY.value && firstStickyViewY.value > 0\n            ? firstStickyViewY.value\n            : fixedHeaderHeight.value || 0;\n\n        if (scrollY.value < maxY) {\n          const delta = Math.abs(scrollY.value - maxY);\n          if (delta < wHeight / 2) {\n            let yValue = 0;\n            if (scrollDirection.value === 'up') {\n              yValue = maxY;\n            }\n            runOnJS(scrollTo)(yValue);\n          }\n        }\n      },\n    },\n    [scrollTo]\n  );\n\n  return {\n    scrollHandler,\n    collapse,\n    expand,\n  };\n}\n"]}

package/lib/commonjs/hooks/useInternalCollapsibleContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useInternalCollapsibleContext = useInternalCollapsibleContext;
+exports.default = useInternalCollapsibleContext;
 exports.InternalCollapsibleContext = void 0;
 
 var _react = require("react");

package/lib/commonjs/hooks/useInternalCollapsibleContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useInternalCollapsibleContext.ts"],"names":["InternalCollapsibleContext","useInternalCollapsibleContext","ctx","Error"],"mappings":";;;;;;;;AAAA;;AAGO,MAAMA,0BAA0B;AAAA;AACrC;AACA,2BAFK;;;AAIA,SAASC,6BAAT,GAAyC;AAC9C,QAAMC,GAAG,GAAG,uBAAWF,0BAAX,CAAZ;;AACA,MAAI,CAACE,GAAL,EAAU;AACR,UAAM,IAAIC,KAAJ,CAAU,yDAAV,CAAN;AACD;;AACD,SAAOD,GAAP;AACD","sourcesContent":["import { createContext, useContext } from 'react';\nimport type { CollapsibleContextInternalType } from '../types';\n\nexport const InternalCollapsibleContext =\n  // @ts-ignore\n  createContext<CollapsibleContextInternalType>();\n\nexport function useInternalCollapsibleContext() {\n  const ctx = useContext(InternalCollapsibleContext);\n  if (!ctx) {\n    throw new Error('Component should be wrapped with withCollapsibleContext');\n  }\n  return ctx;\n}\n"]}
+{"version":3,"sources":["useInternalCollapsibleContext.ts"],"names":["InternalCollapsibleContext","useInternalCollapsibleContext","ctx","Error"],"mappings":";;;;;;;;AAAA;;AAGO,MAAMA,0BAA0B;AAAA;AACrC;AACA,2BAFK;;;AAIQ,SAASC,6BAAT,GAAyC;AACtD,QAAMC,GAAG,GAAG,uBAAWF,0BAAX,CAAZ;;AACA,MAAI,CAACE,GAAL,EAAU;AACR,UAAM,IAAIC,KAAJ,CAAU,yDAAV,CAAN;AACD;;AACD,SAAOD,GAAP;AACD","sourcesContent":["import { createContext, useContext } from 'react';\nimport type { CollapsibleContextInternalType } from '../types';\n\nexport const InternalCollapsibleContext =\n  // @ts-ignore\n  createContext<CollapsibleContextInternalType>();\n\nexport default function useInternalCollapsibleContext() {\n  const ctx = useContext(InternalCollapsibleContext);\n  if (!ctx) {\n    throw new Error('Component should be wrapped with withCollapsibleContext');\n  }\n  return ctx;\n}\n"]}

package/lib/commonjs/index.js

@@ -10,8 +10,9 @@ var _exportNames = {
   CollapsibleFlatList: true,
   CollapsibleScrollView: true,
   CollapsibleHeaderContainer: true,
-  CollapsibleView: true,
-  StickyView: true
+  StickyView: true,
+  RefreshControl: true,
+  CollapsibleView: true
 };
 Object.defineProperty(exports, "withCollapsibleContext", {
   enumerable: true,
@@ -49,30 +50,40 @@ Object.defineProperty(exports, "CollapsibleHeaderContainer", {
     return _CollapsibleHeaderContainer.default;
   }
 });
-Object.defineProperty(exports, "CollapsibleView", {
+Object.defineProperty(exports, "StickyView", {
   enumerable: true,
   get: function () {
-    return _CollapsibleView.default;
+    return _StickyView.default;
   }
 });
-Object.defineProperty(exports, "StickyView", {
+Object.defineProperty(exports, "RefreshControl", {
   enumerable: true,
   get: function () {
-    return _StickyView.default;
+    return _RefreshControl.default;
+  }
+});
+Object.defineProperty(exports, "CollapsibleView", {
+  enumerable: true,
+  get: function () {
+    return _CollapsibleView.default;
   }
 });
 
-var _withCollapsibleContext = _interopRequireDefault(require("./hooks/withCollapsibleContext"));
+var _withCollapsibleContext = _interopRequireDefault(require("./withCollapsibleContext"));
 
 var _useCollapsibleContext = _interopRequireDefault(require("./hooks/useCollapsibleContext"));
 
 var _CollapsibleContainer = _interopRequireDefault(require("./components/CollapsibleContainer"));
 
-var _CollapsibleFlatList = _interopRequireDefault(require("./components/CollapsibleFlatList"));
+var _CollapsibleFlatList = _interopRequireDefault(require("./components/scrollable/CollapsibleFlatList"));
 
-var _CollapsibleScrollView = _interopRequireDefault(require("./components/CollapsibleScrollView"));
+var _CollapsibleScrollView = _interopRequireDefault(require("./components/scrollable/CollapsibleScrollView"));
 
-var _CollapsibleHeaderContainer = _interopRequireDefault(require("./components/CollapsibleHeaderContainer"));
+var _CollapsibleHeaderContainer = _interopRequireDefault(require("./components/header/CollapsibleHeaderContainer"));
+
+var _StickyView = _interopRequireDefault(require("./components/header/StickyView"));
+
+var _RefreshControl = _interopRequireDefault(require("./components/pullToRefresh/RefreshControl"));
 
 var _CollapsibleView = _interopRequireWildcard(require("./components/CollapsibleView"));
 
@@ -88,8 +99,6 @@ Object.keys(_CollapsibleView).forEach(function (key) {
   });
 });
 
-var _StickyView = _interopRequireDefault(require("./components/StickyView"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AADA","sourcesContent":["export { default as withCollapsibleContext } from './hooks/withCollapsibleContext';\nexport { default as useCollapsibleContext } from './hooks/useCollapsibleContext';\n\nexport { default as CollapsibleContainer } from './components/CollapsibleContainer';\nexport { default as CollapsibleFlatList } from './components/CollapsibleFlatList';\nexport { default as CollapsibleScrollView } from './components/CollapsibleScrollView';\nexport { default as CollapsibleHeaderContainer } from './components/CollapsibleHeaderContainer';\nexport { default as CollapsibleView } from './components/CollapsibleView';\nexport { default as StickyView } from './components/StickyView';\nexport * from './components/CollapsibleView';\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as withCollapsibleContext } from './withCollapsibleContext';\nexport { default as useCollapsibleContext } from './hooks/useCollapsibleContext';\n\nexport { default as CollapsibleContainer } from './components/CollapsibleContainer';\nexport { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';\nexport { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';\nexport { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';\nexport { default as StickyView } from './components/header/StickyView';\nexport { default as RefreshControl } from './components/pullToRefresh/RefreshControl';\nexport { default as CollapsibleView } from './components/CollapsibleView';\nexport * from './components/CollapsibleView';\n"]}

package/lib/commonjs/{types.js → types.d.js}

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.d.js.map

package/lib/commonjs/utils/debounce.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.debounce = debounce;
+
+// https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940
+function debounce(cb, wait = 20) {
+  let h = 0;
+
+  let callable = (...args) => {
+    clearTimeout(h); // @ts-ignore
+
+    h = setTimeout(() => cb(...args), wait);
+  };
+
+  return callable;
+}
+//# sourceMappingURL=debounce.js.map

package/lib/commonjs/utils/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["debounce.ts"],"names":["debounce","cb","wait","h","callable","args","clearTimeout","setTimeout"],"mappings":";;;;;;;AAAA;AACO,SAASA,QAAT,CAAsCC,EAAtC,EAA6CC,IAAI,GAAG,EAApD,EAAwD;AAC7D,MAAIC,CAAC,GAAG,CAAR;;AACA,MAAIC,QAAQ,GAAG,CAAC,GAAGC,IAAJ,KAAkB;AAC/BC,IAAAA,YAAY,CAACH,CAAD,CAAZ,CAD+B,CAE/B;;AACAA,IAAAA,CAAC,GAAGI,UAAU,CAAC,MAAMN,EAAE,CAAC,GAAGI,IAAJ,CAAT,EAAoBH,IAApB,CAAd;AACD,GAJD;;AAKA,SAAgBE,QAAhB;AACD","sourcesContent":["// https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940\nexport function debounce<T extends Function>(cb: T, wait = 20) {\n  let h = 0;\n  let callable = (...args: any) => {\n    clearTimeout(h);\n    // @ts-ignore\n    h = setTimeout(() => cb(...args), wait);\n  };\n  return <T>(<any>callable);\n}\n"]}

package/lib/commonjs/{hooks/withCollapsibleContext.js → withCollapsibleContext.js}

@@ -7,86 +7,119 @@ exports.default = withCollapsibleContext;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _useCollapsibleContext = require("./useCollapsibleContext");
+var _useCollapsibleContext = require("./hooks/useCollapsibleContext");
 
-var _useInternalCollapsibleContext = require("./useInternalCollapsibleContext");
+var _useInternalCollapsibleContext = require("./hooks/useInternalCollapsibleContext");
 
 var _reactNativeReanimated = require("react-native-reanimated");
 
+var _debounce = require("./utils/debounce");
+
+var _PullToRefreshProvider = _interopRequireDefault(require("./components/pullToRefresh/PullToRefreshProvider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/* eslint-disable no-shadow */
+
 /* eslint-disable react-hooks/exhaustive-deps */
 function withCollapsibleContext(Component) {
   return props => {
     const collapsibleHandlers = (0, _react.useRef)();
     const headerHeight = (0, _reactNativeReanimated.useSharedValue)(0);
     const scrollY = (0, _reactNativeReanimated.useSharedValue)(0);
-    const headerCollapsed = (0, _reactNativeReanimated.useSharedValue)(false);
-    const contentMinHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+    const stickyViewRefs = (0, _react.useRef)({});
     const stickyViewTops = (0, _reactNativeReanimated.useSharedValue)({});
-    const stickyHeaderHeight = (0, _react.useRef)(0);
-    const containerHeight = (0, _react.useRef)(0);
-    const firstStickyViewY = (0, _react.useRef)(1000000);
-    const fixedHeaderHeight = (0, _react.useRef)(0);
+    const stickyViewPositionsRef = (0, _react.useRef)({});
+    const stickyViewPositions = (0, _reactNativeReanimated.useSharedValue)({});
+    const fixedHeaderHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+    const stickyHeaderHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+    const containerHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+    const firstStickyViewY = (0, _reactNativeReanimated.useSharedValue)(1000000);
     const headerContainersHeight = (0, _react.useRef)({});
-    const stickyViewPositions = (0, _react.useRef)({});
     const containerRef = (0, _react.useRef)(null);
     const setCollapsibleHandlers = (0, _react.useCallback)(handlers => {
       collapsibleHandlers.current = handlers;
     }, []);
-    const refreshHeaderCollapsed = (0, _react.useCallback)(() => {
-      const maxY = fixedHeaderHeight.current - firstStickyViewY.current;
-      const isCollapsed = scrollY.value >= maxY;
-      headerCollapsed.value = isCollapsed;
+    const headerCollapsed = (0, _reactNativeReanimated.useDerivedValue)(() => {
+      const maxY = fixedHeaderHeight.value - firstStickyViewY.value;
+      return scrollY.value >= maxY;
     }, []);
-    const refreshMinContentHeight = (0, _react.useCallback)(() => {
-      contentMinHeight.value = containerHeight.current + fixedHeaderHeight.current - stickyHeaderHeight.current;
+    const contentMinHeight = (0, _reactNativeReanimated.useDerivedValue)(() => {
+      return containerHeight.value + fixedHeaderHeight.value - stickyHeaderHeight.value;
     }, []);
-    const populateData = (0, _react.useCallback)(() => {
-      var _viewPositions$sorted;
+    (0, _reactNativeReanimated.useAnimatedReaction)(() => {
+      const totalHeight = Object.keys(stickyViewPositions.value).reduce((acc, item) => {
+        return acc + stickyViewPositions.value[item].top;
+      }, 0);
+      return totalHeight - fixedHeaderHeight.value;
+    }, (result, previous) => {
+      if (result !== previous) {
+        var _viewPositions$sorted;
+
+        const viewPositions = stickyViewPositions.value;
+        const headerHeight = fixedHeaderHeight.value;
+        const sortedKeys = Object.keys(viewPositions).sort((a, b) => viewPositions[a].top - viewPositions[b].top);
+        let totalTop = 0;
+        const values = {};
+
+        for (let i = 0; i < sortedKeys.length; i++) {
+          values[sortedKeys[i]] = totalTop; // Try minus 1 make it filled when scrolling up.
+          // Otherwise, we can see a small space between the persits views
+
+          totalTop += viewPositions[sortedKeys[i]].height - 1;
+        }
 
-      const viewPositions = stickyViewPositions.current;
-      const headerHeight = fixedHeaderHeight.current;
-      const sortedKeys = Object.keys(viewPositions).sort((a, b) => viewPositions[a].top - viewPositions[b].top);
-      let totalTop = 0;
-      const values = {};
+        stickyViewTops.value = values;
+        firstStickyViewY.value = ((_viewPositions$sorted = viewPositions[sortedKeys[0]]) === null || _viewPositions$sorted === void 0 ? void 0 : _viewPositions$sorted.top) || 0;
+        const stickyHeader = sortedKeys.reduce((acc, key) => {
+          const data = viewPositions[key];
+          const isInsideHeader = data.top < headerHeight;
 
-      for (let i = 0; i < sortedKeys.length; i++) {
-        values[sortedKeys[i]] = totalTop; // Try minus 1 make it filled when scrolling up.
-        // Otherwise, we can see a small space between the persits views
+          if (isInsideHeader) {
+            return acc + data.height;
+          }
 
-        totalTop += viewPositions[sortedKeys[i]].height - 1;
+          return acc;
+        }, 0);
+        stickyHeaderHeight.value = stickyHeader;
       }
-
-      stickyViewTops.value = values;
-      firstStickyViewY.current = ((_viewPositions$sorted = viewPositions[sortedKeys[0]]) === null || _viewPositions$sorted === void 0 ? void 0 : _viewPositions$sorted.top) || 0;
-      refreshHeaderCollapsed();
-      const stickyHeader = sortedKeys.reduce((acc, key) => {
-        const data = viewPositions[key];
-        const isInsideHeader = data.top < headerHeight;
-
-        if (isInsideHeader) {
-          return acc + data.height;
-        }
-
-        return acc;
-      }, 0);
-      stickyHeaderHeight.current = stickyHeader;
-      refreshMinContentHeight();
-    }, [stickyViewPositions.current, fixedHeaderHeight.current]);
-    const handleStickyViewLayout = (0, _react.useCallback)((viewKey, layout) => {
-      if (!layout) {
-        delete stickyViewPositions.current[viewKey];
+    });
+    const handleStickyViewLayout = (0, _react.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
+            }
+          };
+          stickyViewPositions.value = stickyViewPositionsRef.current;
+        }, () => {});
       } else {
-        stickyViewPositions.current = { ...stickyViewPositions.current,
-          [viewKey]: layout
-        };
+        delete stickyViewRefs.current[viewKey];
+        delete stickyViewPositionsRef.current[viewKey];
+        stickyViewPositions.value = stickyViewPositionsRef.current;
       }
-
-      populateData();
-    }, [populateData, fixedHeaderHeight]);
+    }, []);
+    const debounceRefreshStickyPositions = (0, _react.useMemo)(() => {
+      return (0, _debounce.debounce)(() => {
+        Object.keys(stickyViewRefs.current).forEach(key => {
+          const viewRef = stickyViewRefs.current[key];
+
+          if (viewRef) {
+            handleStickyViewLayout(key, viewRef);
+          }
+        });
+      }, 200);
+    }, []);
     const handleHeaderContainerLayout = (0, _react.useCallback)((viewKey, height) => {
       if (!height) {
         delete headerContainersHeight.current[viewKey];
@@ -96,17 +129,15 @@ function withCollapsibleContext(Component) {
 
       const totalHeight = Object.keys(headerContainersHeight.current).reduce((acc, key) => headerContainersHeight.current[key] + acc, 0);
       headerHeight.value = (0, _reactNativeReanimated.withTiming)(totalHeight, {
-        duration: fixedHeaderHeight.current === 0 ? 0 : 200
+        duration: fixedHeaderHeight.value === 0 ? 0 : 200
       });
-      fixedHeaderHeight.current = totalHeight;
-      populateData();
-      refreshHeaderCollapsed();
-      refreshMinContentHeight();
-    }, [populateData, refreshHeaderCollapsed, refreshMinContentHeight]);
+      fixedHeaderHeight.value = totalHeight; // Try refresh sticky positions
+
+      debounceRefreshStickyPositions();
+    }, []);
     const handleContainerHeight = (0, _react.useCallback)(height => {
-      containerHeight.current = height;
-      refreshMinContentHeight();
-    }, [refreshMinContentHeight]);
+      containerHeight.value = height;
+    }, []);
     const context = (0, _react.useMemo)(() => {
       return {
         collapse: () => {
@@ -137,15 +168,15 @@ function withCollapsibleContext(Component) {
       handleContainerHeight,
       firstStickyViewY,
       stickyViewTops,
+      stickyViewPositions,
       fixedHeaderHeight,
-      stickyHeaderHeight,
       contentMinHeight
-    }), [setCollapsibleHandlers, handleStickyViewLayout, handleHeaderContainerLayout, handleContainerHeight, firstStickyViewY, stickyViewTops, fixedHeaderHeight, stickyHeaderHeight, contentMinHeight]);
+    }), [setCollapsibleHandlers, handleStickyViewLayout, handleHeaderContainerLayout, handleContainerHeight, firstStickyViewY, stickyViewTops, stickyViewPositions, fixedHeaderHeight, contentMinHeight]);
     return /*#__PURE__*/_react.default.createElement(_useCollapsibleContext.CollapsibleContext.Provider, {
       value: context
     }, /*#__PURE__*/_react.default.createElement(_useInternalCollapsibleContext.InternalCollapsibleContext.Provider, {
       value: internalContext
-    }, /*#__PURE__*/_react.default.createElement(Component, props)));
+    }, /*#__PURE__*/_react.default.createElement(_PullToRefreshProvider.default, null, /*#__PURE__*/_react.default.createElement(Component, props))));
   };
 }
 //# sourceMappingURL=withCollapsibleContext.js.map