@r0b0t3d/react-native-collapsible 1.3.3 → 1.3.5-alpha.0

package/lib/commonjs/withCollapsibleContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["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"]}
+{"version":3,"sources":["withCollapsibleContext.tsx"],"names":["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 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            {/** @ts-ignore */}\n            <Component {...props} />\n          </CollapsibleHeaderProvider>\n        </InternalCollapsibleContext.Provider>\n      </CollapsibleContext.Provider>\n    );\n  };\n}\n"]}

package/lib/module/components/CollapsibleContainer.js

@@ -6,7 +6,6 @@ import { KeyboardAvoidingView, StyleSheet, View } from 'react-native';
 import useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';
 import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
 import useCollapsibleContext from '../hooks/useCollapsibleContext';
-import CollapsibleHeaderConsumer from './header/CollapsibleHeaderConsumer';
 export default function CollapsibleContainer({
   children,
   keyboardAvoidingViewProps,
@@ -55,7 +54,7 @@ export default function CollapsibleContainer({
     style: [styles.container, props.style],
     onLayout: handleContainerLayout,
     collapsable: false
-  }), children, /*#__PURE__*/React.createElement(CollapsibleHeaderConsumer, null)));
+  }), children));
 }
 const styles = StyleSheet.create({
   container: {

package/lib/module/components/CollapsibleContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["React","useCallback","useRef","KeyboardAvoidingView","StyleSheet","View","useKeyboardShowEvent","useInternalCollapsibleContext","useCollapsibleContext","CollapsibleHeaderConsumer","CollapsibleContainer","children","keyboardAvoidingViewProps","textInputRefs","props","containerRef","handleContainerHeight","scrollY","scrollTo","containerHeight","some","ref","isFocusedFunc","current","isFocused","measureLayout","_left","top","_width","height","value","extraOffset","keyboardVerticalOffset","handleContainerLayout","layout","nativeEvent","styles","container","style","create","flex","overflow"],"mappings":";;AAAA;AACA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,MAA7B,QAA2C,OAA3C;AACA,SACEC,oBADF,EAIEC,UAJF,EAKEC,IALF,QAOO,cAPP;AAQA,OAAOC,oBAAP,MAAiC,+BAAjC;AACA,OAAOC,6BAAP,MAA0C,wCAA1C;AACA,OAAOC,qBAAP,MAAkC,gCAAlC;AACA,OAAOC,yBAAP,MAAsC,oCAAtC;AAQA,eAAe,SAASC,oBAAT,CAA8B;AAC3CC,EAAAA,QAD2C;AAE3CC,EAAAA,yBAF2C;AAG3CC,EAAAA,aAAa,GAAG,EAH2B;AAI3C,KAAGC;AAJwC,CAA9B,EAKL;AACR,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MACJT,6BAA6B,EAD/B;AAEA,QAAM;AAAEU,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAwBV,qBAAqB,EAAnD;AAEA,QAAMW,eAAe,GAAGjB,MAAM,CAAC,CAAD,CAA9B;AAEAI,EAAAA,oBAAoB,CAAC,MAAM;AACzBO,IAAAA,aAAa,CAACO,IAAd,CAAoBC,GAAD,IAAS;AAC1B,YAAMC,aAAa,GAAGD,GAAG,CAACE,OAAJ,CAAYC,SAAlC;AACA,YAAMA,SAAS,GACbF,aAAa,IAAI,OAAOA,aAAP,KAAyB,UAA1C,GACIA,aAAa,EADjB,GAEIA,aAHN;;AAIA,UAAIE,SAAJ,EAAe;AACbH,QAAAA,GAAG,CAACE,OAAJ,CAAYE,aAAZ,EACE;AACAV,QAAAA,YAAY,CAACQ,OAFf,EAGE,CAACG,KAAD,EAAgBC,GAAhB,EAA6BC,MAA7B,EAA6CC,MAA7C,KAAgE;AAC9D,cAAIF,GAAG,GAAGE,MAAN,GAAeZ,OAAO,CAACa,KAAvB,GAA+BX,eAAe,CAACI,OAAnD,EAA4D;AAAA;;AAC1D,kBAAMQ,WAAW,4BACfnB,yBADe,aACfA,yBADe,uBACfA,yBAAyB,CAAEoB,sBADZ,yEACsC,EADvD;AAEAd,YAAAA,QAAQ,CAACS,GAAG,GAAGE,MAAN,GAAeE,WAAf,GAA6BZ,eAAe,CAACI,OAA9C,CAAR;AACD;AACF,SATH,EAUE,MAAM,CAAE,CAVV;AAYD;;AACD,aAAOC,SAAP;AACD,KArBD;AAsBD,GAvBmB,CAApB;AAyBA,QAAMS,qBAAqB,GAAGhC,WAAW,CAAEiC,MAAD,IAA+B;AACvE,UAAML,MAAM,GAAGK,MAAM,CAACC,WAAP,CAAmBD,MAAnB,CAA0BL,MAAzC;AACAV,IAAAA,eAAe,CAACI,OAAhB,GAA0BM,MAA1B;AACAb,IAAAA,qBAAqB,CAACa,MAAD,CAArB;AACD,GAJwC,EAItC,EAJsC,CAAzC;AAMA,sBACE,oBAAC,oBAAD;AACE,IAAA,KAAK,EAAEO,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAC;AAFX,KAGMzB,yBAHN,gBAKE,oBAAC,IAAD,eACME,KADN;AAEE,IAAA,GAAG,EAAEC,YAFP;AAGE,IAAA,KAAK,EAAE,CAACqB,MAAM,CAACC,SAAR,EAAmBvB,KAAK,CAACwB,KAAzB,CAHT;AAIE,IAAA,QAAQ,EAAEL,qBAJZ;AAKE,IAAA,WAAW,EAAE;AALf,MAOGtB,QAPH,eAQE,oBAAC,yBAAD,OARF,CALF,CADF;AAkBD;AAED,MAAMyB,MAAM,GAAGhC,UAAU,CAACmC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,QAAQ,EAAE;AAFD;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useRef } from 'react';\nimport {\n  KeyboardAvoidingView,\n  KeyboardAvoidingViewProps,\n  LayoutChangeEvent,\n  StyleSheet,\n  View,\n  ViewProps,\n} from 'react-native';\nimport useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';\nimport useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';\nimport useCollapsibleContext from '../hooks/useCollapsibleContext';\nimport CollapsibleHeaderConsumer from './header/CollapsibleHeaderConsumer';\n\ntype Props = Omit<ViewProps, 'ref' | 'onLayout'> & {\n  children: Element;\n  keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;\n  textInputRefs?: any[];\n};\n\nexport default function CollapsibleContainer({\n  children,\n  keyboardAvoidingViewProps,\n  textInputRefs = [],\n  ...props\n}: Props) {\n  const { containerRef, handleContainerHeight } =\n    useInternalCollapsibleContext();\n  const { scrollY, scrollTo } = useCollapsibleContext();\n\n  const containerHeight = useRef(0);\n\n  useKeyboardShowEvent(() => {\n    textInputRefs.some((ref) => {\n      const isFocusedFunc = ref.current.isFocused;\n      const isFocused =\n        isFocusedFunc && typeof isFocusedFunc === 'function'\n          ? isFocusedFunc()\n          : isFocusedFunc;\n      if (isFocused) {\n        ref.current.measureLayout(\n          // @ts-ignore\n          containerRef.current,\n          (_left: number, top: number, _width: number, height: number) => {\n            if (top + height - scrollY.value > containerHeight.current) {\n              const extraOffset =\n                keyboardAvoidingViewProps?.keyboardVerticalOffset ?? 20;\n              scrollTo(top + height + extraOffset - containerHeight.current);\n            }\n          },\n          () => {}\n        );\n      }\n      return isFocused;\n    });\n  });\n\n  const handleContainerLayout = useCallback((layout: LayoutChangeEvent) => {\n    const height = layout.nativeEvent.layout.height;\n    containerHeight.current = height;\n    handleContainerHeight(height);\n  }, []);\n\n  return (\n    <KeyboardAvoidingView\n      style={styles.container}\n      behavior=\"padding\"\n      {...keyboardAvoidingViewProps}\n    >\n      <View\n        {...props}\n        ref={containerRef}\n        style={[styles.container, props.style]}\n        onLayout={handleContainerLayout}\n        collapsable={false}\n      >\n        {children}\n        <CollapsibleHeaderConsumer />\n      </View>\n    </KeyboardAvoidingView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n});\n"]}
+{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["React","useCallback","useRef","KeyboardAvoidingView","StyleSheet","View","useKeyboardShowEvent","useInternalCollapsibleContext","useCollapsibleContext","CollapsibleContainer","children","keyboardAvoidingViewProps","textInputRefs","props","containerRef","handleContainerHeight","scrollY","scrollTo","containerHeight","some","ref","isFocusedFunc","current","isFocused","measureLayout","_left","top","_width","height","value","extraOffset","keyboardVerticalOffset","handleContainerLayout","layout","nativeEvent","styles","container","style","create","flex","overflow"],"mappings":";;AAAA;AACA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,MAA7B,QAA2C,OAA3C;AACA,SACEC,oBADF,EAIEC,UAJF,EAKEC,IALF,QAOO,cAPP;AAQA,OAAOC,oBAAP,MAAiC,+BAAjC;AACA,OAAOC,6BAAP,MAA0C,wCAA1C;AACA,OAAOC,qBAAP,MAAkC,gCAAlC;AAQA,eAAe,SAASC,oBAAT,CAA8B;AAC3CC,EAAAA,QAD2C;AAE3CC,EAAAA,yBAF2C;AAG3CC,EAAAA,aAAa,GAAG,EAH2B;AAI3C,KAAGC;AAJwC,CAA9B,EAKL;AACR,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MACJR,6BAA6B,EAD/B;AAEA,QAAM;AAAES,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAAwBT,qBAAqB,EAAnD;AAEA,QAAMU,eAAe,GAAGhB,MAAM,CAAC,CAAD,CAA9B;AAEAI,EAAAA,oBAAoB,CAAC,MAAM;AACzBM,IAAAA,aAAa,CAACO,IAAd,CAAoBC,GAAD,IAAS;AAC1B,YAAMC,aAAa,GAAGD,GAAG,CAACE,OAAJ,CAAYC,SAAlC;AACA,YAAMA,SAAS,GACbF,aAAa,IAAI,OAAOA,aAAP,KAAyB,UAA1C,GACIA,aAAa,EADjB,GAEIA,aAHN;;AAIA,UAAIE,SAAJ,EAAe;AACbH,QAAAA,GAAG,CAACE,OAAJ,CAAYE,aAAZ,EACE;AACAV,QAAAA,YAAY,CAACQ,OAFf,EAGE,CAACG,KAAD,EAAgBC,GAAhB,EAA6BC,MAA7B,EAA6CC,MAA7C,KAAgE;AAC9D,cAAIF,GAAG,GAAGE,MAAN,GAAeZ,OAAO,CAACa,KAAvB,GAA+BX,eAAe,CAACI,OAAnD,EAA4D;AAAA;;AAC1D,kBAAMQ,WAAW,4BACfnB,yBADe,aACfA,yBADe,uBACfA,yBAAyB,CAAEoB,sBADZ,yEACsC,EADvD;AAEAd,YAAAA,QAAQ,CAACS,GAAG,GAAGE,MAAN,GAAeE,WAAf,GAA6BZ,eAAe,CAACI,OAA9C,CAAR;AACD;AACF,SATH,EAUE,MAAM,CAAE,CAVV;AAYD;;AACD,aAAOC,SAAP;AACD,KArBD;AAsBD,GAvBmB,CAApB;AAyBA,QAAMS,qBAAqB,GAAG/B,WAAW,CAAEgC,MAAD,IAA+B;AACvE,UAAML,MAAM,GAAGK,MAAM,CAACC,WAAP,CAAmBD,MAAnB,CAA0BL,MAAzC;AACAV,IAAAA,eAAe,CAACI,OAAhB,GAA0BM,MAA1B;AACAb,IAAAA,qBAAqB,CAACa,MAAD,CAArB;AACD,GAJwC,EAItC,EAJsC,CAAzC;AAMA,sBACE,oBAAC,oBAAD;AACE,IAAA,KAAK,EAAEO,MAAM,CAACC,SADhB;AAEE,IAAA,QAAQ,EAAC;AAFX,KAGMzB,yBAHN,gBAKE,oBAAC,IAAD,eACME,KADN;AAEE,IAAA,GAAG,EAAEC,YAFP;AAGE,IAAA,KAAK,EAAE,CAACqB,MAAM,CAACC,SAAR,EAAmBvB,KAAK,CAACwB,KAAzB,CAHT;AAIE,IAAA,QAAQ,EAAEL,qBAJZ;AAKE,IAAA,WAAW,EAAE;AALf,MAOGtB,QAPH,CALF,CADF;AAiBD;AAED,MAAMyB,MAAM,GAAG/B,UAAU,CAACkC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,QAAQ,EAAE;AAFD;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useRef } from 'react';\nimport {\n  KeyboardAvoidingView,\n  KeyboardAvoidingViewProps,\n  LayoutChangeEvent,\n  StyleSheet,\n  View,\n  ViewProps,\n} from 'react-native';\nimport useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';\nimport useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';\nimport useCollapsibleContext from '../hooks/useCollapsibleContext';\n\ntype Props = Omit<ViewProps, 'ref' | 'onLayout'> & {\n  children: Element;\n  keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;\n  textInputRefs?: any[];\n};\n\nexport default function CollapsibleContainer({\n  children,\n  keyboardAvoidingViewProps,\n  textInputRefs = [],\n  ...props\n}: Props) {\n  const { containerRef, handleContainerHeight } =\n    useInternalCollapsibleContext();\n  const { scrollY, scrollTo } = useCollapsibleContext();\n\n  const containerHeight = useRef(0);\n\n  useKeyboardShowEvent(() => {\n    textInputRefs.some((ref) => {\n      const isFocusedFunc = ref.current.isFocused;\n      const isFocused =\n        isFocusedFunc && typeof isFocusedFunc === 'function'\n          ? isFocusedFunc()\n          : isFocusedFunc;\n      if (isFocused) {\n        ref.current.measureLayout(\n          // @ts-ignore\n          containerRef.current,\n          (_left: number, top: number, _width: number, height: number) => {\n            if (top + height - scrollY.value > containerHeight.current) {\n              const extraOffset =\n                keyboardAvoidingViewProps?.keyboardVerticalOffset ?? 20;\n              scrollTo(top + height + extraOffset - containerHeight.current);\n            }\n          },\n          () => {}\n        );\n      }\n      return isFocused;\n    });\n  });\n\n  const handleContainerLayout = useCallback((layout: LayoutChangeEvent) => {\n    const height = layout.nativeEvent.layout.height;\n    containerHeight.current = height;\n    handleContainerHeight(height);\n  }, []);\n\n  return (\n    <KeyboardAvoidingView\n      style={styles.container}\n      behavior=\"padding\"\n      {...keyboardAvoidingViewProps}\n    >\n      <View\n        {...props}\n        ref={containerRef}\n        style={[styles.container, props.style]}\n        onLayout={handleContainerLayout}\n        collapsable={false}\n      >\n        {children}\n      </View>\n    </KeyboardAvoidingView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n});\n"]}

package/lib/module/components/CollapsibleView.js

@@ -3,7 +3,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import Animated, { useAnimatedStyle, useSharedValue, withSpring, interpolateColor, interpolate } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, interpolateColor, interpolate, useAnimatedReaction, runOnJS } from 'react-native-reanimated';
 let key = 0;
 export default function CollapsibleView({
   initialState = 'collapsed',
@@ -12,7 +12,8 @@ export default function CollapsibleView({
   children,
   containerStyle,
   collapsedBackgroundColor,
-  expandedBackgroundColor
+  expandedBackgroundColor,
+  onToggle
 }) {
   const actualHeight = useSharedValue(11110);
   const contentKey = useMemo(() => `collapsible-view-${key++}`, []);
@@ -25,7 +26,7 @@ export default function CollapsibleView({
 
     collapseState.value = newValue;
   }, [initialState]);
-  const onToggle = useCallback(() => {
+  const handleToggle = useCallback(() => {
     collapseState.value = withSpring(collapseState.value === 0 ? 1 : 0, {
       overshootClamping: true
     });
@@ -44,7 +45,16 @@ export default function CollapsibleView({
   }), [actualHeight, contentKey]);
   const contentHeight = useAnimatedStyle(() => ({
     height: actualHeight.value > 0 ? actualHeight.value : undefined
-  }), [actualHeight, contentKey]); // @ts-ignore
+  }), [actualHeight, contentKey]);
+  useAnimatedReaction(() => collapseState.value === 0 ? 0 : collapseState.value === 1 ? 1 : 0, (result, prev) => {
+    if (result === prev) {
+      return;
+    }
+
+    if (onToggle) {
+      runOnJS(onToggle)(result === 1);
+    }
+  }); // @ts-ignore
 
   const containerAnimatedStyle = useAnimatedStyle(() => {
     if (collapsedBackgroundColor && expandedBackgroundColor) {
@@ -56,9 +66,9 @@ export default function CollapsibleView({
     return {};
   }, []);
   const headerProps = useMemo(() => ({
-    onToggle,
+    onToggle: handleToggle,
     collapsed: collapseState
-  }), [onToggle, collapseState]);
+  }), [handleToggle, collapseState]);
   return /*#__PURE__*/React.createElement(Animated.View, {
     style: [containerStyle, containerAnimatedStyle],
     pointerEvents: "box-none"

package/lib/module/components/CollapsibleView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleView.tsx"],"names":["React","useCallback","useEffect","useMemo","StyleSheet","Text","TouchableOpacity","View","Animated","useAnimatedStyle","useSharedValue","withSpring","interpolateColor","interpolate","key","CollapsibleView","initialState","collapseState","renderHeader","children","containerStyle","collapsedBackgroundColor","expandedBackgroundColor","actualHeight","contentKey","newValue","value","onToggle","overshootClamping","handleLayout","event","nativeEvent","layout","height","wrapperStyle","damping","stiffness","contentHeight","undefined","containerAnimatedStyle","backgroundColor","headerProps","collapsed","styles","wrapper","content","CollapsibleHeaderText","title","style","titleStyle","icon","iconInitialAngle","iconStyle","rotate","transform","headerContainer","headerTitle","create","overflow","flexDirection","alignItems","flex"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { ReactNode, useCallback, useEffect, useMemo } from 'react';\nimport {\n  LayoutChangeEvent,\n  StyleProp,\n  StyleSheet,\n  Text,\n  TextStyle,\n  TouchableOpacity,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  interpolateColor,\n  interpolate,\n} from 'react-native-reanimated';\n\nexport type CollapsibleHeaderProps = {\n  onToggle: () => void;\n  collapsed: Animated.SharedValue<number>;\n};\n\ntype Props = {\n  initialState?: 'collapsed' | 'expanded';\n  collapseState?: Animated.SharedValue<number>;\n  renderHeader: (props: CollapsibleHeaderProps) => ReactNode;\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n  collapsedBackgroundColor?: string;\n  expandedBackgroundColor?: string;\n  useDynamicLayout?: boolean;\n};\n\nlet key = 0;\nexport default function CollapsibleView({\n  initialState = 'collapsed',\n  collapseState = useSharedValue(0),\n  renderHeader,\n  children,\n  containerStyle,\n  collapsedBackgroundColor,\n  expandedBackgroundColor,\n}: Props) {\n  const actualHeight = useSharedValue(11110);\n  const contentKey = useMemo(() => `collapsible-view-${key++}`, []);\n\n  useEffect(() => {\n    const newValue = initialState === 'collapsed' ? 0 : 1;\n    if (newValue === collapseState.value) {\n      return;\n    }\n    collapseState.value = newValue;\n  }, [initialState]);\n\n  const onToggle = useCallback(() => {\n    collapseState.value = withSpring(collapseState.value === 0 ? 1 : 0, {\n      overshootClamping: true,\n    });\n  }, []);\n\n  const handleLayout = useCallback((event: LayoutChangeEvent) => {\n    if (event.nativeEvent.layout.height >= 0) {\n      actualHeight.value = event.nativeEvent.layout.height;\n    }\n  }, []);\n\n  const wrapperStyle = useAnimatedStyle(\n    () => ({\n      height: withSpring(collapseState.value === 1 ? actualHeight.value : 0, {\n        damping: 5,\n        stiffness: 130,\n        overshootClamping: true,\n      }),\n    }),\n    [actualHeight, contentKey]\n  );\n\n  const contentHeight = useAnimatedStyle(\n    () => ({\n      height: actualHeight.value > 0 ? actualHeight.value : undefined,\n    }),\n    [actualHeight, contentKey]\n  );\n\n  // @ts-ignore\n  const containerAnimatedStyle = useAnimatedStyle(() => {\n    if (collapsedBackgroundColor && expandedBackgroundColor) {\n      return {\n        backgroundColor: interpolateColor(\n          collapseState.value,\n          [0, 1],\n          [collapsedBackgroundColor, expandedBackgroundColor]\n        ),\n      };\n    }\n    return {};\n  }, []);\n\n  const headerProps = useMemo(\n    () => ({ onToggle, collapsed: collapseState }),\n    [onToggle, collapseState]\n  );\n\n  return (\n    <Animated.View\n      style={[containerStyle, containerAnimatedStyle]}\n      pointerEvents=\"box-none\"\n    >\n      <View pointerEvents=\"box-none\">{renderHeader(headerProps)}</View>\n      <Animated.View\n        style={[styles.wrapper, wrapperStyle]}\n        pointerEvents=\"box-none\"\n      >\n        <Animated.View\n          style={[styles.content, contentHeight]}\n          pointerEvents=\"box-none\"\n        >\n          <View\n            key={contentKey}\n            onLayout={handleLayout}\n            pointerEvents=\"box-none\"\n          >\n            {children}\n          </View>\n        </Animated.View>\n      </Animated.View>\n    </Animated.View>\n  );\n}\n\nexport function CollapsibleHeaderText({\n  title,\n  collapsed,\n  onToggle,\n  style,\n  titleStyle,\n  icon,\n  iconInitialAngle = 0,\n  children,\n}: {\n  title: string | Element;\n  style?: StyleProp<ViewStyle>;\n  titleStyle?: StyleProp<TextStyle>;\n  icon?: ReactNode;\n  iconInitialAngle?: number;\n  children?: ReactNode;\n} & CollapsibleHeaderProps) {\n  const iconStyle = useAnimatedStyle(() => {\n    const rotate = interpolate(\n      collapsed.value,\n      [0, 1],\n      [iconInitialAngle, 180]\n    );\n    return {\n      transform: [\n        {\n          rotate: `${rotate}deg`,\n        },\n      ],\n    };\n  }, [iconInitialAngle]);\n\n  return (\n    <TouchableOpacity activeOpacity={0.9} onPress={onToggle} style={style}>\n      <View style={styles.headerContainer}>\n        <Text style={[styles.headerTitle, titleStyle]}>{title}</Text>\n        {icon && <Animated.View style={iconStyle}>{icon}</Animated.View>}\n      </View>\n      {children}\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    overflow: 'hidden',\n  },\n  content: {},\n  headerContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  headerTitle: {\n    flex: 1,\n  },\n});\n"]}
+{"version":3,"sources":["CollapsibleView.tsx"],"names":["React","useCallback","useEffect","useMemo","StyleSheet","Text","TouchableOpacity","View","Animated","useAnimatedStyle","useSharedValue","withSpring","interpolateColor","interpolate","useAnimatedReaction","runOnJS","key","CollapsibleView","initialState","collapseState","renderHeader","children","containerStyle","collapsedBackgroundColor","expandedBackgroundColor","onToggle","actualHeight","contentKey","newValue","value","handleToggle","overshootClamping","handleLayout","event","nativeEvent","layout","height","wrapperStyle","damping","stiffness","contentHeight","undefined","result","prev","containerAnimatedStyle","backgroundColor","headerProps","collapsed","styles","wrapper","content","CollapsibleHeaderText","title","style","titleStyle","icon","iconInitialAngle","iconStyle","rotate","transform","headerContainer","headerTitle","create","overflow","flexDirection","alignItems","flex"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { ReactNode, useCallback, useEffect, useMemo } from 'react';\nimport {\n  LayoutChangeEvent,\n  StyleProp,\n  StyleSheet,\n  Text,\n  TextStyle,\n  TouchableOpacity,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  interpolateColor,\n  interpolate,\n  useAnimatedReaction,\n  runOnJS,\n} from 'react-native-reanimated';\n\nexport type CollapsibleHeaderProps = {\n  onToggle: () => void;\n  collapsed: Animated.SharedValue<number>;\n};\n\ntype Props = {\n  initialState?: 'collapsed' | 'expanded';\n  collapseState?: Animated.SharedValue<number>;\n  renderHeader: (props: CollapsibleHeaderProps) => ReactNode;\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n  collapsedBackgroundColor?: string;\n  expandedBackgroundColor?: string;\n  useDynamicLayout?: boolean;\n  onToggle?: (isExpand: boolean) => void;\n};\n\nlet key = 0;\nexport default function CollapsibleView({\n  initialState = 'collapsed',\n  collapseState = useSharedValue(0),\n  renderHeader,\n  children,\n  containerStyle,\n  collapsedBackgroundColor,\n  expandedBackgroundColor,\n  onToggle,\n}: Props) {\n  const actualHeight = useSharedValue(11110);\n  const contentKey = useMemo(() => `collapsible-view-${key++}`, []);\n\n  useEffect(() => {\n    const newValue = initialState === 'collapsed' ? 0 : 1;\n    if (newValue === collapseState.value) {\n      return;\n    }\n    collapseState.value = newValue;\n  }, [initialState]);\n\n  const handleToggle = useCallback(() => {\n    collapseState.value = withSpring(collapseState.value === 0 ? 1 : 0, {\n      overshootClamping: true,\n    });\n  }, []);\n\n  const handleLayout = useCallback((event: LayoutChangeEvent) => {\n    if (event.nativeEvent.layout.height >= 0) {\n      actualHeight.value = event.nativeEvent.layout.height;\n    }\n  }, []);\n\n  const wrapperStyle = useAnimatedStyle(\n    () => ({\n      height: withSpring(collapseState.value === 1 ? actualHeight.value : 0, {\n        damping: 5,\n        stiffness: 130,\n        overshootClamping: true,\n      }),\n    }),\n    [actualHeight, contentKey]\n  );\n\n  const contentHeight = useAnimatedStyle(\n    () => ({\n      height: actualHeight.value > 0 ? actualHeight.value : undefined,\n    }),\n    [actualHeight, contentKey]\n  );\n\n  useAnimatedReaction(\n    () => (collapseState.value === 0 ? 0 : collapseState.value === 1 ? 1 : 0),\n    (result, prev) => {\n      if (result === prev) {\n        return;\n      }\n      if (onToggle) {\n        runOnJS(onToggle)(result === 1);\n      }\n    }\n  );\n\n  // @ts-ignore\n  const containerAnimatedStyle = useAnimatedStyle(() => {\n    if (collapsedBackgroundColor && expandedBackgroundColor) {\n      return {\n        backgroundColor: interpolateColor(\n          collapseState.value,\n          [0, 1],\n          [collapsedBackgroundColor, expandedBackgroundColor]\n        ),\n      };\n    }\n    return {};\n  }, []);\n\n  const headerProps = useMemo(\n    () => ({ onToggle: handleToggle, collapsed: collapseState }),\n    [handleToggle, collapseState]\n  );\n\n  return (\n    <Animated.View\n      style={[containerStyle, containerAnimatedStyle]}\n      pointerEvents=\"box-none\"\n    >\n      <View pointerEvents=\"box-none\">{renderHeader(headerProps)}</View>\n      <Animated.View\n        style={[styles.wrapper, wrapperStyle]}\n        pointerEvents=\"box-none\"\n      >\n        <Animated.View\n          style={[styles.content, contentHeight]}\n          pointerEvents=\"box-none\"\n        >\n          <View\n            key={contentKey}\n            onLayout={handleLayout}\n            pointerEvents=\"box-none\"\n          >\n            {children}\n          </View>\n        </Animated.View>\n      </Animated.View>\n    </Animated.View>\n  );\n}\n\nexport function CollapsibleHeaderText({\n  title,\n  collapsed,\n  onToggle,\n  style,\n  titleStyle,\n  icon,\n  iconInitialAngle = 0,\n  children,\n}: {\n  title: string | Element;\n  style?: StyleProp<ViewStyle>;\n  titleStyle?: StyleProp<TextStyle>;\n  icon?: ReactNode;\n  iconInitialAngle?: number;\n  children?: ReactNode;\n} & CollapsibleHeaderProps) {\n  const iconStyle = useAnimatedStyle(() => {\n    const rotate = interpolate(\n      collapsed.value,\n      [0, 1],\n      [iconInitialAngle, 180]\n    );\n    return {\n      transform: [\n        {\n          rotate: `${rotate}deg`,\n        },\n      ],\n    };\n  }, [iconInitialAngle]);\n\n  return (\n    <TouchableOpacity activeOpacity={0.9} onPress={onToggle} style={style}>\n      <View style={styles.headerContainer}>\n        <Text style={[styles.headerTitle, titleStyle]}>{title}</Text>\n        {icon && <Animated.View style={iconStyle}>{icon}</Animated.View>}\n      </View>\n      {children}\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    overflow: 'hidden',\n  },\n  content: {},\n  headerContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  headerTitle: {\n    flex: 1,\n  },\n});\n"]}

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

@@ -16,7 +16,7 @@ export default function CollapsibleHeaderConsumer() {
     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), []);
+  [-1000, 0, 100000], [-1000, 0, -100000], Animated.Extrapolate.CLAMP), []);
   const headerStyle = useAnimatedStyle(() => {
     return {
       transform: [{

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

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleHeaderConsumer.tsx"],"names":["React","useCallback","useInternalCollapsibleContext","useCollapsibleHeaderContext","Animated","interpolate","useAnimatedStyle","useDerivedValue","useCollapsibleContext","StyleSheet","CollapsibleHeaderConsumer","headers","handleHeaderContainerLayout","scrollY","headerHeight","headerTranslate","value","Extrapolate","CLAMP","headerStyle","transform","translateY","handleHeaderLayout","nativeEvent","layout","height","styles","container","map","item","children","create","backgroundColor","zIndex"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AACA,OAAOC,2BAAP,MAAwC,yCAAxC;AACA,OAAOC,QAAP,IACEC,WADF,EAEEC,gBAFF,EAGEC,eAHF,QAIO,yBAJP;AAKA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,SAA4BC,UAA5B,QAA8C,cAA9C;AAEA,eAAe,SAASC,yBAAT,GAAqC;AAClD,QAAM;AAAEC,IAAAA;AAAF,MAAcR,2BAA2B,EAA/C;AACA,QAAM;AAAES,IAAAA;AAAF,MAAkCV,6BAA6B,EAArE;AACA,QAAM;AAAEW,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAA4BN,qBAAqB,EAAvD;AAEA,QAAMO,eAAe,GAAGR,eAAe,CACrC,MACEF,WAAW,CACTQ,OAAO,CAACG,KADC,EAET;AACA,GAAC,CAAC,GAAF,EAAO,CAAP,EAAU,MAAV,CAHS,EAIT,CAAC,GAAD,EAAM,CAAN,EAAS,CAAC,MAAV,CAJS,EAKTZ,QAAQ,CAACa,WAAT,CAAqBC,KALZ,CAFwB,EASrC,EATqC,CAAvC;AAYA,QAAMC,WAAW,GAAGb,gBAAgB,CAAC,MAAM;AACzC,WAAO;AACLc,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAEN,eAAe,CAACC;AAA9B,OAAD;AADN,KAAP;AAGD,GAJmC,EAIjC,CAACF,YAAD,EAAeC,eAAf,CAJiC,CAApC;AAMA,QAAMO,kBAAkB,GAAGrB,WAAW,CACpC,CAAC;AACCsB,IAAAA,WAAW,EAAE;AACXC,MAAAA,MAAM,EAAE;AAAEC,QAAAA;AAAF;AADG;AADd,GAAD,KAIyB;AACvBb,IAAAA,2BAA2B,CAACa,MAAD,CAA3B;AACD,GAPmC,EAQpC,CAACb,2BAAD,CARoC,CAAtC;AAWA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,QAAQ,EAAEU,kBADZ;AAEE,IAAA,KAAK,EAAE,CAACI,MAAM,CAACC,SAAR,EAAmBR,WAAnB,CAFT;AAGE,IAAA,aAAa,EAAC;AAHhB,KAKGR,OAAO,CAACiB,GAAR,CAAaC,IAAD,IAAUA,IAAI,CAACC,QAA3B,CALH,CADF;AASD;AAED,MAAMJ,MAAM,GAAGjB,UAAU,CAACsB,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AACTK,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,MAAM,EAAE;AAFC;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n} from 'react-native-reanimated';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nexport default function CollapsibleHeaderConsumer() {\n  const { headers } = useCollapsibleHeaderContext();\n  const { handleHeaderContainerLayout } = useInternalCollapsibleContext();\n  const { scrollY, headerHeight } = useCollapsibleContext();\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    };\n  }, [headerHeight, headerTranslate]);\n\n  const handleHeaderLayout = useCallback(\n    ({\n      nativeEvent: {\n        layout: { height },\n      },\n    }: LayoutChangeEvent) => {\n      handleHeaderContainerLayout(height);\n    },\n    [handleHeaderContainerLayout]\n  );\n\n  return (\n    <Animated.View\n      onLayout={handleHeaderLayout}\n      style={[styles.container, headerStyle]}\n      pointerEvents=\"box-none\"\n    >\n      {headers.map((item) => item.children)}\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    zIndex: 10,\n  },\n});\n"]}
+{"version":3,"sources":["CollapsibleHeaderConsumer.tsx"],"names":["React","useCallback","useInternalCollapsibleContext","useCollapsibleHeaderContext","Animated","interpolate","useAnimatedStyle","useDerivedValue","useCollapsibleContext","StyleSheet","CollapsibleHeaderConsumer","headers","handleHeaderContainerLayout","scrollY","headerHeight","headerTranslate","value","Extrapolate","CLAMP","headerStyle","transform","translateY","handleHeaderLayout","nativeEvent","layout","height","styles","container","map","item","children","create","backgroundColor","zIndex"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AACA,OAAOC,2BAAP,MAAwC,yCAAxC;AACA,OAAOC,QAAP,IACEC,WADF,EAEEC,gBAFF,EAGEC,eAHF,QAIO,yBAJP;AAKA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,SAA4BC,UAA5B,QAA8C,cAA9C;AAEA,eAAe,SAASC,yBAAT,GAAqC;AAClD,QAAM;AAAEC,IAAAA;AAAF,MAAcR,2BAA2B,EAA/C;AACA,QAAM;AAAES,IAAAA;AAAF,MAAkCV,6BAA6B,EAArE;AACA,QAAM;AAAEW,IAAAA,OAAF;AAAWC,IAAAA;AAAX,MAA4BN,qBAAqB,EAAvD;AAEA,QAAMO,eAAe,GAAGR,eAAe,CACrC,MACEF,WAAW,CACTQ,OAAO,CAACG,KADC,EAET;AACA,GAAC,CAAC,IAAF,EAAQ,CAAR,EAAW,MAAX,CAHS,EAIT,CAAC,CAAC,IAAF,EAAQ,CAAR,EAAW,CAAC,MAAZ,CAJS,EAKTZ,QAAQ,CAACa,WAAT,CAAqBC,KALZ,CAFwB,EASrC,EATqC,CAAvC;AAYA,QAAMC,WAAW,GAAGb,gBAAgB,CAAC,MAAM;AACzC,WAAO;AACLc,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAEN,eAAe,CAACC;AAA9B,OAAD;AADN,KAAP;AAGD,GAJmC,EAIjC,CAACF,YAAD,EAAeC,eAAf,CAJiC,CAApC;AAMA,QAAMO,kBAAkB,GAAGrB,WAAW,CACpC,CAAC;AACCsB,IAAAA,WAAW,EAAE;AACXC,MAAAA,MAAM,EAAE;AAAEC,QAAAA;AAAF;AADG;AADd,GAAD,KAIyB;AACvBb,IAAAA,2BAA2B,CAACa,MAAD,CAA3B;AACD,GAPmC,EAQpC,CAACb,2BAAD,CARoC,CAAtC;AAWA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,QAAQ,EAAEU,kBADZ;AAEE,IAAA,KAAK,EAAE,CAACI,MAAM,CAACC,SAAR,EAAmBR,WAAnB,CAFT;AAGE,IAAA,aAAa,EAAC;AAHhB,KAKGR,OAAO,CAACiB,GAAR,CAAaC,IAAD,IAAUA,IAAI,CAACC,QAA3B,CALH,CADF;AASD;AAED,MAAMJ,MAAM,GAAGjB,UAAU,CAACsB,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AACTK,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,MAAM,EAAE;AAFC;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n} from 'react-native-reanimated';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport { LayoutChangeEvent, StyleSheet } from 'react-native';\n\nexport default function CollapsibleHeaderConsumer() {\n  const { headers } = useCollapsibleHeaderContext();\n  const { handleHeaderContainerLayout } = useInternalCollapsibleContext();\n  const { scrollY, headerHeight } = useCollapsibleContext();\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        [-1000, 0, 100000],\n        [-1000, 0, -100000],\n        Animated.Extrapolate.CLAMP\n      ),\n    []\n  );\n\n  const headerStyle = useAnimatedStyle(() => {\n    return {\n      transform: [{ translateY: headerTranslate.value }],\n    };\n  }, [headerHeight, headerTranslate]);\n\n  const handleHeaderLayout = useCallback(\n    ({\n      nativeEvent: {\n        layout: { height },\n      },\n    }: LayoutChangeEvent) => {\n      handleHeaderContainerLayout(height);\n    },\n    [handleHeaderContainerLayout]\n  );\n\n  return (\n    <Animated.View\n      onLayout={handleHeaderLayout}\n      style={[styles.container, headerStyle]}\n      pointerEvents=\"box-none\"\n    >\n      {headers.map((item) => item.children)}\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    zIndex: 10,\n  },\n});\n"]}

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

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useMemo } from 'react';
-import { View } from 'react-native';
+import React, { Fragment, useEffect, useMemo } from 'react';
 import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
 let key = 0;
 export default function CollapsibleHeaderContainer({
-  children
+  children,
+  containerStyle
 }) {
   const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
   const {
@@ -12,18 +12,11 @@ export default function CollapsibleHeaderContainer({
     unmount,
     update
   } = useCollapsibleHeaderContext();
-  const internalStyle = useMemo(() => {
-    return {
-      zIndex: 100000 - key
-    };
-  }, []);
   const content = useMemo(() => {
-    return /*#__PURE__*/React.createElement(View, {
-      key: contentKey,
-      style: internalStyle,
-      pointerEvents: "box-none"
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: contentKey
     }, children);
-  }, [children]);
+  }, [children, containerStyle]);
   useEffect(() => {
     mount(contentKey, content);
     return () => {

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

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["React","useEffect","useMemo","View","useCollapsibleHeaderContext","key","CollapsibleHeaderContainer","children","contentKey","mount","unmount","update","internalStyle","zIndex","content"],"mappings":"AAAA;AACA,OAAOA,KAAP,IAA2BC,SAA3B,EAAsCC,OAAtC,QAAqD,OAArD;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,OAAOC,2BAAP,MAAwC,yCAAxC;AAOA,IAAIC,GAAG,GAAG,CAAV;AAEA,eAAe,SAASC,0BAAT,CAAoC;AAAEC,EAAAA;AAAF,CAApC,EAAyD;AACtE,QAAMC,UAAU,GAAGN,OAAO,CAAC,MAAO,sBAAqBG,GAAG,EAAG,EAAnC,EAAsC,EAAtC,CAA1B;AACA,QAAM;AAAEI,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6BP,2BAA2B,EAA9D;AAEA,QAAMQ,aAAa,GAAGV,OAAO,CAAC,MAAM;AAClC,WAAO;AACLW,MAAAA,MAAM,EAAE,SAASR;AADZ,KAAP;AAGD,GAJ4B,EAI1B,EAJ0B,CAA7B;AAMA,QAAMS,OAAO,GAAGZ,OAAO,CAAC,MAAM;AAC5B,wBACE,oBAAC,IAAD;AAAM,MAAA,GAAG,EAAEM,UAAX;AAAuB,MAAA,KAAK,EAAEI,aAA9B;AAA6C,MAAA,aAAa,EAAC;AAA3D,OACGL,QADH,CADF;AAKD,GANsB,EAMpB,CAACA,QAAD,CANoB,CAAvB;AAQAN,EAAAA,SAAS,CAAC,MAAM;AACdQ,IAAAA,KAAK,CAACD,UAAD,EAAaM,OAAb,CAAL;AAEA,WAAO,MAAM;AACXJ,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GANQ,EAMN,CAACA,UAAD,CANM,CAAT;AAQAP,EAAAA,SAAS,CAAC,MAAM;AACdU,IAAAA,MAAM,CAACH,UAAD,EAAaM,OAAb,CAAN;AACD,GAFQ,EAEN,CAACA,OAAD,CAFM,CAAT;AAIA,SAAO,IAAP;AACD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { ReactNode, useEffect, useMemo } from 'react';\nimport { View, 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  const internalStyle = useMemo(() => {\n    return {\n      zIndex: 100000 - key,\n    };\n  }, []);\n\n  const content = useMemo(() => {\n    return (\n      <View key={contentKey} style={internalStyle} pointerEvents=\"box-none\">\n        {children}\n      </View>\n    );\n  }, [children]);\n\n  useEffect(() => {\n    mount(contentKey, content);\n\n    return () => {\n      unmount(contentKey);\n    };\n  }, [contentKey]);\n\n  useEffect(() => {\n    update(contentKey, content);\n  }, [content]);\n\n  return null;\n}\n"]}
+{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["React","Fragment","useEffect","useMemo","useCollapsibleHeaderContext","key","CollapsibleHeaderContainer","children","containerStyle","contentKey","mount","unmount","update","content"],"mappings":"AAAA;AAEA,OAAOA,KAAP,IAAgBC,QAAhB,EAAqCC,SAArC,EAAgDC,OAAhD,QAA+D,OAA/D;AACA,OAAOC,2BAAP,MAAwC,yCAAxC;AAOA,IAAIC,GAAG,GAAG,CAAV;AAEA,eAAe,SAASC,0BAAT,CAAoC;AACjDC,EAAAA,QADiD;AAEjDC,EAAAA;AAFiD,CAApC,EAGL;AACR,QAAMC,UAAU,GAAGN,OAAO,CAAC,MAAO,sBAAqBE,GAAG,EAAG,EAAnC,EAAsC,EAAtC,CAA1B;AACA,QAAM;AAAEK,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6BR,2BAA2B,EAA9D;AAEA,QAAMS,OAAO,GAAGV,OAAO,CAAC,MAAM;AAC5B,wBAAO,oBAAC,QAAD;AAAU,MAAA,GAAG,EAAEM;AAAf,OAA4BF,QAA5B,CAAP;AACD,GAFsB,EAEpB,CAACA,QAAD,EAAWC,cAAX,CAFoB,CAAvB;AAIAN,EAAAA,SAAS,CAAC,MAAM;AACdQ,IAAAA,KAAK,CAACD,UAAD,EAAaI,OAAb,CAAL;AAEA,WAAO,MAAM;AACXF,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GANQ,EAMN,CAACA,UAAD,CANM,CAAT;AAQAP,EAAAA,SAAS,CAAC,MAAM;AACdU,IAAAA,MAAM,CAACH,UAAD,EAAaI,OAAb,CAAN;AACD,GAFQ,EAEN,CAACA,OAAD,CAFM,CAAT;AAIA,SAAO,IAAP;AACD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport React, { Fragment, ReactNode, useEffect, useMemo } from 'react';\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({\n  children,\n  containerStyle,\n}: Props) {\n  const contentKey = useMemo(() => `collapsible-header-${key++}`, []);\n  const { mount, unmount, update } = useCollapsibleHeaderContext();\n\n  const content = useMemo(() => {\n    return <Fragment key={contentKey}>{children}</Fragment>;\n  }, [children, containerStyle]);\n\n  useEffect(() => {\n    mount(contentKey, content);\n\n    return () => {\n      unmount(contentKey);\n    };\n  }, [contentKey]);\n\n  useEffect(() => {\n    update(contentKey, content);\n  }, [content]);\n\n  return null;\n}\n"]}

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import useCollapsibleContext from '../../hooks/useCollapsibleContext';
 import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
 import Animated, { Extrapolate, interpolate, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
@@ -52,7 +52,8 @@ export default function StickyView({
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
-    zIndex: 10
+    zIndex: 10,
+    marginTop: Platform.OS === 'android' ? -1 : 0
   }
 });
 //# sourceMappingURL=StickyView.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["StickyView.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","StyleSheet","useCollapsibleContext","useInternalCollapsibleContext","Animated","Extrapolate","interpolate","useAnimatedStyle","useDerivedValue","stickyKey","StickyView","children","style","key","viewRef","handleStickyViewLayout","stickyViewTops","stickyViewPositions","scrollY","undefined","handleLayout","translateY","top","value","layoutValues","inputMid","CLAMP","animatedStyle","transform","styles","container","create","backgroundColor","zIndex"],"mappings":"AAAA;AACA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,OAAxC,EAAiDC,MAAjD,QAA+D,OAA/D;AACA,SAAoBC,UAApB,QAAuD,cAAvD;AACA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AACA,OAAOC,QAAP,IACEC,WADF,EAEEC,WAFF,EAGEC,gBAHF,EAIEC,eAJF,QAKO,yBALP;AAYA,IAAIC,SAAS,GAAG,CAAhB;AAEA,eAAe,SAASC,UAAT,CAAoB;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAApB,EAAgD;AAC7D,QAAMC,GAAG,GAAGd,OAAO,CAAC,MAAO,UAASU,SAAS,EAAG,EAA7B,EAAgC,EAAhC,CAAnB;AACA,QAAMK,OAAO,GAAGd,MAAM,CAAO,IAAP,CAAtB;AACA,QAAM;AAAEe,IAAAA,sBAAF;AAA0BC,IAAAA,cAA1B;AAA0CC,IAAAA;AAA1C,MACJd,6BAA6B,EAD/B;AAEA,QAAM;AAAEe,IAAAA;AAAF,MAAchB,qBAAqB,EAAzC;AAEAJ,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAMiB,sBAAsB,CAACF,GAAD,EAAMM,SAAN,CAAnC;AACD,GAFQ,EAEN,EAFM,CAAT;AAIA,QAAMC,YAAY,GAAGvB,WAAW,CAAC,MAAM;AACrCkB,IAAAA,sBAAsB,CAACF,GAAD,EAAMC,OAAN,CAAtB;AACD,GAF+B,EAE7B,CAACD,GAAD,CAF6B,CAAhC;AAIA,QAAMQ,UAAU,GAAGb,eAAe,CAAC,MAAM;AACvC,UAAMc,GAAG,GAAGN,cAAc,CAACO,KAAf,CAAqBV,GAArB,KAA6B,CAAzC;AACA,UAAMW,YAAY,GAAGP,mBAAmB,CAACM,KAApB,CAA0BV,GAA1B,KAAkC;AAAES,MAAAA,GAAG,EAAE;AAAP,KAAvD;AACA,UAAMG,QAAQ,GAAGD,YAAY,CAACF,GAAb,GAAmBA,GAApC;AACA,WAAOhB,WAAW,CAChBY,OAAO,CAACK,KADQ,EAEhB,CAAC,CAAD,EAAIE,QAAJ,EAAcA,QAAQ,GAAG,MAAzB,CAFgB,EAGhB,CAAC,CAAD,EAAI,CAAJ,EAAO,MAAP,CAHgB,EAIhBpB,WAAW,CAACqB,KAJI,CAAlB;AAMD,GAViC,EAU/B,EAV+B,CAAlC;AAYA,QAAMC,aAAa,GAAGpB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLqB,MAAAA,SAAS,EAAE,CACT;AACEP,QAAAA,UAAU,EAAEA,UAAU,CAACE;AADzB,OADS;AADN,KAAP;AAOD,GARqC,EAQnC,EARmC,CAAtC;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,GAAG,EAAEV,GADP,CAEE;AAFF;AAGE,IAAA,GAAG,EAAEC,OAHP;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,KAAK,EAAE,CAACS,MAAM,CAACC,SAAR,EAAmBH,aAAnB,EAAkCf,KAAlC,CALT;AAME,IAAA,aAAa,EAAC;AANhB,KAQGD,QARH,CADF;AAYD;AAED,MAAMkB,MAAM,GAAG5B,UAAU,CAAC8B,MAAX,CAAkB;AAC/BD,EAAAA,SAAS,EAAE;AACTE,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,MAAM,EAAE;AAFC;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport Animated, {\n  Extrapolate,\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n} from 'react-native-reanimated';\n\ntype Props = {\n  style?: StyleProp<ViewStyle>;\n  children: Element;\n};\n\nlet stickyKey = 0;\n\nexport default function StickyView({ children, style }: Props) {\n  const key = useMemo(() => `sticky_${stickyKey++}`, []);\n  const viewRef = useRef<View>(null);\n  const { handleStickyViewLayout, stickyViewTops, stickyViewPositions } =\n    useInternalCollapsibleContext();\n  const { scrollY } = useCollapsibleContext();\n\n  useEffect(() => {\n    return () => handleStickyViewLayout(key, undefined);\n  }, []);\n\n  const handleLayout = useCallback(() => {\n    handleStickyViewLayout(key, viewRef);\n  }, [key]);\n\n  const translateY = useDerivedValue(() => {\n    const top = stickyViewTops.value[key] || 0;\n    const layoutValues = stickyViewPositions.value[key] || { top: 0 };\n    const inputMid = layoutValues.top - top;\n    return interpolate(\n      scrollY.value,\n      [0, inputMid, inputMid + 100000],\n      [0, 0, 100000],\n      Extrapolate.CLAMP\n    );\n  }, []);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      transform: [\n        {\n          translateY: translateY.value,\n        },\n      ],\n    };\n  }, []);\n\n  return (\n    <Animated.View\n      key={key}\n      // @ts-ignore\n      ref={viewRef}\n      onLayout={handleLayout}\n      style={[styles.container, animatedStyle, style]}\n      pointerEvents=\"box-none\"\n    >\n      {children}\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    zIndex: 10,\n  },\n});\n"]}
+{"version":3,"sources":["StickyView.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","Platform","StyleSheet","useCollapsibleContext","useInternalCollapsibleContext","Animated","Extrapolate","interpolate","useAnimatedStyle","useDerivedValue","stickyKey","StickyView","children","style","key","viewRef","handleStickyViewLayout","stickyViewTops","stickyViewPositions","scrollY","undefined","handleLayout","translateY","top","value","layoutValues","inputMid","CLAMP","animatedStyle","transform","styles","container","create","backgroundColor","zIndex","marginTop","OS"],"mappings":"AAAA;AACA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,OAAxC,EAAiDC,MAAjD,QAA+D,OAA/D;AACA,SAASC,QAAT,EAA8BC,UAA9B,QAAiE,cAAjE;AACA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AACA,OAAOC,QAAP,IACEC,WADF,EAEEC,WAFF,EAGEC,gBAHF,EAIEC,eAJF,QAKO,yBALP;AAYA,IAAIC,SAAS,GAAG,CAAhB;AAEA,eAAe,SAASC,UAAT,CAAoB;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAApB,EAAgD;AAC7D,QAAMC,GAAG,GAAGf,OAAO,CAAC,MAAO,UAASW,SAAS,EAAG,EAA7B,EAAgC,EAAhC,CAAnB;AACA,QAAMK,OAAO,GAAGf,MAAM,CAAO,IAAP,CAAtB;AACA,QAAM;AAAEgB,IAAAA,sBAAF;AAA0BC,IAAAA,cAA1B;AAA0CC,IAAAA;AAA1C,MACJd,6BAA6B,EAD/B;AAEA,QAAM;AAAEe,IAAAA;AAAF,MAAchB,qBAAqB,EAAzC;AAEAL,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAMkB,sBAAsB,CAACF,GAAD,EAAMM,SAAN,CAAnC;AACD,GAFQ,EAEN,EAFM,CAAT;AAIA,QAAMC,YAAY,GAAGxB,WAAW,CAAC,MAAM;AACrCmB,IAAAA,sBAAsB,CAACF,GAAD,EAAMC,OAAN,CAAtB;AACD,GAF+B,EAE7B,CAACD,GAAD,CAF6B,CAAhC;AAIA,QAAMQ,UAAU,GAAGb,eAAe,CAAC,MAAM;AACvC,UAAMc,GAAG,GAAGN,cAAc,CAACO,KAAf,CAAqBV,GAArB,KAA6B,CAAzC;AACA,UAAMW,YAAY,GAAGP,mBAAmB,CAACM,KAApB,CAA0BV,GAA1B,KAAkC;AAAES,MAAAA,GAAG,EAAE;AAAP,KAAvD;AACA,UAAMG,QAAQ,GAAGD,YAAY,CAACF,GAAb,GAAmBA,GAApC;AACA,WAAOhB,WAAW,CAChBY,OAAO,CAACK,KADQ,EAEhB,CAAC,CAAD,EAAIE,QAAJ,EAAcA,QAAQ,GAAG,MAAzB,CAFgB,EAGhB,CAAC,CAAD,EAAI,CAAJ,EAAO,MAAP,CAHgB,EAIhBpB,WAAW,CAACqB,KAJI,CAAlB;AAMD,GAViC,EAU/B,EAV+B,CAAlC;AAYA,QAAMC,aAAa,GAAGpB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLqB,MAAAA,SAAS,EAAE,CACT;AACEP,QAAAA,UAAU,EAAEA,UAAU,CAACE;AADzB,OADS;AADN,KAAP;AAOD,GARqC,EAQnC,EARmC,CAAtC;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,GAAG,EAAEV,GADP,CAEE;AAFF;AAGE,IAAA,GAAG,EAAEC,OAHP;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,KAAK,EAAE,CAACS,MAAM,CAACC,SAAR,EAAmBH,aAAnB,EAAkCf,KAAlC,CALT;AAME,IAAA,aAAa,EAAC;AANhB,KAQGD,QARH,CADF;AAYD;AAED,MAAMkB,MAAM,GAAG5B,UAAU,CAAC8B,MAAX,CAAkB;AAC/BD,EAAAA,SAAS,EAAE;AACTE,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,MAAM,EAAE,EAFC;AAGTC,IAAAA,SAAS,EAAElC,QAAQ,CAACmC,EAAT,KAAgB,SAAhB,GAA4B,CAAC,CAA7B,GAAiC;AAHnC;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport Animated, {\n  Extrapolate,\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n} from 'react-native-reanimated';\n\ntype Props = {\n  style?: StyleProp<ViewStyle>;\n  children: Element;\n};\n\nlet stickyKey = 0;\n\nexport default function StickyView({ children, style }: Props) {\n  const key = useMemo(() => `sticky_${stickyKey++}`, []);\n  const viewRef = useRef<View>(null);\n  const { handleStickyViewLayout, stickyViewTops, stickyViewPositions } =\n    useInternalCollapsibleContext();\n  const { scrollY } = useCollapsibleContext();\n\n  useEffect(() => {\n    return () => handleStickyViewLayout(key, undefined);\n  }, []);\n\n  const handleLayout = useCallback(() => {\n    handleStickyViewLayout(key, viewRef);\n  }, [key]);\n\n  const translateY = useDerivedValue(() => {\n    const top = stickyViewTops.value[key] || 0;\n    const layoutValues = stickyViewPositions.value[key] || { top: 0 };\n    const inputMid = layoutValues.top - top;\n    return interpolate(\n      scrollY.value,\n      [0, inputMid, inputMid + 100000],\n      [0, 0, 100000],\n      Extrapolate.CLAMP\n    );\n  }, []);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      transform: [\n        {\n          translateY: translateY.value,\n        },\n      ],\n    };\n  }, []);\n\n  return (\n    <Animated.View\n      key={key}\n      // @ts-ignore\n      ref={viewRef}\n      onLayout={handleLayout}\n      style={[styles.container, animatedStyle, style]}\n      pointerEvents=\"box-none\"\n    >\n      {children}\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    zIndex: 10,\n    marginTop: Platform.OS === 'android' ? -1 : 0,\n  },\n});\n"]}

package/lib/module/components/scrollable/CollapsibleFlatList.js

@@ -4,26 +4,23 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, FlatList } from 'react-native';
 import Animated, { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
-import AnimatedTopView from '../header/AnimatedTopView';
 import useAnimatedScroll from './useAnimatedScroll';
-import useCollapsibleContext from '../../hooks/useCollapsibleContext';
 import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
-import PullToRefreshContainer from '../pullToRefresh/PullToRefreshContainer';
+import CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 export default function CollapsibleFlatList({
   headerSnappable = true,
   ...props
 }) {
-  const {
-    headerHeight,
-    scrollY
-  } = useCollapsibleContext();
   const {
     contentMinHeight,
-    scrollViewRef
+    scrollViewRef,
+    fixedHeaderHeight
   } = useInternalCollapsibleContext();
   const mounted = useRef(true);
   const contentHeight = useRef(0);
+  const [internalContentMinHeight, setInternalContentMinHeight] = useState(contentMinHeight.value);
+  const [internalProgressViewOffset, setInternalProgressViewOffset] = useState(0);
   useEffect(() => {
     return () => {
       mounted.current = false;
@@ -42,11 +39,6 @@ export default function CollapsibleFlatList({
 
     (_scrollViewRef$curren2 = scrollViewRef.current) === null || _scrollViewRef$curren2 === void 0 ? void 0 : _scrollViewRef$curren2.scrollToIndex(params);
   }, []);
-  const handleInternalContentHeight = useCallback(value => {
-    if (mounted.current) {
-      setInternalContentMinHeight(value);
-    }
-  }, []);
   const {
     scrollHandler
   } = useAnimatedScroll({
@@ -54,16 +46,32 @@ export default function CollapsibleFlatList({
     scrollTo,
     scrollToIndex
   });
-  const [internalContentMinHeight, setInternalContentMinHeight] = useState(contentMinHeight.value);
+  const handleInternalContentHeight = useCallback(value => {
+    if (mounted.current) {
+      setInternalContentMinHeight(value);
+    }
+  }, []);
+  const handleInternalProgressViewOffset = useCallback(value => {
+    if (mounted.current) {
+      setInternalProgressViewOffset(value);
+    }
+  }, []);
   useAnimatedReaction(() => {
     return contentMinHeight.value;
   }, (result, previous) => {
     if (result !== previous) {
-      if (contentHeight.current < contentMinHeight.value && internalContentMinHeight !== contentMinHeight.value) {
-        runOnJS(handleInternalContentHeight)(contentMinHeight.value);
+      if (contentHeight.current < result && internalContentMinHeight !== result) {
+        runOnJS(handleInternalContentHeight)(result);
       }
     }
   });
+  useAnimatedReaction(() => {
+    return fixedHeaderHeight.value;
+  }, (result, previous) => {
+    if (result !== previous) {
+      runOnJS(handleInternalProgressViewOffset)(result);
+    }
+  });
   const contentContainerStyle = useMemo(() => [styles.contentContainer, {
     minHeight: internalContentMinHeight
   }, props.contentContainerStyle], [props.contentContainerStyle, internalContentMinHeight]);
@@ -72,15 +80,13 @@ export default function CollapsibleFlatList({
   }, []);
   const handleScrollToIndexFailed = useCallback(() => {}, []);
 
-  const renderListHeader = () => /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(AnimatedTopView, {
-    height: headerHeight
-  }), props.ListHeaderComponent);
+  function renderListHeader() {
+    return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(CollapsibleHeaderConsumer, null), props.ListHeaderComponent);
+  }
 
-  return /*#__PURE__*/React.createElement(PullToRefreshContainer, {
-    scrollY: scrollY
-  }, /*#__PURE__*/React.createElement(AnimatedFlatList, _extends({
-    ref: scrollViewRef,
-    bounces: false,
+  return /*#__PURE__*/React.createElement(AnimatedFlatList, _extends({
+    ref: scrollViewRef // bounces={false}
+    ,
     keyboardDismissMode: "on-drag",
     keyboardShouldPersistTaps: "handled",
     scrollEventThrottle: 1,
@@ -90,8 +96,12 @@ export default function CollapsibleFlatList({
     contentContainerStyle: contentContainerStyle,
     onScroll: scrollHandler,
     ListHeaderComponent: renderListHeader(),
-    onContentSizeChange: handleContentSizeChange
-  })));
+    onContentSizeChange: handleContentSizeChange //@ts-ignore
+    ,
+    simultaneousHandlers: [],
+    stickyHeaderIndices: [0],
+    progressViewOffset: internalProgressViewOffset
+  }));
 }
 const styles = StyleSheet.create({
   container: { ...StyleSheet.absoluteFillObject

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

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","View","StyleSheet","FlatList","Animated","runOnJS","useAnimatedReaction","AnimatedTopView","useAnimatedScroll","useCollapsibleContext","useInternalCollapsibleContext","PullToRefreshContainer","AnimatedFlatList","createAnimatedComponent","CollapsibleFlatList","headerSnappable","props","headerHeight","scrollY","contentMinHeight","scrollViewRef","mounted","contentHeight","current","scrollTo","yValue","animated","scrollToOffset","offset","scrollToIndex","params","handleInternalContentHeight","value","setInternalContentMinHeight","scrollHandler","internalContentMinHeight","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","handleScrollToIndexFailed","renderListHeader","ListHeaderComponent","container","style","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport 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, scrollViewRef } = useInternalCollapsibleContext();\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((yValue: number, animated = true) => {\n    scrollViewRef.current?.scrollToOffset({\n      offset: yValue,\n      animated,\n    });\n  }, []);\n\n  const scrollToIndex = useCallback((params) => {\n    scrollViewRef.current?.scrollToIndex(params);\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    scrollToIndex,\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 handleScrollToIndexFailed = useCallback(() => {}, []);\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={scrollViewRef}\n        bounces={false}\n        keyboardDismissMode=\"on-drag\"\n        keyboardShouldPersistTaps=\"handled\"\n        scrollEventThrottle={1}\n        onScrollToIndexFailed={handleScrollToIndexFailed}\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"]}
+{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["React","useCallback","useEffect","useMemo","useRef","useState","View","StyleSheet","FlatList","Animated","runOnJS","useAnimatedReaction","useAnimatedScroll","useInternalCollapsibleContext","CollapsibleHeaderConsumer","AnimatedFlatList","createAnimatedComponent","CollapsibleFlatList","headerSnappable","props","contentMinHeight","scrollViewRef","fixedHeaderHeight","mounted","contentHeight","internalContentMinHeight","setInternalContentMinHeight","value","internalProgressViewOffset","setInternalProgressViewOffset","current","scrollTo","yValue","animated","scrollToOffset","offset","scrollToIndex","params","scrollHandler","handleInternalContentHeight","handleInternalProgressViewOffset","result","previous","contentContainerStyle","styles","contentContainer","minHeight","handleContentSizeChange","_","height","handleScrollToIndexFailed","renderListHeader","ListHeaderComponent","container","style","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport 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 useAnimatedScroll from './useAnimatedScroll';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport type { CollapsibleProps } from '../../types';\nimport CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';\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 { contentMinHeight, scrollViewRef, fixedHeaderHeight } =\n    useInternalCollapsibleContext();\n  const mounted = useRef(true);\n  const contentHeight = useRef(0);\n  const [internalContentMinHeight, setInternalContentMinHeight] = useState(\n    contentMinHeight.value\n  );\n  const [internalProgressViewOffset, setInternalProgressViewOffset] =\n    useState(0);\n\n  useEffect(() => {\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const scrollTo = useCallback((yValue: number, animated = true) => {\n    scrollViewRef.current?.scrollToOffset({\n      offset: yValue,\n      animated,\n    });\n  }, []);\n\n  const scrollToIndex = useCallback((params) => {\n    scrollViewRef.current?.scrollToIndex(params);\n  }, []);\n\n  const { scrollHandler } = useAnimatedScroll({\n    headerSnappable,\n    scrollTo,\n    scrollToIndex,\n  });\n\n  const handleInternalContentHeight = useCallback((value: number) => {\n    if (mounted.current) {\n      setInternalContentMinHeight(value);\n    }\n  }, []);\n\n  const handleInternalProgressViewOffset = useCallback((value: number) => {\n    if (mounted.current) {\n      setInternalProgressViewOffset(value);\n    }\n  }, []);\n\n  useAnimatedReaction(\n    () => {\n      return contentMinHeight.value;\n    },\n    (result, previous) => {\n      if (result !== previous) {\n        if (\n          contentHeight.current < result &&\n          internalContentMinHeight !== result\n        ) {\n          runOnJS(handleInternalContentHeight)(result);\n        }\n      }\n    }\n  );\n\n  useAnimatedReaction(\n    () => {\n      return fixedHeaderHeight.value;\n    },\n    (result, previous) => {\n      if (result !== previous) {\n        runOnJS(handleInternalProgressViewOffset)(result);\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 handleScrollToIndexFailed = useCallback(() => {}, []);\n\n  function renderListHeader() {\n    return (\n      <View>\n        <CollapsibleHeaderConsumer />\n        {props.ListHeaderComponent}\n      </View>\n    );\n  }\n\n  return (\n    <AnimatedFlatList\n      ref={scrollViewRef}\n      // bounces={false}\n      keyboardDismissMode=\"on-drag\"\n      keyboardShouldPersistTaps=\"handled\"\n      scrollEventThrottle={1}\n      onScrollToIndexFailed={handleScrollToIndexFailed}\n      {...props}\n      style={[styles.container, props.style]}\n      contentContainerStyle={contentContainerStyle}\n      onScroll={scrollHandler}\n      ListHeaderComponent={renderListHeader()}\n      onContentSizeChange={handleContentSizeChange}\n      //@ts-ignore\n      simultaneousHandlers={[]}\n      stickyHeaderIndices={[0]}\n      progressViewOffset={internalProgressViewOffset}\n    />\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/module/components/scrollable/CollapsibleScrollView.js

@@ -1,13 +1,12 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 /* eslint-disable react-hooks/exhaustive-deps */
-import AnimatedTopView from '../header/AnimatedTopView';
 import useAnimatedScroll from './useAnimatedScroll';
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-import useCollapsibleContext from '../../hooks/useCollapsibleContext';
 import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
+import CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';
 export default function CollapsibleScrollView({
   headerSnappable = true,
   children,
@@ -17,9 +16,6 @@ export default function CollapsibleScrollView({
     contentMinHeight,
     scrollViewRef
   } = useInternalCollapsibleContext();
-  const {
-    headerHeight
-  } = useCollapsibleContext();
   const scrollTo = useCallback((yValue, animated = true) => {
     var _scrollViewRef$curren;
 
@@ -45,20 +41,18 @@ export default function CollapsibleScrollView({
   }, []);
   const contentContainerStyle = useMemo(() => [styles.contentContainer, props.contentContainerStyle], [props.contentContainerStyle]);
   return /*#__PURE__*/React.createElement(Animated.ScrollView, _extends({
-    ref: scrollViewRef,
-    bounces: false
+    ref: scrollViewRef
   }, props, {
     style: [styles.container, props.style],
     contentContainerStyle: contentContainerStyle,
     onScroll: scrollHandler,
     keyboardDismissMode: "on-drag",
     keyboardShouldPersistTaps: "handled",
-    scrollEventThrottle: 1
-  }), /*#__PURE__*/React.createElement(Animated.View, {
+    scrollEventThrottle: 1,
+    stickyHeaderIndices: [0]
+  }), /*#__PURE__*/React.createElement(CollapsibleHeaderConsumer, null), /*#__PURE__*/React.createElement(Animated.View, {
     style: animatedStyle
-  }, /*#__PURE__*/React.createElement(AnimatedTopView, {
-    height: headerHeight
-  }), children));
+  }, children));
 }
 const styles = StyleSheet.create({
   container: { ...StyleSheet.absoluteFillObject

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

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["AnimatedTopView","useAnimatedScroll","React","useCallback","useMemo","StyleSheet","Animated","useAnimatedStyle","useCollapsibleContext","useInternalCollapsibleContext","CollapsibleScrollView","headerSnappable","children","props","contentMinHeight","scrollViewRef","headerHeight","scrollTo","yValue","animated","current","y","scrollToIndex","console","warn","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","create","absoluteFillObject","flexGrow"],"mappings":";;AAAA;AACA,OAAOA,eAAP,MAA4B,2BAA5B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,KAAP,IAA2BC,WAA3B,EAAwCC,OAAxC,QAAuD,OAAvD;AACA,SAA0BC,UAA1B,QAA4C,cAA5C;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,QAA2C,yBAA3C;AAEA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AAOA,eAAe,SAASC,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsCN,6BAA6B,EAAzE;AACA,QAAM;AAAEO,IAAAA;AAAF,MAAmBR,qBAAqB,EAA9C;AAEA,QAAMS,QAAQ,GAAGd,WAAW,CAAC,CAACe,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAJ,aAAa,CAACK,OAAd,gFAAuBH,QAAvB,CAAgC;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAAhC;AACD,GAF2B,EAEzB,EAFyB,CAA5B;AAIA,QAAMG,aAAa,GAAGnB,WAAW,CAAC,MAAM;AACtCoB,IAAAA,OAAO,CAACC,IAAR,CAAa,qDAAb;AACD,GAFgC,EAE9B,EAF8B,CAAjC;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAoBxB,iBAAiB,CAAC;AAC1CU,IAAAA,eAD0C;AAE1CM,IAAAA,QAF0C;AAG1CK,IAAAA;AAH0C,GAAD,CAA3C;AAMA,QAAMI,aAAa,GAAGnB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLoB,MAAAA,SAAS,EAAEb,gBAAgB,CAACc;AADvB,KAAP;AAGD,GAJqC,EAInC,EAJmC,CAAtC;AAMA,QAAMC,qBAAqB,GAAGzB,OAAO,CACnC,MAAM,CAAC0B,MAAM,CAACC,gBAAR,EAA0BlB,KAAK,CAACgB,qBAAhC,CAD6B,EAEnC,CAAChB,KAAK,CAACgB,qBAAP,CAFmC,CAArC;AAKA,sBACE,oBAAC,QAAD,CAAU,UAAV;AACE,IAAA,GAAG,EAAEd,aADP;AAEE,IAAA,OAAO,EAAE;AAFX,KAGMF,KAHN;AAIE,IAAA,KAAK,EAAE,CAACiB,MAAM,CAACE,SAAR,EAAmBnB,KAAK,CAACoB,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,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEC;AAAtB,kBACE,oBAAC,eAAD;AAAiB,IAAA,MAAM,EAAEV;AAAzB,IADF,EAEGJ,QAFH,CAXF,CADF;AAkBD;AAED,MAAMkB,MAAM,GAAGzB,UAAU,CAAC6B,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE,EACT,GAAG3B,UAAU,CAAC8B;AADL,GADoB;AAI/BJ,EAAAA,gBAAgB,EAAE;AAChBK,IAAAA,QAAQ,EAAE;AADM;AAJa,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport AnimatedTopView from '../header/AnimatedTopView';\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, { ReactNode, useCallback, useMemo } 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 { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();\n  const { headerHeight } = useCollapsibleContext();\n\n  const scrollTo = useCallback((yValue: number, animated = true) => {\n    scrollViewRef.current?.scrollTo({ y: yValue, animated });\n  }, []);\n\n  const scrollToIndex = useCallback(() => {\n    console.warn(\"CollapsibleScrollView doesn't support scrollToIndex\");\n  }, []);\n\n  const { scrollHandler } = useAnimatedScroll({\n    headerSnappable,\n    scrollTo,\n    scrollToIndex,\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={scrollViewRef}\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});\n"]}
+{"version":3,"sources":["CollapsibleScrollView.tsx"],"names":["useAnimatedScroll","React","useCallback","useMemo","StyleSheet","Animated","useAnimatedStyle","useInternalCollapsibleContext","CollapsibleHeaderConsumer","CollapsibleScrollView","headerSnappable","children","props","contentMinHeight","scrollViewRef","scrollTo","yValue","animated","current","y","scrollToIndex","console","warn","scrollHandler","animatedStyle","minHeight","value","contentContainerStyle","styles","contentContainer","container","style","create","absoluteFillObject","flexGrow"],"mappings":";;AAAA;AACA,OAAOA,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,KAAP,IAA2BC,WAA3B,EAAwCC,OAAxC,QAAuD,OAAvD;AACA,SAA0BC,UAA1B,QAA4C,cAA5C;AACA,OAAOC,QAAP,IAAmBC,gBAAnB,QAA2C,yBAA3C;AAEA,OAAOC,6BAAP,MAA0C,2CAA1C;AACA,OAAOC,yBAAP,MAAsC,qCAAtC;AAOA,eAAe,SAASC,qBAAT,CAA+B;AAC5CC,EAAAA,eAAe,GAAG,IAD0B;AAE5CC,EAAAA,QAF4C;AAG5C,KAAGC;AAHyC,CAA/B,EAIL;AACR,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsCP,6BAA6B,EAAzE;AAEA,QAAMQ,QAAQ,GAAGb,WAAW,CAAC,CAACc,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAH,aAAa,CAACI,OAAd,gFAAuBH,QAAvB,CAAgC;AAAEI,MAAAA,CAAC,EAAEH,MAAL;AAAaC,MAAAA;AAAb,KAAhC;AACD,GAF2B,EAEzB,EAFyB,CAA5B;AAIA,QAAMG,aAAa,GAAGlB,WAAW,CAAC,MAAM;AACtCmB,IAAAA,OAAO,CAACC,IAAR,CAAa,qDAAb;AACD,GAFgC,EAE9B,EAF8B,CAAjC;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAoBvB,iBAAiB,CAAC;AAC1CU,IAAAA,eAD0C;AAE1CK,IAAAA,QAF0C;AAG1CK,IAAAA;AAH0C,GAAD,CAA3C;AAMA,QAAMI,aAAa,GAAGlB,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLmB,MAAAA,SAAS,EAAEZ,gBAAgB,CAACa;AADvB,KAAP;AAGD,GAJqC,EAInC,EAJmC,CAAtC;AAMA,QAAMC,qBAAqB,GAAGxB,OAAO,CACnC,MAAM,CAACyB,MAAM,CAACC,gBAAR,EAA0BjB,KAAK,CAACe,qBAAhC,CAD6B,EAEnC,CAACf,KAAK,CAACe,qBAAP,CAFmC,CAArC;AAKA,sBACE,oBAAC,QAAD,CAAU,UAAV;AACE,IAAA,GAAG,EAAEb;AADP,KAEMF,KAFN;AAGE,IAAA,KAAK,EAAE,CAACgB,MAAM,CAACE,SAAR,EAAmBlB,KAAK,CAACmB,KAAzB,CAHT;AAIE,IAAA,qBAAqB,EAAEJ,qBAJzB;AAKE,IAAA,QAAQ,EAAEJ,aALZ;AAME,IAAA,mBAAmB,EAAC,SANtB;AAOE,IAAA,yBAAyB,EAAC,SAP5B;AAQE,IAAA,mBAAmB,EAAE,CARvB;AASE,IAAA,mBAAmB,EAAE,CAAC,CAAD;AATvB,mBAWE,oBAAC,yBAAD,OAXF,eAYE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEC;AAAtB,KAAsCb,QAAtC,CAZF,CADF;AAgBD;AAED,MAAMiB,MAAM,GAAGxB,UAAU,CAAC4B,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE,EACT,GAAG1B,UAAU,CAAC6B;AADL,GADoB;AAI/BJ,EAAAA,gBAAgB,EAAE;AAChBK,IAAAA,QAAQ,EAAE;AADM;AAJa,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport useAnimatedScroll from './useAnimatedScroll';\nimport React, { ReactNode, useCallback, useMemo } from 'react';\nimport { ScrollViewProps, StyleSheet } from 'react-native';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\nimport type { CollapsibleProps } from '../../types';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport CollapsibleHeaderConsumer from '../header/CollapsibleHeaderConsumer';\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 { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();\n\n  const scrollTo = useCallback((yValue: number, animated = true) => {\n    scrollViewRef.current?.scrollTo({ y: yValue, animated });\n  }, []);\n\n  const scrollToIndex = useCallback(() => {\n    console.warn(\"CollapsibleScrollView doesn't support scrollToIndex\");\n  }, []);\n\n  const { scrollHandler } = useAnimatedScroll({\n    headerSnappable,\n    scrollTo,\n    scrollToIndex,\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={scrollViewRef}\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      stickyHeaderIndices={[0]}\n    >\n      <CollapsibleHeaderConsumer />\n      <Animated.View style={animatedStyle}>{children}</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});\n"]}