@r0b0t3d/react-native-collapsible 1.2.2 → 1.3.0

package/lib/module/components/header/CollapsibleHeaderContainer.js

@@ -1,64 +1,25 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
-import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import { useEffect, useMemo } from 'react';
+import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
 let key = 0;
 export default function CollapsibleHeaderContainer({
-  children,
-  containerStyle
+  children
 }) {
   const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
   const {
-    scrollY
-  } = useCollapsibleContext();
-  const {
-    handleHeaderContainerLayout
-  } = useInternalCollapsibleContext();
-  const headerHeight = useSharedValue(0);
+    mount,
+    unmount,
+    update
+  } = useCollapsibleHeaderContext();
   useEffect(() => {
-    return () => handleHeaderContainerLayout(contentKey, undefined);
-  }, []);
-  const handleHeaderLayout = useCallback(({
-    nativeEvent: {
-      layout: {
-        height
-      }
-    }
-  }) => {
-    headerHeight.value = height;
-    handleHeaderContainerLayout(contentKey, height);
-  }, [contentKey]);
-  const headerTranslate = useDerivedValue(() => interpolate(scrollY.value, // FIXME: can improve by geting maxY value of header and sticky views
-  [-250, 0, 100000], [250, 0, -100000], Animated.Extrapolate.CLAMP), []);
-  const headerStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{
-        translateY: headerTranslate.value
-      }],
-      minHeight: headerHeight.value
-    };
-  }, [headerHeight, headerTranslate]);
-  const internalStyle = useMemo(() => {
-    return {
-      zIndex: 100000 - key
+    mount(contentKey, children);
+    return () => {
+      unmount(contentKey);
     };
-  }, []);
-  return /*#__PURE__*/React.createElement(Animated.View, {
-    style: [headerStyle, internalStyle],
-    pointerEvents: "box-none"
-  }, /*#__PURE__*/React.createElement(View, {
-    key: contentKey,
-    onLayout: handleHeaderLayout,
-    pointerEvents: "box-none",
-    style: [styles.container, containerStyle]
-  }, children));
+  }, [contentKey]);
+  useEffect(() => {
+    update(contentKey, children);
+  }, [children]);
+  return null;
 }
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-    marginTop: Platform.OS === 'android' ? -1 : 0
-  }
-});
 //# sourceMappingURL=CollapsibleHeaderContainer.js.map

package/lib/module/components/header/CollapsibleHeaderContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["useInternalCollapsibleContext","React","useCallback","useEffect","useMemo","Platform","StyleSheet","View","Animated","interpolate","useAnimatedStyle","useDerivedValue","useSharedValue","useCollapsibleContext","key","CollapsibleHeaderContainer","children","containerStyle","contentKey","scrollY","handleHeaderContainerLayout","headerHeight","undefined","handleHeaderLayout","nativeEvent","layout","height","value","headerTranslate","Extrapolate","CLAMP","headerStyle","transform","translateY","minHeight","internalStyle","zIndex","styles","container","create","backgroundColor","marginTop","OS"],"mappings":"AAAA;AACA,OAAOA,6BAAP,MAA0C,2CAA1C;AACA,OAAOC,KAAP,IAA2BC,WAA3B,EAAwCC,SAAxC,EAAmDC,OAAnD,QAAkE,OAAlE;AACA,SAEEC,QAFF,EAIEC,UAJF,EAKEC,IALF,QAOO,cAPP;AAQA,OAAOC,QAAP,IACEC,WADF,EAEEC,gBAFF,EAGEC,eAHF,EAIEC,cAJF,QAKO,yBALP;AAMA,OAAOC,qBAAP,MAAkC,mCAAlC;AAOA,IAAIC,GAAG,GAAG,CAAV;AAEA,eAAe,SAASC,0BAAT,CAAoC;AACjDC,EAAAA,QADiD;AAEjDC,EAAAA;AAFiD,CAApC,EAGL;AACR,QAAMC,UAAU,GAAGd,OAAO,CAAC,MAAO,sBAAqBU,GAAG,EAAG,EAAnC,EAAsC,EAAtC,CAA1B;AACA,QAAM;AAAEK,IAAAA;AAAF,MAAcN,qBAAqB,EAAzC;AACA,QAAM;AAAEO,IAAAA;AAAF,MAAkCpB,6BAA6B,EAArE;AACA,QAAMqB,YAAY,GAAGT,cAAc,CAAC,CAAD,CAAnC;AAEAT,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAMiB,2BAA2B,CAACF,UAAD,EAAaI,SAAb,CAAxC;AACD,GAFQ,EAEN,EAFM,CAAT;AAIA,QAAMC,kBAAkB,GAAGrB,WAAW,CACpC,CAAC;AACCsB,IAAAA,WAAW,EAAE;AACXC,MAAAA,MAAM,EAAE;AAAEC,QAAAA;AAAF;AADG;AADd,GAAD,KAIyB;AACvBL,IAAAA,YAAY,CAACM,KAAb,GAAqBD,MAArB;AACAN,IAAAA,2BAA2B,CAACF,UAAD,EAAaQ,MAAb,CAA3B;AACD,GARmC,EASpC,CAACR,UAAD,CAToC,CAAtC;AAYA,QAAMU,eAAe,GAAGjB,eAAe,CACrC,MACEF,WAAW,CACTU,OAAO,CAACQ,KADC,EAET;AACA,GAAC,CAAC,GAAF,EAAO,CAAP,EAAU,MAAV,CAHS,EAIT,CAAC,GAAD,EAAM,CAAN,EAAS,CAAC,MAAV,CAJS,EAKTnB,QAAQ,CAACqB,WAAT,CAAqBC,KALZ,CAFwB,EASrC,EATqC,CAAvC;AAYA,QAAMC,WAAW,GAAGrB,gBAAgB,CAAC,MAAM;AACzC,WAAO;AACLsB,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAEL,eAAe,CAACD;AAA9B,OAAD,CADN;AAELO,MAAAA,SAAS,EAAEb,YAAY,CAACM;AAFnB,KAAP;AAID,GALmC,EAKjC,CAACN,YAAD,EAAeO,eAAf,CALiC,CAApC;AAOA,QAAMO,aAAa,GAAG/B,OAAO,CAAC,MAAM;AAClC,WAAO;AACLgC,MAAAA,MAAM,EAAE,SAAStB;AADZ,KAAP;AAGD,GAJ4B,EAI1B,EAJ0B,CAA7B;AAMA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CAACiB,WAAD,EAAcI,aAAd,CADT;AAEE,IAAA,aAAa,EAAC;AAFhB,kBAIE,oBAAC,IAAD;AACE,IAAA,GAAG,EAAEjB,UADP;AAEE,IAAA,QAAQ,EAAEK,kBAFZ;AAGE,IAAA,aAAa,EAAC,UAHhB;AAIE,IAAA,KAAK,EAAE,CAACc,MAAM,CAACC,SAAR,EAAmBrB,cAAnB;AAJT,KAMGD,QANH,CAJF,CADF;AAeD;AAED,MAAMqB,MAAM,GAAG/B,UAAU,CAACiC,MAAX,CAAkB;AAC/BD,EAAAA,SAAS,EAAE;AACTE,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,SAAS,EAAEpC,QAAQ,CAACqC,EAAT,KAAgB,SAAhB,GAA4B,CAAC,CAA7B,GAAiC;AAFnC;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport React, { ReactNode, useCallback, useEffect, useMemo } from 'react';\nimport {\n  LayoutChangeEvent,\n  Platform,\n  StyleProp,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n} from 'react-native-reanimated';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\n\ntype Props = {\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nlet key = 0;\n\nexport default function CollapsibleHeaderContainer({\n  children,\n  containerStyle,\n}: Props) {\n  const contentKey = useMemo(() => `collapsible-header-${key++}`, []);\n  const { scrollY } = useCollapsibleContext();\n  const { handleHeaderContainerLayout } = useInternalCollapsibleContext();\n  const headerHeight = useSharedValue(0);\n\n  useEffect(() => {\n    return () => handleHeaderContainerLayout(contentKey, undefined);\n  }, []);\n\n  const handleHeaderLayout = useCallback(\n    ({\n      nativeEvent: {\n        layout: { height },\n      },\n    }: LayoutChangeEvent) => {\n      headerHeight.value = height;\n      handleHeaderContainerLayout(contentKey, height);\n    },\n    [contentKey]\n  );\n\n  const headerTranslate = useDerivedValue(\n    () =>\n      interpolate(\n        scrollY.value,\n        // FIXME: can improve by geting maxY value of header and sticky views\n        [-250, 0, 100000],\n        [250, 0, -100000],\n        Animated.Extrapolate.CLAMP\n      ),\n    []\n  );\n\n  const headerStyle = useAnimatedStyle(() => {\n    return {\n      transform: [{ translateY: headerTranslate.value }],\n      minHeight: headerHeight.value,\n    };\n  }, [headerHeight, headerTranslate]);\n\n  const internalStyle = useMemo(() => {\n    return {\n      zIndex: 100000 - key,\n    };\n  }, []);\n\n  return (\n    <Animated.View\n      style={[headerStyle, internalStyle]}\n      pointerEvents=\"box-none\"\n    >\n      <View\n        key={contentKey}\n        onLayout={handleHeaderLayout}\n        pointerEvents=\"box-none\"\n        style={[styles.container, containerStyle]}\n      >\n        {children}\n      </View>\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    marginTop: Platform.OS === 'android' ? -1 : 0,\n  },\n});\n"]}
+{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["useEffect","useMemo","useCollapsibleHeaderContext","key","CollapsibleHeaderContainer","children","contentKey","mount","unmount","update"],"mappings":"AAAA;AACA,SAAoBA,SAApB,EAA+BC,OAA/B,QAA8C,OAA9C;AAEA,OAAOC,2BAAP,MAAwC,yCAAxC;AAOA,IAAIC,GAAG,GAAG,CAAV;AAEA,eAAe,SAASC,0BAAT,CAAoC;AAAEC,EAAAA;AAAF,CAApC,EAAyD;AACtE,QAAMC,UAAU,GAAGL,OAAO,CAAC,MAAO,sBAAqBE,GAAG,EAAG,EAAnC,EAAsC,EAAtC,CAA1B;AACA,QAAM;AAAEI,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6BP,2BAA2B,EAA9D;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACdO,IAAAA,KAAK,CAACD,UAAD,EAAaD,QAAb,CAAL;AAEA,WAAO,MAAM;AACXG,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GANQ,EAMN,CAACA,UAAD,CANM,CAAT;AAQAN,EAAAA,SAAS,CAAC,MAAM;AACdS,IAAAA,MAAM,CAACH,UAAD,EAAaD,QAAb,CAAN;AACD,GAFQ,EAEN,CAACA,QAAD,CAFM,CAAT;AAIA,SAAO,IAAP;AACD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { ReactNode, useEffect, useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\n\ntype Props = {\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nlet key = 0;\n\nexport default function CollapsibleHeaderContainer({ children }: Props) {\n  const contentKey = useMemo(() => `collapsible-header-${key++}`, []);\n  const { mount, unmount, update } = useCollapsibleHeaderContext();\n\n  useEffect(() => {\n    mount(contentKey, children);\n\n    return () => {\n      unmount(contentKey);\n    };\n  }, [contentKey]);\n\n  useEffect(() => {\n    update(contentKey, children);\n  }, [children]);\n\n  return null;\n}\n"]}

package/lib/module/components/header/CollapsibleHeaderProvider.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-shadow */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CollapsibleHeaderContext } from '../../hooks/useCollapsibleHeaderContext';
+export default function CollapsibleHeaderProvider({
+  children
+}) {
+  const [headers, setHeaders] = useState([]);
+  const mounted = useRef(false);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const mount = useCallback((key, children) => {
+    setHeaders(prev => [...prev, {
+      key,
+      children
+    }]);
+  }, []);
+  const unmount = useCallback(key => {
+    setHeaders(prev => prev.filter(h => h.key !== key));
+  }, []);
+  const update = useCallback((key, children) => {
+    if (!mounted.current) {
+      return;
+    }
+
+    setHeaders(prev => prev.map(item => {
+      if (item.key === key) {
+        return { ...item,
+          children
+        };
+      }
+
+      return item;
+    }));
+  }, []);
+  const context = useMemo(() => ({
+    headers,
+    mount,
+    unmount,
+    update
+  }), [headers, mount, unmount, update]);
+  return /*#__PURE__*/React.createElement(CollapsibleHeaderContext.Provider, {
+    value: context
+  }, children);
+}
+//# sourceMappingURL=CollapsibleHeaderProvider.js.map

package/lib/module/components/header/CollapsibleHeaderProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CollapsibleHeaderProvider.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","CollapsibleHeaderContext","CollapsibleHeaderProvider","children","headers","setHeaders","mounted","current","mount","key","prev","unmount","filter","h","update","map","item","context"],"mappings":"AAAA;AACA,OAAOA,KAAP,IAEEC,WAFF,EAGEC,SAHF,EAIEC,OAJF,EAKEC,MALF,EAMEC,QANF,QAOO,OAPP;AAQA,SACEC,wBADF,QAGO,yCAHP;AAKA,eAAe,SAASC,yBAAT,CAAmC;AAChDC,EAAAA;AADgD,CAAnC,EAIZ;AACD,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBL,QAAQ,CAAe,EAAf,CAAtC;AACA,QAAMM,OAAO,GAAGP,MAAM,CAAC,KAAD,CAAtB;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACdS,IAAAA,OAAO,CAACC,OAAR,GAAkB,IAAlB;AACA,WAAO,MAAM;AACXD,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACD,KAFD;AAGD,GALQ,EAKN,EALM,CAAT;AAOA,QAAMC,KAAK,GAAGZ,WAAW,CAAC,CAACa,GAAD,EAAcN,QAAd,KAAsC;AAC9DE,IAAAA,UAAU,CAAEK,IAAD,IAAU,CAAC,GAAGA,IAAJ,EAAU;AAAED,MAAAA,GAAF;AAAON,MAAAA;AAAP,KAAV,CAAX,CAAV;AACD,GAFwB,EAEtB,EAFsB,CAAzB;AAIA,QAAMQ,OAAO,GAAGf,WAAW,CAAEa,GAAD,IAAiB;AAC3CJ,IAAAA,UAAU,CAAEK,IAAD,IAAUA,IAAI,CAACE,MAAL,CAAaC,CAAD,IAAOA,CAAC,CAACJ,GAAF,KAAUA,GAA7B,CAAX,CAAV;AACD,GAF0B,EAExB,EAFwB,CAA3B;AAIA,QAAMK,MAAM,GAAGlB,WAAW,CAAC,CAACa,GAAD,EAAcN,QAAd,KAAsC;AAC/D,QAAI,CAACG,OAAO,CAACC,OAAb,EAAsB;AACpB;AACD;;AACDF,IAAAA,UAAU,CAAEK,IAAD,IACTA,IAAI,CAACK,GAAL,CAAUC,IAAD,IAAU;AACjB,UAAIA,IAAI,CAACP,GAAL,KAAaA,GAAjB,EAAsB;AACpB,eAAO,EACL,GAAGO,IADE;AAELb,UAAAA;AAFK,SAAP;AAID;;AACD,aAAOa,IAAP;AACD,KARD,CADQ,CAAV;AAWD,GAfyB,EAevB,EAfuB,CAA1B;AAiBA,QAAMC,OAAO,GAAGnB,OAAO,CACrB,OAAO;AACLM,IAAAA,OADK;AAELI,IAAAA,KAFK;AAGLG,IAAAA,OAHK;AAILG,IAAAA;AAJK,GAAP,CADqB,EAOrB,CAACV,OAAD,EAAUI,KAAV,EAAiBG,OAAjB,EAA0BG,MAA1B,CAPqB,CAAvB;AAUA,sBACE,oBAAC,wBAAD,CAA0B,QAA1B;AAAmC,IAAA,KAAK,EAAEG;AAA1C,KACGd,QADH,CADF;AAKD","sourcesContent":["/* eslint-disable no-shadow */\nimport React, {\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  CollapsibleHeaderContext,\n  HeaderItem,\n} from '../../hooks/useCollapsibleHeaderContext';\n\nexport default function CollapsibleHeaderProvider({\n  children,\n}: {\n  children: ReactNode;\n}) {\n  const [headers, setHeaders] = useState<HeaderItem[]>([]);\n  const mounted = useRef(false);\n\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const mount = useCallback((key: string, children: ReactNode) => {\n    setHeaders((prev) => [...prev, { key, children }]);\n  }, []);\n\n  const unmount = useCallback((key: string) => {\n    setHeaders((prev) => prev.filter((h) => h.key !== key));\n  }, []);\n\n  const update = useCallback((key: string, children: ReactNode) => {\n    if (!mounted.current) {\n      return;\n    }\n    setHeaders((prev) =>\n      prev.map((item) => {\n        if (item.key === key) {\n          return {\n            ...item,\n            children,\n          };\n        }\n        return item;\n      })\n    );\n  }, []);\n\n  const context = useMemo(\n    () => ({\n      headers,\n      mount,\n      unmount,\n      update,\n    }),\n    [headers, mount, unmount, update]\n  );\n\n  return (\n    <CollapsibleHeaderContext.Provider value={context}>\n      {children}\n    </CollapsibleHeaderContext.Provider>\n  );\n}\n"]}

package/lib/module/hooks/useCollapsibleHeaderContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+export const CollapsibleHeaderContext =
+/*#__PURE__*/
+// @ts-ignore
+createContext({});
+export default function useCollapsibleHeaderContext() {
+  const ctx = useContext(CollapsibleHeaderContext);
+
+  if (!ctx) {
+    throw new Error('Component should be wrapped CollapsibleHeaderProvider');
+  }
+
+  return ctx;
+}
+//# sourceMappingURL=useCollapsibleHeaderContext.js.map

package/lib/module/hooks/useCollapsibleHeaderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCollapsibleHeaderContext.ts"],"names":["createContext","useContext","CollapsibleHeaderContext","useCollapsibleHeaderContext","ctx","Error"],"mappings":"AAAA,SAASA,aAAT,EAAmCC,UAAnC,QAAqD,OAArD;AAWA,OAAO,MAAMC,wBAAwB;AAAA;AACnC;AACAF,aAAa,CAA+B,EAA/B,CAFR;AAIP,eAAe,SAASG,2BAAT,GAAuC;AACpD,QAAMC,GAAG,GAAGH,UAAU,CAACC,wBAAD,CAAtB;;AACA,MAAI,CAACE,GAAL,EAAU;AACR,UAAM,IAAIC,KAAJ,CAAU,uDAAV,CAAN;AACD;;AACD,SAAOD,GAAP;AACD","sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\nexport type HeaderItem = { key: string; children: ReactNode };\n\ntype CollapsibleContextHeaderType = {\n  headers: HeaderItem[];\n  mount: (key: string, header: ReactNode) => void;\n  update: (key: string, header: ReactNode) => void;\n  unmount: (key: string) => void;\n};\n\nexport const CollapsibleHeaderContext =\n  // @ts-ignore\n  createContext<CollapsibleContextHeaderType>({});\n\nexport default function useCollapsibleHeaderContext() {\n  const ctx = useContext(CollapsibleHeaderContext);\n  if (!ctx) {\n    throw new Error('Component should be wrapped CollapsibleHeaderProvider');\n  }\n  return ctx;\n}\n"]}

package/lib/module/withCollapsibleContext.js

@@ -7,6 +7,7 @@ import { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContex
 import { useAnimatedReaction, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
 import { debounce } from './utils/debounce';
 import PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';
+import CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';
 export default function withCollapsibleContext(Component) {
   return props => {
     const collapsibleHandlers = useRef();
@@ -20,13 +21,9 @@ export default function withCollapsibleContext(Component) {
     const stickyHeaderHeight = useSharedValue(0);
     const containerHeight = useSharedValue(0);
     const firstStickyViewY = useSharedValue(1000000);
-    const headerContainersHeight = useRef({});
     const containerRef = useRef(null);
     const scrollViewRef = useRef(null);
     const setCollapsibleHandlers = useCallback(handlers => {
-      console.log({
-        handlers
-      });
       collapsibleHandlers.current = handlers;
     }, []);
     const headerCollapsed = useDerivedValue(() => {
@@ -105,18 +102,11 @@ export default function withCollapsibleContext(Component) {
         });
       }, 200);
     }, []);
-    const handleHeaderContainerLayout = useCallback((viewKey, height) => {
-      if (!height) {
-        delete headerContainersHeight.current[viewKey];
-      } else {
-        headerContainersHeight.current[viewKey] = height;
-      }
-
-      const totalHeight = Object.keys(headerContainersHeight.current).reduce((acc, key) => headerContainersHeight.current[key] + acc, 0);
-      headerHeight.value = withTiming(totalHeight, {
+    const handleHeaderContainerLayout = useCallback(height => {
+      headerHeight.value = withTiming(height, {
         duration: fixedHeaderHeight.value === 0 ? 0 : 10
       });
-      fixedHeaderHeight.value = totalHeight; // Try refresh sticky positions
+      fixedHeaderHeight.value = height; // Try refresh sticky positions
 
       debounceRefreshStickyPositions();
     }, []);
@@ -167,7 +157,7 @@ export default function withCollapsibleContext(Component) {
       value: context
     }, /*#__PURE__*/React.createElement(InternalCollapsibleContext.Provider, {
       value: internalContext
-    }, /*#__PURE__*/React.createElement(PullToRefreshProvider, null, /*#__PURE__*/React.createElement(Component, props))));
+    }, /*#__PURE__*/React.createElement(CollapsibleHeaderProvider, null, /*#__PURE__*/React.createElement(PullToRefreshProvider, null, /*#__PURE__*/React.createElement(Component, props)))));
   };
 }
 //# sourceMappingURL=withCollapsibleContext.js.map

package/lib/module/withCollapsibleContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useAnimatedReaction","useDerivedValue","useSharedValue","withTiming","debounce","PullToRefreshProvider","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","headerContainersHeight","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","console","log","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","viewPositions","sortedKeys","sort","a","b","totalTop","values","i","length","height","stickyHeader","key","data","isInsideHeader","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","debounceRefreshStickyPositions","forEach","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","animated","expand","scrollTo","offset","animate","scrollToIndex","params","internalContext"],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { FC, useCallback, useMemo, useRef } from 'react';\nimport type { CollapsibleHandles, LayoutParams } from './types';\nimport { CollapsibleContext } from './hooks/useCollapsibleContext';\nimport { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';\nimport {\n  useAnimatedReaction,\n  useDerivedValue,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { View } from 'react-native';\nimport { debounce } from './utils/debounce';\nimport PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';\n\nexport default function withCollapsibleContext<T>(Component: FC<T>) {\n  return (props: T) => {\n    const collapsibleHandlers = useRef<CollapsibleHandles>();\n    const headerHeight = useSharedValue(0);\n    const scrollY = useSharedValue(0);\n    const stickyViewRefs = useRef<Record<string, React.RefObject<View>>>({});\n    const stickyViewTops = useSharedValue<Record<string, number>>({});\n    const stickyViewPositionsRef = useRef<Record<string, LayoutParams>>({});\n    const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(\n      {}\n    );\n    const fixedHeaderHeight = useSharedValue(0);\n    const stickyHeaderHeight = useSharedValue(0);\n    const containerHeight = useSharedValue(0);\n    const firstStickyViewY = useSharedValue(1000000);\n    const headerContainersHeight = useRef<Record<string, number>>({});\n    const containerRef = useRef<View>(null);\n    const scrollViewRef = useRef<View>(null);\n\n    const setCollapsibleHandlers = useCallback((handlers) => {\n      console.log({ handlers });\n\n      collapsibleHandlers.current = handlers;\n    }, []);\n\n    const headerCollapsed = useDerivedValue(() => {\n      const maxY = fixedHeaderHeight.value - firstStickyViewY.value;\n      return scrollY.value >= maxY;\n    }, []);\n\n    const contentMinHeight = useDerivedValue(() => {\n      return (\n        containerHeight.value +\n        fixedHeaderHeight.value -\n        stickyHeaderHeight.value\n      );\n    }, []);\n\n    useAnimatedReaction(\n      () => {\n        const totalHeight = Object.keys(stickyViewPositions.value).reduce(\n          (acc, item) => {\n            return acc + stickyViewPositions.value[item].top;\n          },\n          0\n        );\n        return totalHeight - fixedHeaderHeight.value;\n      },\n      (result, previous) => {\n        if (result !== previous) {\n          const viewPositions = stickyViewPositions.value;\n          const headerHeight = fixedHeaderHeight.value;\n          const sortedKeys = Object.keys(viewPositions).sort(\n            (a, b) => viewPositions[a].top - viewPositions[b].top\n          );\n          let totalTop = 0;\n          const values: any = {};\n          for (let i = 0; i < sortedKeys.length; i++) {\n            values[sortedKeys[i]] = totalTop;\n            // Try minus 1 make it filled when scrolling up.\n            // Otherwise, we can see a small space between the persits views\n            totalTop += viewPositions[sortedKeys[i]].height - 1;\n          }\n          stickyViewTops.value = values;\n          firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;\n          const stickyHeader = sortedKeys.reduce((acc, key) => {\n            const data = viewPositions[key];\n            const isInsideHeader = data.top < headerHeight;\n            if (isInsideHeader) {\n              return acc + data.height;\n            }\n            return acc;\n          }, 0);\n          stickyHeaderHeight.value = stickyHeader;\n        }\n      }\n    );\n\n    const handleStickyViewLayout = useCallback(\n      (viewKey: string, viewRef?: React.RefObject<View>) => {\n        if (viewRef && viewRef.current && containerRef.current) {\n          stickyViewRefs.current[viewKey] = viewRef;\n          viewRef.current.measureLayout(\n            // @ts-ignore\n            containerRef.current,\n            (left, top, width, height) => {\n              stickyViewPositionsRef.current = {\n                ...stickyViewPositionsRef.current,\n                [viewKey]: { left, top, width, height },\n              };\n              stickyViewPositions.value = stickyViewPositionsRef.current;\n            },\n            () => {}\n          );\n        } else {\n          delete stickyViewRefs.current[viewKey];\n          delete stickyViewPositionsRef.current[viewKey];\n          stickyViewPositions.value = stickyViewPositionsRef.current;\n        }\n      },\n      []\n    );\n\n    const debounceRefreshStickyPositions = useMemo(() => {\n      return debounce(() => {\n        Object.keys(stickyViewRefs.current).forEach((key) => {\n          const viewRef = stickyViewRefs.current[key];\n          if (viewRef) {\n            handleStickyViewLayout(key, viewRef);\n          }\n        });\n      }, 200);\n    }, []);\n\n    const handleHeaderContainerLayout = useCallback(\n      (viewKey: string, height?: number) => {\n        if (!height) {\n          delete headerContainersHeight.current[viewKey];\n        } else {\n          headerContainersHeight.current[viewKey] = height;\n        }\n        const totalHeight = Object.keys(headerContainersHeight.current).reduce(\n          (acc, key) => headerContainersHeight.current[key] + acc,\n          0\n        );\n        headerHeight.value = withTiming(totalHeight, {\n          duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n        });\n        fixedHeaderHeight.value = totalHeight;\n        // Try refresh sticky positions\n        debounceRefreshStickyPositions();\n      },\n      []\n    );\n\n    const handleContainerHeight = useCallback((height: number) => {\n      containerHeight.value = height;\n    }, []);\n\n    const context = useMemo(() => {\n      return {\n        collapse: (animated?: boolean) =>\n          collapsibleHandlers.current?.collapse(animated),\n        expand: () => collapsibleHandlers.current?.expand(),\n        scrollTo: (offset: number, animate?: boolean) =>\n          collapsibleHandlers.current?.scrollTo(offset, animate),\n        scrollToIndex: (params: any) =>\n          collapsibleHandlers.current?.scrollToIndex(params),\n        headerHeight,\n        scrollY,\n        headerCollapsed,\n      };\n    }, [scrollY, headerHeight, headerCollapsed]);\n\n    const internalContext = useMemo(\n      () => ({\n        scrollViewRef,\n        containerRef,\n        handleStickyViewLayout,\n        handleHeaderContainerLayout,\n        setCollapsibleHandlers,\n        handleContainerHeight,\n        firstStickyViewY,\n        stickyViewTops,\n        stickyViewPositions,\n        fixedHeaderHeight,\n        contentMinHeight,\n      }),\n      [\n        setCollapsibleHandlers,\n        handleStickyViewLayout,\n        handleHeaderContainerLayout,\n        handleContainerHeight,\n        firstStickyViewY,\n        stickyViewTops,\n        stickyViewPositions,\n        fixedHeaderHeight,\n        contentMinHeight,\n      ]\n    );\n\n    return (\n      <CollapsibleContext.Provider value={context}>\n        <InternalCollapsibleContext.Provider value={internalContext}>\n          <PullToRefreshProvider>\n            <Component {...props} />\n          </PullToRefreshProvider>\n        </InternalCollapsibleContext.Provider>\n      </CollapsibleContext.Provider>\n    );\n  };\n}\n"]}
+{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["React","useCallback","useMemo","useRef","CollapsibleContext","InternalCollapsibleContext","useAnimatedReaction","useDerivedValue","useSharedValue","withTiming","debounce","PullToRefreshProvider","CollapsibleHeaderProvider","withCollapsibleContext","Component","props","collapsibleHandlers","headerHeight","scrollY","stickyViewRefs","stickyViewTops","stickyViewPositionsRef","stickyViewPositions","fixedHeaderHeight","stickyHeaderHeight","containerHeight","firstStickyViewY","containerRef","scrollViewRef","setCollapsibleHandlers","handlers","current","headerCollapsed","maxY","value","contentMinHeight","totalHeight","Object","keys","reduce","acc","item","top","result","previous","viewPositions","sortedKeys","sort","a","b","totalTop","values","i","length","height","stickyHeader","key","data","isInsideHeader","handleStickyViewLayout","viewKey","viewRef","measureLayout","left","width","debounceRefreshStickyPositions","forEach","handleHeaderContainerLayout","duration","handleContainerHeight","context","collapse","animated","expand","scrollTo","offset","animate","scrollToIndex","params","internalContext"],"mappings":"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","sourcesContent":["/* eslint-disable no-shadow */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { FC, useCallback, useMemo, useRef } from 'react';\nimport type { CollapsibleHandles, LayoutParams } from './types';\nimport { CollapsibleContext } from './hooks/useCollapsibleContext';\nimport { InternalCollapsibleContext } from './hooks/useInternalCollapsibleContext';\nimport {\n  useAnimatedReaction,\n  useDerivedValue,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport type { View } from 'react-native';\nimport { debounce } from './utils/debounce';\nimport PullToRefreshProvider from './components/pullToRefresh/PullToRefreshProvider';\nimport CollapsibleHeaderProvider from './components/header/CollapsibleHeaderProvider';\n\nexport default function withCollapsibleContext<T>(Component: FC<T>) {\n  return (props: T) => {\n    const collapsibleHandlers = useRef<CollapsibleHandles>();\n    const headerHeight = useSharedValue(0);\n    const scrollY = useSharedValue(0);\n    const stickyViewRefs = useRef<Record<string, React.RefObject<View>>>({});\n    const stickyViewTops = useSharedValue<Record<string, number>>({});\n    const stickyViewPositionsRef = useRef<Record<string, LayoutParams>>({});\n    const stickyViewPositions = useSharedValue<Record<string, LayoutParams>>(\n      {}\n    );\n    const fixedHeaderHeight = useSharedValue(0);\n    const stickyHeaderHeight = useSharedValue(0);\n    const containerHeight = useSharedValue(0);\n    const firstStickyViewY = useSharedValue(1000000);\n    const containerRef = useRef<View>(null);\n    const scrollViewRef = useRef<View>(null);\n\n    const setCollapsibleHandlers = useCallback((handlers) => {\n      collapsibleHandlers.current = handlers;\n    }, []);\n\n    const headerCollapsed = useDerivedValue(() => {\n      const maxY = fixedHeaderHeight.value - firstStickyViewY.value;\n      return scrollY.value >= maxY;\n    }, []);\n\n    const contentMinHeight = useDerivedValue(() => {\n      return (\n        containerHeight.value +\n        fixedHeaderHeight.value -\n        stickyHeaderHeight.value\n      );\n    }, []);\n\n    useAnimatedReaction(\n      () => {\n        const totalHeight = Object.keys(stickyViewPositions.value).reduce(\n          (acc, item) => {\n            return acc + stickyViewPositions.value[item].top;\n          },\n          0\n        );\n        return totalHeight - fixedHeaderHeight.value;\n      },\n      (result, previous) => {\n        if (result !== previous) {\n          const viewPositions = stickyViewPositions.value;\n          const headerHeight = fixedHeaderHeight.value;\n          const sortedKeys = Object.keys(viewPositions).sort(\n            (a, b) => viewPositions[a].top - viewPositions[b].top\n          );\n          let totalTop = 0;\n          const values: any = {};\n          for (let i = 0; i < sortedKeys.length; i++) {\n            values[sortedKeys[i]] = totalTop;\n            // Try minus 1 make it filled when scrolling up.\n            // Otherwise, we can see a small space between the persits views\n            totalTop += viewPositions[sortedKeys[i]].height - 1;\n          }\n          stickyViewTops.value = values;\n          firstStickyViewY.value = viewPositions[sortedKeys[0]]?.top || 0;\n          const stickyHeader = sortedKeys.reduce((acc, key) => {\n            const data = viewPositions[key];\n            const isInsideHeader = data.top < headerHeight;\n            if (isInsideHeader) {\n              return acc + data.height;\n            }\n            return acc;\n          }, 0);\n          stickyHeaderHeight.value = stickyHeader;\n        }\n      }\n    );\n\n    const handleStickyViewLayout = useCallback(\n      (viewKey: string, viewRef?: React.RefObject<View>) => {\n        if (viewRef && viewRef.current && containerRef.current) {\n          stickyViewRefs.current[viewKey] = viewRef;\n          viewRef.current.measureLayout(\n            // @ts-ignore\n            containerRef.current,\n            (left, top, width, height) => {\n              stickyViewPositionsRef.current = {\n                ...stickyViewPositionsRef.current,\n                [viewKey]: { left, top, width, height },\n              };\n              stickyViewPositions.value = stickyViewPositionsRef.current;\n            },\n            () => {}\n          );\n        } else {\n          delete stickyViewRefs.current[viewKey];\n          delete stickyViewPositionsRef.current[viewKey];\n          stickyViewPositions.value = stickyViewPositionsRef.current;\n        }\n      },\n      []\n    );\n\n    const debounceRefreshStickyPositions = useMemo(() => {\n      return debounce(() => {\n        Object.keys(stickyViewRefs.current).forEach((key) => {\n          const viewRef = stickyViewRefs.current[key];\n          if (viewRef) {\n            handleStickyViewLayout(key, viewRef);\n          }\n        });\n      }, 200);\n    }, []);\n\n    const handleHeaderContainerLayout = useCallback((height: number) => {\n      headerHeight.value = withTiming(height, {\n        duration: fixedHeaderHeight.value === 0 ? 0 : 10,\n      });\n      fixedHeaderHeight.value = height;\n      // Try refresh sticky positions\n      debounceRefreshStickyPositions();\n    }, []);\n\n    const handleContainerHeight = useCallback((height: number) => {\n      containerHeight.value = height;\n    }, []);\n\n    const context = useMemo(() => {\n      return {\n        collapse: (animated?: boolean) =>\n          collapsibleHandlers.current?.collapse(animated),\n        expand: () => collapsibleHandlers.current?.expand(),\n        scrollTo: (offset: number, animate?: boolean) =>\n          collapsibleHandlers.current?.scrollTo(offset, animate),\n        scrollToIndex: (params: any) =>\n          collapsibleHandlers.current?.scrollToIndex(params),\n        headerHeight,\n        scrollY,\n        headerCollapsed,\n      };\n    }, [scrollY, headerHeight, headerCollapsed]);\n\n    const internalContext = useMemo(\n      () => ({\n        scrollViewRef,\n        containerRef,\n        handleStickyViewLayout,\n        handleHeaderContainerLayout,\n        setCollapsibleHandlers,\n        handleContainerHeight,\n        firstStickyViewY,\n        stickyViewTops,\n        stickyViewPositions,\n        fixedHeaderHeight,\n        contentMinHeight,\n      }),\n      [\n        setCollapsibleHandlers,\n        handleStickyViewLayout,\n        handleHeaderContainerLayout,\n        handleContainerHeight,\n        firstStickyViewY,\n        stickyViewTops,\n        stickyViewPositions,\n        fixedHeaderHeight,\n        contentMinHeight,\n      ]\n    );\n\n    return (\n      <CollapsibleContext.Provider value={context}>\n        <InternalCollapsibleContext.Provider value={internalContext}>\n          <CollapsibleHeaderProvider>\n            <PullToRefreshProvider>\n              {/** @ts-ignore */}\n              <Component {...props} />\n            </PullToRefreshProvider>\n          </CollapsibleHeaderProvider>\n        </InternalCollapsibleContext.Provider>\n      </CollapsibleContext.Provider>\n    );\n  };\n}\n"]}

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

@@ -0,0 +1 @@
+export default function CollapsibleHeaderConsumer(): JSX.Element;

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 declare type Props = {
     children: ReactNode;
     containerStyle?: StyleProp<ViewStyle>;
 };
-export default function CollapsibleHeaderContainer({ children, containerStyle, }: Props): JSX.Element;
+export default function CollapsibleHeaderContainer({ children }: Props): null;
 export {};

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

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export default function CollapsibleHeaderProvider({ children, }: {
+    children: ReactNode;
+}): JSX.Element;

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export declare type HeaderItem = {
+    key: string;
+    children: ReactNode;
+};
+declare type CollapsibleContextHeaderType = {
+    headers: HeaderItem[];
+    mount: (key: string, header: ReactNode) => void;
+    update: (key: string, header: ReactNode) => void;
+    unmount: (key: string) => void;
+};
+export declare const CollapsibleHeaderContext: import("react").Context<CollapsibleContextHeaderType>;
+export default function useCollapsibleHeaderContext(): CollapsibleContextHeaderType;
+export {};

package/lib/typescript/types.d.ts

@@ -34,7 +34,7 @@ export declare type CollapsibleContextInternalType = {
     fixedHeaderHeight: Animated.SharedValue<number>;
     handleContainerHeight: (height: number) => void;
     handleStickyViewLayout: (viewKey: string, viewRef?: React.RefObject<View>) => void;
-    handleHeaderContainerLayout: (viewKey: string, height?: number) => void;
+    handleHeaderContainerLayout: (height: number) => void;
     setCollapsibleHandlers: (handlers: CollapsibleHandles) => void;
 };
 export declare type CollapsibleProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r0b0t3d/react-native-collapsible",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Fully customizable collapsible views",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/CollapsibleContainer.tsx

@@ -11,6 +11,7 @@ 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;
@@ -72,8 +73,10 @@ export default function CollapsibleContainer({
         ref={containerRef}
         style={[styles.container, props.style]}
         onLayout={handleContainerLayout}
+        collapsable={false}
       >
         {children}
+        <CollapsibleHeaderConsumer />
       </View>
     </KeyboardAvoidingView>
   );

package/src/components/header/CollapsibleHeaderConsumer.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback } from 'react';
+import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
+import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated';
+import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import { LayoutChangeEvent, StyleSheet } from 'react-native';
+
+export default function CollapsibleHeaderConsumer() {
+  const { headers } = useCollapsibleHeaderContext();
+  const { handleHeaderContainerLayout } = useInternalCollapsibleContext();
+  const { scrollY, headerHeight } = useCollapsibleContext();
+
+  const headerTranslate = useDerivedValue(
+    () =>
+      interpolate(
+        scrollY.value,
+        // FIXME: can improve by geting maxY value of header and sticky views
+        [-250, 0, 100000],
+        [250, 0, -100000],
+        Animated.Extrapolate.CLAMP
+      ),
+    []
+  );
+
+  const headerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: headerTranslate.value }],
+    };
+  }, [headerHeight, headerTranslate]);
+
+  const handleHeaderLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }: LayoutChangeEvent) => {
+      handleHeaderContainerLayout(height);
+    },
+    [handleHeaderContainerLayout]
+  );
+
+  return (
+    <Animated.View
+      onLayout={handleHeaderLayout}
+      style={[styles.container, headerStyle]}
+      pointerEvents="box-none"
+    >
+      {headers.map((item) => item.children)}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+  },
+});

package/src/components/header/CollapsibleHeaderContainer.tsx

@@ -1,21 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
-import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
-import {
-  LayoutChangeEvent,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-import Animated, {
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-} from 'react-native-reanimated';
-import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import { ReactNode, useEffect, useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
 
 type Props = {
   children: ReactNode;
@@ -24,76 +10,21 @@ type Props = {
 
 let key = 0;
 
-export default function CollapsibleHeaderContainer({
-  children,
-  containerStyle,
-}: Props) {
+export default function CollapsibleHeaderContainer({ children }: Props) {
   const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
-  const { scrollY } = useCollapsibleContext();
-  const { handleHeaderContainerLayout } = useInternalCollapsibleContext();
-  const headerHeight = useSharedValue(0);
+  const { mount, unmount, update } = useCollapsibleHeaderContext();
 
   useEffect(() => {
-    return () => handleHeaderContainerLayout(contentKey, undefined);
-  }, []);
+    mount(contentKey, children);
 
-  const handleHeaderLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { height },
-      },
-    }: LayoutChangeEvent) => {
-      headerHeight.value = height;
-      handleHeaderContainerLayout(contentKey, height);
-    },
-    [contentKey]
-  );
-
-  const headerTranslate = useDerivedValue(
-    () =>
-      interpolate(
-        scrollY.value,
-        // FIXME: can improve by geting maxY value of header and sticky views
-        [-250, 0, 100000],
-        [250, 0, -100000],
-        Animated.Extrapolate.CLAMP
-      ),
-    []
-  );
-
-  const headerStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: headerTranslate.value }],
-      minHeight: headerHeight.value,
+    return () => {
+      unmount(contentKey);
     };
-  }, [headerHeight, headerTranslate]);
+  }, [contentKey]);
 
-  const internalStyle = useMemo(() => {
-    return {
-      zIndex: 100000 - key,
-    };
-  }, []);
+  useEffect(() => {
+    update(contentKey, children);
+  }, [children]);
 
-  return (
-    <Animated.View
-      style={[headerStyle, internalStyle]}
-      pointerEvents="box-none"
-    >
-      <View
-        key={contentKey}
-        onLayout={handleHeaderLayout}
-        pointerEvents="box-none"
-        style={[styles.container, containerStyle]}
-      >
-        {children}
-      </View>
-    </Animated.View>
-  );
+  return null;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-    marginTop: Platform.OS === 'android' ? -1 : 0,
-  },
-});

package/src/components/header/CollapsibleHeaderProvider.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable no-shadow */
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  CollapsibleHeaderContext,
+  HeaderItem,
+} from '../../hooks/useCollapsibleHeaderContext';
+
+export default function CollapsibleHeaderProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [headers, setHeaders] = useState<HeaderItem[]>([]);
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const mount = useCallback((key: string, children: ReactNode) => {
+    setHeaders((prev) => [...prev, { key, children }]);
+  }, []);
+
+  const unmount = useCallback((key: string) => {
+    setHeaders((prev) => prev.filter((h) => h.key !== key));
+  }, []);
+
+  const update = useCallback((key: string, children: ReactNode) => {
+    if (!mounted.current) {
+      return;
+    }
+    setHeaders((prev) =>
+      prev.map((item) => {
+        if (item.key === key) {
+          return {
+            ...item,
+            children,
+          };
+        }
+        return item;
+      })
+    );
+  }, []);
+
+  const context = useMemo(
+    () => ({
+      headers,
+      mount,
+      unmount,
+      update,
+    }),
+    [headers, mount, unmount, update]
+  );
+
+  return (
+    <CollapsibleHeaderContext.Provider value={context}>
+      {children}
+    </CollapsibleHeaderContext.Provider>
+  );
+}

package/src/hooks/useCollapsibleHeaderContext.ts

@@ -0,0 +1,22 @@
+import { createContext, ReactNode, useContext } 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;
+};
+
+export const CollapsibleHeaderContext =
+  // @ts-ignore
+  createContext<CollapsibleContextHeaderType>({});
+
+export default function useCollapsibleHeaderContext() {
+  const ctx = useContext(CollapsibleHeaderContext);
+  if (!ctx) {
+    throw new Error('Component should be wrapped CollapsibleHeaderProvider');
+  }
+  return ctx;
+}