@r0b0t3d/react-native-collapsible 1.3.3 → 1.3.4

package/lib/commonjs/components/CollapsibleView.js

@@ -28,7 +28,8 @@ function CollapsibleView({
   children,
   containerStyle,
   collapsedBackgroundColor,
-  expandedBackgroundColor
+  expandedBackgroundColor,
+  onToggle
 }) {
   const actualHeight = (0, _reactNativeReanimated.useSharedValue)(11110);
   const contentKey = (0, _react.useMemo)(() => `collapsible-view-${key++}`, []);
@@ -41,7 +42,7 @@ function CollapsibleView({
 
     collapseState.value = newValue;
   }, [initialState]);
-  const onToggle = (0, _react.useCallback)(() => {
+  const handleToggle = (0, _react.useCallback)(() => {
     collapseState.value = (0, _reactNativeReanimated.withSpring)(collapseState.value === 0 ? 1 : 0, {
       overshootClamping: true
     });
@@ -60,7 +61,16 @@ function CollapsibleView({
   }), [actualHeight, contentKey]);
   const contentHeight = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
     height: actualHeight.value > 0 ? actualHeight.value : undefined
-  }), [actualHeight, contentKey]); // @ts-ignore
+  }), [actualHeight, contentKey]);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => collapseState.value === 0 ? 0 : collapseState.value === 1 ? 1 : 0, (result, prev) => {
+    if (result === prev) {
+      return;
+    }
+
+    if (onToggle) {
+      (0, _reactNativeReanimated.runOnJS)(onToggle)(result === 1);
+    }
+  }); // @ts-ignore
 
   const containerAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     if (collapsedBackgroundColor && expandedBackgroundColor) {
@@ -72,9 +82,9 @@ function CollapsibleView({
     return {};
   }, []);
   const headerProps = (0, _react.useMemo)(() => ({
-    onToggle,
+    onToggle: handleToggle,
     collapsed: collapseState
-  }), [onToggle, collapseState]);
+  }), [handleToggle, collapseState]);
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     style: [containerStyle, containerAnimatedStyle],
     pointerEvents: "box-none"

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

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleView.tsx"],"names":["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","StyleSheet","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":["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","StyleSheet","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/commonjs/components/header/CollapsibleHeaderContainer.js

@@ -21,7 +21,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 let key = 0;
 
 function CollapsibleHeaderContainer({
-  children
+  children,
+  containerStyle
 }) {
   const contentKey = (0, _react.useMemo)(() => `collapsible-header-${key++}`, []);
   const {
@@ -37,10 +38,10 @@ function CollapsibleHeaderContainer({
   const content = (0, _react.useMemo)(() => {
     return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
       key: contentKey,
-      style: internalStyle,
+      style: [containerStyle, internalStyle],
       pointerEvents: "box-none"
     }, children);
-  }, [children]);
+  }, [children, containerStyle]);
   (0, _react.useEffect)(() => {
     mount(contentKey, content);
     return () => {

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

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["key","CollapsibleHeaderContainer","children","contentKey","mount","unmount","update","internalStyle","zIndex","content"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;;;;;AAHA;AAUA,IAAIA,GAAG,GAAG,CAAV;;AAEe,SAASC,0BAAT,CAAoC;AAAEC,EAAAA;AAAF,CAApC,EAAyD;AACtE,QAAMC,UAAU,GAAG,oBAAQ,MAAO,sBAAqBH,GAAG,EAAG,EAA1C,EAA6C,EAA7C,CAAnB;AACA,QAAM;AAAEI,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6B,2CAAnC;AAEA,QAAMC,aAAa,GAAG,oBAAQ,MAAM;AAClC,WAAO;AACLC,MAAAA,MAAM,EAAE,SAASR;AADZ,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,QAAMS,OAAO,GAAG,oBAAQ,MAAM;AAC5B,wBACE,6BAAC,iBAAD;AAAM,MAAA,GAAG,EAAEN,UAAX;AAAuB,MAAA,KAAK,EAAEI,aAA9B;AAA6C,MAAA,aAAa,EAAC;AAA3D,OACGL,QADH,CADF;AAKD,GANe,EAMb,CAACA,QAAD,CANa,CAAhB;AAQA,wBAAU,MAAM;AACdE,IAAAA,KAAK,CAACD,UAAD,EAAaM,OAAb,CAAL;AAEA,WAAO,MAAM;AACXJ,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GAND,EAMG,CAACA,UAAD,CANH;AAQA,wBAAU,MAAM;AACdG,IAAAA,MAAM,CAACH,UAAD,EAAaM,OAAb,CAAN;AACD,GAFD,EAEG,CAACA,OAAD,CAFH;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":["key","CollapsibleHeaderContainer","children","containerStyle","contentKey","mount","unmount","update","internalStyle","zIndex","content"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;;;;;AAHA;AAUA,IAAIA,GAAG,GAAG,CAAV;;AAEe,SAASC,0BAAT,CAAoC;AACjDC,EAAAA,QADiD;AAEjDC,EAAAA;AAFiD,CAApC,EAGL;AACR,QAAMC,UAAU,GAAG,oBAAQ,MAAO,sBAAqBJ,GAAG,EAAG,EAA1C,EAA6C,EAA7C,CAAnB;AACA,QAAM;AAAEK,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6B,2CAAnC;AAEA,QAAMC,aAAa,GAAG,oBAAQ,MAAM;AAClC,WAAO;AACLC,MAAAA,MAAM,EAAE,SAAST;AADZ,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,QAAMU,OAAO,GAAG,oBAAQ,MAAM;AAC5B,wBACE,6BAAC,iBAAD;AACE,MAAA,GAAG,EAAEN,UADP;AAEE,MAAA,KAAK,EAAE,CAACD,cAAD,EAAiBK,aAAjB,CAFT;AAGE,MAAA,aAAa,EAAC;AAHhB,OAKGN,QALH,CADF;AASD,GAVe,EAUb,CAACA,QAAD,EAAWC,cAAX,CAVa,CAAhB;AAYA,wBAAU,MAAM;AACdE,IAAAA,KAAK,CAACD,UAAD,EAAaM,OAAb,CAAL;AAEA,WAAO,MAAM;AACXJ,MAAAA,OAAO,CAACF,UAAD,CAAP;AACD,KAFD;AAGD,GAND,EAMG,CAACA,UAAD,CANH;AAQA,wBAAU,MAAM;AACdG,IAAAA,MAAM,CAACH,UAAD,EAAaM,OAAb,CAAN;AACD,GAFD,EAEG,CAACA,OAAD,CAFH;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({\n  children,\n  containerStyle,\n}: 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\n        key={contentKey}\n        style={[containerStyle, internalStyle]}\n        pointerEvents=\"box-none\"\n      >\n        {children}\n      </View>\n    );\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/commonjs/components/header/StickyView.js

@@ -72,7 +72,8 @@ function StickyView({
 const styles = _reactNative.StyleSheet.create({
   container: {
     backgroundColor: 'white',
-    zIndex: 10
+    zIndex: 10,
+    marginTop: _reactNative.Platform.OS === 'android' ? -1 : 0
   }
 });
 //# sourceMappingURL=StickyView.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["StickyView.tsx"],"names":["stickyKey","StickyView","children","style","key","viewRef","handleStickyViewLayout","stickyViewTops","stickyViewPositions","scrollY","undefined","handleLayout","translateY","top","value","layoutValues","inputMid","Extrapolate","CLAMP","animatedStyle","transform","styles","container","StyleSheet","create","backgroundColor","zIndex"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AALA;AAiBA,IAAIA,SAAS,GAAG,CAAhB;;AAEe,SAASC,UAAT,CAAoB;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAApB,EAAgD;AAC7D,QAAMC,GAAG,GAAG,oBAAQ,MAAO,UAASJ,SAAS,EAAG,EAApC,EAAuC,EAAvC,CAAZ;AACA,QAAMK,OAAO,GAAG,mBAAa,IAAb,CAAhB;AACA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,cAA1B;AAA0CC,IAAAA;AAA1C,MACJ,6CADF;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAAc,qCAApB;AAEA,wBAAU,MAAM;AACd,WAAO,MAAMH,sBAAsB,CAACF,GAAD,EAAMM,SAAN,CAAnC;AACD,GAFD,EAEG,EAFH;AAIA,QAAMC,YAAY,GAAG,wBAAY,MAAM;AACrCL,IAAAA,sBAAsB,CAACF,GAAD,EAAMC,OAAN,CAAtB;AACD,GAFoB,EAElB,CAACD,GAAD,CAFkB,CAArB;AAIA,QAAMQ,UAAU,GAAG,4CAAgB,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,WAAO,wCACLJ,OAAO,CAACK,KADH,EAEL,CAAC,CAAD,EAAIE,QAAJ,EAAcA,QAAQ,GAAG,MAAzB,CAFK,EAGL,CAAC,CAAD,EAAI,CAAJ,EAAO,MAAP,CAHK,EAILC,mCAAYC,KAJP,CAAP;AAMD,GAVkB,EAUhB,EAVgB,CAAnB;AAYA,QAAMC,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,SAAS,EAAE,CACT;AACER,QAAAA,UAAU,EAAEA,UAAU,CAACE;AADzB,OADS;AADN,KAAP;AAOD,GARqB,EAQnB,EARmB,CAAtB;AAUA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,GAAG,EAAEV,GADP,CAEE;AAFF;AAGE,IAAA,GAAG,EAAEC,OAHP;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,KAAK,EAAE,CAACU,MAAM,CAACC,SAAR,EAAmBH,aAAnB,EAAkChB,KAAlC,CALT;AAME,IAAA,aAAa,EAAC;AANhB,KAQGD,QARH,CADF;AAYD;;AAED,MAAMmB,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,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":["stickyKey","StickyView","children","style","key","viewRef","handleStickyViewLayout","stickyViewTops","stickyViewPositions","scrollY","undefined","handleLayout","translateY","top","value","layoutValues","inputMid","Extrapolate","CLAMP","animatedStyle","transform","styles","container","StyleSheet","create","backgroundColor","zIndex","marginTop","Platform","OS"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AALA;AAiBA,IAAIA,SAAS,GAAG,CAAhB;;AAEe,SAASC,UAAT,CAAoB;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAApB,EAAgD;AAC7D,QAAMC,GAAG,GAAG,oBAAQ,MAAO,UAASJ,SAAS,EAAG,EAApC,EAAuC,EAAvC,CAAZ;AACA,QAAMK,OAAO,GAAG,mBAAa,IAAb,CAAhB;AACA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,cAA1B;AAA0CC,IAAAA;AAA1C,MACJ,6CADF;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAAc,qCAApB;AAEA,wBAAU,MAAM;AACd,WAAO,MAAMH,sBAAsB,CAACF,GAAD,EAAMM,SAAN,CAAnC;AACD,GAFD,EAEG,EAFH;AAIA,QAAMC,YAAY,GAAG,wBAAY,MAAM;AACrCL,IAAAA,sBAAsB,CAACF,GAAD,EAAMC,OAAN,CAAtB;AACD,GAFoB,EAElB,CAACD,GAAD,CAFkB,CAArB;AAIA,QAAMQ,UAAU,GAAG,4CAAgB,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,WAAO,wCACLJ,OAAO,CAACK,KADH,EAEL,CAAC,CAAD,EAAIE,QAAJ,EAAcA,QAAQ,GAAG,MAAzB,CAFK,EAGL,CAAC,CAAD,EAAI,CAAJ,EAAO,MAAP,CAHK,EAILC,mCAAYC,KAJP,CAAP;AAMD,GAVkB,EAUhB,EAVgB,CAAnB;AAYA,QAAMC,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,SAAS,EAAE,CACT;AACER,QAAAA,UAAU,EAAEA,UAAU,CAACE;AADzB,OADS;AADN,KAAP;AAOD,GARqB,EAQnB,EARmB,CAAtB;AAUA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,GAAG,EAAEV,GADP,CAEE;AAFF;AAGE,IAAA,GAAG,EAAEC,OAHP;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,KAAK,EAAE,CAACU,MAAM,CAACC,SAAR,EAAmBH,aAAnB,EAAkChB,KAAlC,CALT;AAME,IAAA,aAAa,EAAC;AANhB,KAQGD,QARH,CADF;AAYD;;AAED,MAAMmB,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,MAAM,EAAE,EAFC;AAGTC,IAAAA,SAAS,EAAEC,sBAASC,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/commonjs/components/scrollable/CollapsibleFlatList.js

@@ -111,7 +111,9 @@ function CollapsibleFlatList({
     contentContainerStyle: contentContainerStyle,
     onScroll: scrollHandler,
     ListHeaderComponent: renderListHeader(),
-    onContentSizeChange: handleContentSizeChange
+    onContentSizeChange: handleContentSizeChange //@ts-ignore
+    ,
+    simultaneousHandlers: []
   })));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleFlatList.tsx"],"names":["AnimatedFlatList","Animated","createAnimatedComponent","FlatList","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","StyleSheet","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":["AnimatedFlatList","Animated","createAnimatedComponent","FlatList","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","StyleSheet","create","absoluteFillObject","flexGrow","topView","position","top","left","right"],"mappings":";;;;;;;AACA;;AAOA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAGC,+BAASC,uBAAT,CAAiCC,qBAAjC,CAAzB;;AAKe,SAASC,mBAAT,CAAmC;AAChDC,EAAAA,eAAe,GAAG,IAD8B;AAEhD,KAAGC;AAF6C,CAAnC,EAGC;AACd,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAA4B,qCAAlC;AACA,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsC,6CAA5C;AACA,QAAMC,OAAO,GAAG,mBAAO,IAAP,CAAhB;AACA,QAAMC,aAAa,GAAG,mBAAO,CAAP,CAAtB;AAEA,wBAAU,MAAM;AACd,WAAO,MAAM;AACXD,MAAAA,OAAO,CAACE,OAAR,GAAkB,KAAlB;AACD,KAFD;AAGD,GAJD,EAIG,EAJH;AAMA,QAAMC,QAAQ,GAAG,wBAAY,CAACC,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAN,aAAa,CAACG,OAAd,gFAAuBI,cAAvB,CAAsC;AACpCC,MAAAA,MAAM,EAAEH,MAD4B;AAEpCC,MAAAA;AAFoC,KAAtC;AAID,GALgB,EAKd,EALc,CAAjB;AAOA,QAAMG,aAAa,GAAG,wBAAaC,MAAD,IAAY;AAAA;;AAC5C,8BAAAV,aAAa,CAACG,OAAd,kFAAuBM,aAAvB,CAAqCC,MAArC;AACD,GAFqB,EAEnB,EAFmB,CAAtB;AAIA,QAAMC,2BAA2B,GAAG,wBAAaC,KAAD,IAAmB;AACjE,QAAIX,OAAO,CAACE,OAAZ,EAAqB;AACnBU,MAAAA,2BAA2B,CAACD,KAAD,CAA3B;AACD;AACF,GAJmC,EAIjC,EAJiC,CAApC;AAMA,QAAM;AAAEE,IAAAA;AAAF,MAAoB,gCAAkB;AAC1CnB,IAAAA,eAD0C;AAE1CS,IAAAA,QAF0C;AAG1CK,IAAAA;AAH0C,GAAlB,CAA1B;AAMA,QAAM,CAACM,wBAAD,EAA2BF,2BAA3B,IAA0D,qBAC9Dd,gBAAgB,CAACa,KAD6C,CAAhE;AAIA,kDACE,MAAM;AACJ,WAAOb,gBAAgB,CAACa,KAAxB;AACD,GAHH,EAIE,CAACI,MAAD,EAASC,QAAT,KAAsB;AACpB,QAAID,MAAM,KAAKC,QAAf,EAAyB;AACvB,UACEf,aAAa,CAACC,OAAd,GAAwBJ,gBAAgB,CAACa,KAAzC,IACAG,wBAAwB,KAAKhB,gBAAgB,CAACa,KAFhD,EAGE;AACA,4CAAQD,2BAAR,EAAqCZ,gBAAgB,CAACa,KAAtD;AACD;AACF;AACF,GAbH;AAgBA,QAAMM,qBAAqB,GAAG,oBAC5B,MAAM,CACJC,MAAM,CAACC,gBADH,EAEJ;AAAEC,IAAAA,SAAS,EAAEN;AAAb,GAFI,EAGJnB,KAAK,CAACsB,qBAHF,CADsB,EAM5B,CAACtB,KAAK,CAACsB,qBAAP,EAA8BH,wBAA9B,CAN4B,CAA9B;AASA,QAAMO,uBAAuB,GAAG,wBAAY,CAACC,CAAD,EAAIC,MAAJ,KAAe;AACzDtB,IAAAA,aAAa,CAACC,OAAd,GAAwBqB,MAAxB;AACD,GAF+B,EAE7B,EAF6B,CAAhC;AAIA,QAAMC,yBAAyB,GAAG,wBAAY,MAAM,CAAE,CAApB,EAAsB,EAAtB,CAAlC;;AAEA,QAAMC,gBAAgB,GAAG,mBACvB,6BAAC,iBAAD,qBACE,6BAAC,wBAAD;AAAiB,IAAA,MAAM,EAAE7B;AAAzB,IADF,EAEGD,KAAK,CAAC+B,mBAFT,CADF;;AAOA,sBACE,6BAAC,+BAAD;AAAwB,IAAA,OAAO,EAAE7B;AAAjC,kBAEE,6BAAC,gBAAD;AACE,IAAA,GAAG,EAAEE,aADP;AAEE,IAAA,OAAO,EAAE,KAFX;AAGE,IAAA,mBAAmB,EAAC,SAHtB;AAIE,IAAA,yBAAyB,EAAC,SAJ5B;AAKE,IAAA,mBAAmB,EAAE,CALvB;AAME,IAAA,qBAAqB,EAAEyB;AANzB,KAOM7B,KAPN;AAQE,IAAA,KAAK,EAAE,CAACuB,MAAM,CAACS,SAAR,EAAmBhC,KAAK,CAACiC,KAAzB,CART;AASE,IAAA,qBAAqB,EAAEX,qBATzB;AAUE,IAAA,QAAQ,EAAEJ,aAVZ;AAWE,IAAA,mBAAmB,EAAEY,gBAAgB,EAXvC;AAYE,IAAA,mBAAmB,EAAEJ,uBAZvB,CAaE;AAbF;AAcE,IAAA,oBAAoB,EAAE;AAdxB,KAFF,CADF;AAqBD;;AAED,MAAMH,MAAM,GAAGW,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE,EACT,GAAGE,wBAAWE;AADL,GADoB;AAI/BZ,EAAAA,gBAAgB,EAAE;AAChBa,IAAAA,QAAQ,EAAE;AADM,GAJa;AAO/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,QAAQ,EAAE,UADH;AAEPC,IAAAA,GAAG,EAAE,CAFE;AAGPC,IAAAA,IAAI,EAAE,CAHC;AAIPC,IAAAA,KAAK,EAAE;AAJA;AAPsB,CAAlB,CAAf","sourcesContent":["/* 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        //@ts-ignore\n        simultaneousHandlers={[]}\n      />\n    </PullToRefreshContainer>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    ...StyleSheet.absoluteFillObject,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  topView: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  },\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["useAnimatedScroll.ts"],"names":["height","wHeight","Dimensions","get","useAnimatedScroll","headerSnappable","scrollTo","scrollToIndex","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","animated","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAMA;;AACA;;;;AAVA;AAYA,MAAM;AAAEA,EAAAA,MAAM,EAAEC;AAAV,IAAsBC,wBAAWC,GAAX,CAAe,QAAf,CAA5B;;AAQe,SAASC,iBAAT,CAA2B;AACxCC,EAAAA,eADwC;AAExCC,EAAAA,QAFwC;AAGxCC,EAAAA;AAHwC,CAA3B,EAIL;AACR,QAAMC,eAAe,GAAG,2CAAe,SAAf,CAAxB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAc,qCAApB;AACA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,gBAA1B;AAA4CC,IAAAA;AAA5C,MACJ,6CADF;AAGA,wBAAU,MAAM;AACd,QAAIH,OAAO,CAACI,KAAR,GAAgB,CAApB,EAAuB;AACrBC,MAAAA,qBAAqB,CAAC,MAAMR,QAAQ,CAACG,OAAO,CAACI,KAAT,EAAgB,KAAhB,CAAf,CAArB;AACD;AACF,GAJD,EAIG,EAJH;AAMA,QAAME,QAAQ,GAAG,wBACf,CAACC,QAAQ,GAAG,IAAZ,KAAqB;AACnBV,IAAAA,QAAQ,CACNW,IAAI,CAACC,GAAL,CAASN,iBAAiB,CAACC,KAAlB,IAA2B,CAApC,EAAuCF,gBAAgB,CAACE,KAAjB,IAA0B,CAAjE,CADM,EAENG,QAFM,CAAR;AAID,GANc,EAOf,CAACV,QAAD,CAPe,CAAjB;AAUA,QAAMa,MAAM,GAAG,wBAAY,MAAMb,QAAQ,CAAC,CAAD,CAA1B,EAA+B,CAACA,QAAD,CAA/B,CAAf;AAEA,wBAAU,MAAM;AACdI,IAAAA,sBAAsB,CAAC;AACrBK,MAAAA,QADqB;AAErBI,MAAAA,MAFqB;AAGrBb,MAAAA,QAHqB;AAIrBC,MAAAA;AAJqB,KAAD,CAAtB;AAMD,GAPD,EAOG,CAACG,sBAAD,EAAyBK,QAAzB,EAAmCI,MAAnC,EAA2Cb,QAA3C,EAAqDC,aAArD,CAPH;AASA,QAAMa,aAAa,GAAG,qDACpB;AACEC,IAAAA,QAAQ,EAAGC,KAAD,IAAW;AACnB,YAAMC,MAAM,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAAnC;AACA,YAAMC,IAAI,GAAGjB,OAAO,CAACI,KAAR,GAAgBU,MAA7B;AACAf,MAAAA,eAAe,CAACK,KAAhB,GAAwBa,IAAI,GAAG,CAAP,GAAW,MAAX,GAAoBA,IAAI,GAAG,CAAP,GAAW,IAAX,GAAkB,SAA9D;AACAjB,MAAAA,OAAO,CAACI,KAAR,GAAgBU,MAAhB;AACD,KANH;AAOEI,IAAAA,SAAS,EAAE,MAAM;AACf,UAAI,CAACtB,eAAL,EAAsB;AACtB,YAAMuB,IAAI,GACRjB,gBAAgB,CAACE,KAAjB,IAA0BF,gBAAgB,CAACE,KAAjB,GAAyB,CAAnD,GACIF,gBAAgB,CAACE,KADrB,GAEID,iBAAiB,CAACC,KAAlB,IAA2B,CAHjC;;AAKA,UAAIJ,OAAO,CAACI,KAAR,GAAgBe,IAApB,EAA0B;AACxB,cAAMC,KAAK,GAAGZ,IAAI,CAACa,GAAL,CAASrB,OAAO,CAACI,KAAR,GAAgBe,IAAzB,CAAd;;AACA,YAAIC,KAAK,GAAG5B,OAAO,GAAG,CAAtB,EAAyB;AACvB,cAAI8B,MAAM,GAAG,CAAb;;AACA,cAAIvB,eAAe,CAACK,KAAhB,KAA0B,IAA9B,EAAoC;AAClCkB,YAAAA,MAAM,GAAGH,IAAT;AACD;;AACD,8CAAQtB,QAAR,EAAkByB,MAAlB;AACD;AACF;AACF;AAxBH,GADoB,EA2BpB,CAACzB,QAAD,CA3BoB,CAAtB;AA8BA,SAAO;AACLc,IAAAA,aADK;AAELL,IAAAA,QAFK;AAGLI,IAAAA;AAHK,GAAP;AAKD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n  runOnJS,\n  useAnimatedScrollHandler,\n  useSharedValue,\n} from 'react-native-reanimated';\nimport type { ScrollToIndexParams } from 'src/types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\nconst { height: wHeight } = Dimensions.get('window');\n\ntype Props = {\n  headerSnappable: boolean;\n  scrollTo: (yValue: number, animated?: boolean) => void;\n  scrollToIndex: (params: ScrollToIndexParams) => void;\n};\n\nexport default function useAnimatedScroll({\n  headerSnappable,\n  scrollTo,\n  scrollToIndex,\n}: Props) {\n  const scrollDirection = useSharedValue('unknown');\n  const { scrollY } = useCollapsibleContext();\n  const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =\n    useInternalCollapsibleContext();\n\n  useEffect(() => {\n    if (scrollY.value > 0) {\n      requestAnimationFrame(() => scrollTo(scrollY.value, false));\n    }\n  }, []);\n\n  const collapse = useCallback(\n    (animated = true) => {\n      scrollTo(\n        Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0),\n        animated\n      );\n    },\n    [scrollTo]\n  );\n\n  const expand = useCallback(() => scrollTo(0), [scrollTo]);\n\n  useEffect(() => {\n    setCollapsibleHandlers({\n      collapse,\n      expand,\n      scrollTo,\n      scrollToIndex,\n    });\n  }, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);\n\n  const scrollHandler = useAnimatedScrollHandler(\n    {\n      onScroll: (event) => {\n        const offset = event.contentOffset.y;\n        const diff = scrollY.value - offset;\n        scrollDirection.value = diff > 0 ? 'down' : diff < 0 ? 'up' : 'unknown';\n        scrollY.value = offset;\n      },\n      onEndDrag: () => {\n        if (!headerSnappable) return;\n        const maxY =\n          firstStickyViewY.value && firstStickyViewY.value > 0\n            ? firstStickyViewY.value\n            : fixedHeaderHeight.value || 0;\n\n        if (scrollY.value < maxY) {\n          const delta = Math.abs(scrollY.value - maxY);\n          if (delta < wHeight / 2) {\n            let yValue = 0;\n            if (scrollDirection.value === 'up') {\n              yValue = maxY;\n            }\n            runOnJS(scrollTo)(yValue);\n          }\n        }\n      },\n    },\n    [scrollTo]\n  );\n\n  return {\n    scrollHandler,\n    collapse,\n    expand,\n  };\n}\n"]}
+{"version":3,"sources":["useAnimatedScroll.ts"],"names":["height","wHeight","Dimensions","get","useAnimatedScroll","headerSnappable","scrollTo","scrollToIndex","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","animated","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n  runOnJS,\n  useAnimatedScrollHandler,\n  useSharedValue,\n} from 'react-native-reanimated';\nimport type { ScrollToIndexParams } from '../../types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\nconst { height: wHeight } = Dimensions.get('window');\n\ntype Props = {\n  headerSnappable: boolean;\n  scrollTo: (yValue: number, animated?: boolean) => void;\n  scrollToIndex: (params: ScrollToIndexParams) => void;\n};\n\nexport default function useAnimatedScroll({\n  headerSnappable,\n  scrollTo,\n  scrollToIndex,\n}: Props) {\n  const scrollDirection = useSharedValue('unknown');\n  const { scrollY } = useCollapsibleContext();\n  const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =\n    useInternalCollapsibleContext();\n\n  useEffect(() => {\n    if (scrollY.value > 0) {\n      requestAnimationFrame(() => scrollTo(scrollY.value, false));\n    }\n  }, []);\n\n  const collapse = useCallback(\n    (animated = true) => {\n      scrollTo(\n        Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0),\n        animated\n      );\n    },\n    [scrollTo]\n  );\n\n  const expand = useCallback(() => scrollTo(0), [scrollTo]);\n\n  useEffect(() => {\n    setCollapsibleHandlers({\n      collapse,\n      expand,\n      scrollTo,\n      scrollToIndex,\n    });\n  }, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);\n\n  const scrollHandler = useAnimatedScrollHandler(\n    {\n      onScroll: (event) => {\n        const offset = event.contentOffset.y;\n        const diff = scrollY.value - offset;\n        scrollDirection.value = diff > 0 ? 'down' : diff < 0 ? 'up' : 'unknown';\n        scrollY.value = offset;\n      },\n      onEndDrag: () => {\n        if (!headerSnappable) return;\n        const maxY =\n          firstStickyViewY.value && firstStickyViewY.value > 0\n            ? firstStickyViewY.value\n            : fixedHeaderHeight.value || 0;\n\n        if (scrollY.value < maxY) {\n          const delta = Math.abs(scrollY.value - maxY);\n          if (delta < wHeight / 2) {\n            let yValue = 0;\n            if (scrollDirection.value === 'up') {\n              yValue = maxY;\n            }\n            runOnJS(scrollTo)(yValue);\n          }\n        }\n      },\n    },\n    [scrollTo]\n  );\n\n  return {\n    scrollHandler,\n    collapse,\n    expand,\n  };\n}\n"]}

package/lib/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/CollapsibleHeaderContainer.js

@@ -4,7 +4,8 @@ import { View } from 'react-native';
 import useCollapsibleHeaderContext from '../../hooks/useCollapsibleHeaderContext';
 let key = 0;
 export default function CollapsibleHeaderContainer({
-  children
+  children,
+  containerStyle
 }) {
   const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
   const {
@@ -20,10 +21,10 @@ export default function CollapsibleHeaderContainer({
   const content = useMemo(() => {
     return /*#__PURE__*/React.createElement(View, {
       key: contentKey,
-      style: internalStyle,
+      style: [containerStyle, internalStyle],
       pointerEvents: "box-none"
     }, 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","useEffect","useMemo","View","useCollapsibleHeaderContext","key","CollapsibleHeaderContainer","children","containerStyle","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;AACjDC,EAAAA,QADiD;AAEjDC,EAAAA;AAFiD,CAApC,EAGL;AACR,QAAMC,UAAU,GAAGP,OAAO,CAAC,MAAO,sBAAqBG,GAAG,EAAG,EAAnC,EAAsC,EAAtC,CAA1B;AACA,QAAM;AAAEK,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA;AAAlB,MAA6BR,2BAA2B,EAA9D;AAEA,QAAMS,aAAa,GAAGX,OAAO,CAAC,MAAM;AAClC,WAAO;AACLY,MAAAA,MAAM,EAAE,SAAST;AADZ,KAAP;AAGD,GAJ4B,EAI1B,EAJ0B,CAA7B;AAMA,QAAMU,OAAO,GAAGb,OAAO,CAAC,MAAM;AAC5B,wBACE,oBAAC,IAAD;AACE,MAAA,GAAG,EAAEO,UADP;AAEE,MAAA,KAAK,EAAE,CAACD,cAAD,EAAiBK,aAAjB,CAFT;AAGE,MAAA,aAAa,EAAC;AAHhB,OAKGN,QALH,CADF;AASD,GAVsB,EAUpB,CAACA,QAAD,EAAWC,cAAX,CAVoB,CAAvB;AAYAP,EAAAA,SAAS,CAAC,MAAM;AACdS,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;AAQAR,EAAAA,SAAS,CAAC,MAAM;AACdW,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({\n  children,\n  containerStyle,\n}: 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\n        key={contentKey}\n        style={[containerStyle, internalStyle]}\n        pointerEvents=\"box-none\"\n      >\n        {children}\n      </View>\n    );\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

@@ -90,7 +90,9 @@ export default function CollapsibleFlatList({
     contentContainerStyle: contentContainerStyle,
     onScroll: scrollHandler,
     ListHeaderComponent: renderListHeader(),
-    onContentSizeChange: handleContentSizeChange
+    onContentSizeChange: handleContentSizeChange //@ts-ignore
+    ,
+    simultaneousHandlers: []
   })));
 }
 const styles = StyleSheet.create({

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":";;AAAA;AACA,OAAOA,KAAP,IACEC,WADF,EAEEC,SAFF,EAGEC,OAHF,EAIEC,MAJF,EAKEC,QALF,QAMO,OANP;AAOA,SAAwBC,IAAxB,EAA8BC,UAA9B,EAA0CC,QAA1C,QAA0D,cAA1D;AACA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,QAGO,yBAHP;AAIA,OAAOC,eAAP,MAA4B,2BAA5B;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AAEA,OAAOC,sBAAP,MAAmC,yCAAnC;AAEA,MAAMC,gBAAgB,GAAGR,QAAQ,CAACS,uBAAT,CAAiCV,QAAjC,CAAzB;AAKA,eAAe,SAASW,mBAAT,CAAmC;AAChDC,EAAAA,eAAe,GAAG,IAD8B;AAEhD,KAAGC;AAF6C,CAAnC,EAGC;AACd,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAA4BT,qBAAqB,EAAvD;AACA,QAAM;AAAEU,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAsCV,6BAA6B,EAAzE;AACA,QAAMW,OAAO,GAAGtB,MAAM,CAAC,IAAD,CAAtB;AACA,QAAMuB,aAAa,GAAGvB,MAAM,CAAC,CAAD,CAA5B;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACd,WAAO,MAAM;AACXwB,MAAAA,OAAO,CAACE,OAAR,GAAkB,KAAlB;AACD,KAFD;AAGD,GAJQ,EAIN,EAJM,CAAT;AAMA,QAAMC,QAAQ,GAAG5B,WAAW,CAAC,CAAC6B,MAAD,EAAiBC,QAAQ,GAAG,IAA5B,KAAqC;AAAA;;AAChE,6BAAAN,aAAa,CAACG,OAAd,gFAAuBI,cAAvB,CAAsC;AACpCC,MAAAA,MAAM,EAAEH,MAD4B;AAEpCC,MAAAA;AAFoC,KAAtC;AAID,GAL2B,EAKzB,EALyB,CAA5B;AAOA,QAAMG,aAAa,GAAGjC,WAAW,CAAEkC,MAAD,IAAY;AAAA;;AAC5C,8BAAAV,aAAa,CAACG,OAAd,kFAAuBM,aAAvB,CAAqCC,MAArC;AACD,GAFgC,EAE9B,EAF8B,CAAjC;AAIA,QAAMC,2BAA2B,GAAGnC,WAAW,CAAEoC,KAAD,IAAmB;AACjE,QAAIX,OAAO,CAACE,OAAZ,EAAqB;AACnBU,MAAAA,2BAA2B,CAACD,KAAD,CAA3B;AACD;AACF,GAJ8C,EAI5C,EAJ4C,CAA/C;AAMA,QAAM;AAAEE,IAAAA;AAAF,MAAoB1B,iBAAiB,CAAC;AAC1CO,IAAAA,eAD0C;AAE1CS,IAAAA,QAF0C;AAG1CK,IAAAA;AAH0C,GAAD,CAA3C;AAMA,QAAM,CAACM,wBAAD,EAA2BF,2BAA3B,IAA0DjC,QAAQ,CACtEmB,gBAAgB,CAACa,KADqD,CAAxE;AAIA1B,EAAAA,mBAAmB,CACjB,MAAM;AACJ,WAAOa,gBAAgB,CAACa,KAAxB;AACD,GAHgB,EAIjB,CAACI,MAAD,EAASC,QAAT,KAAsB;AACpB,QAAID,MAAM,KAAKC,QAAf,EAAyB;AACvB,UACEf,aAAa,CAACC,OAAd,GAAwBJ,gBAAgB,CAACa,KAAzC,IACAG,wBAAwB,KAAKhB,gBAAgB,CAACa,KAFhD,EAGE;AACA3B,QAAAA,OAAO,CAAC0B,2BAAD,CAAP,CAAqCZ,gBAAgB,CAACa,KAAtD;AACD;AACF;AACF,GAbgB,CAAnB;AAgBA,QAAMM,qBAAqB,GAAGxC,OAAO,CACnC,MAAM,CACJyC,MAAM,CAACC,gBADH,EAEJ;AAAEC,IAAAA,SAAS,EAAEN;AAAb,GAFI,EAGJnB,KAAK,CAACsB,qBAHF,CAD6B,EAMnC,CAACtB,KAAK,CAACsB,qBAAP,EAA8BH,wBAA9B,CANmC,CAArC;AASA,QAAMO,uBAAuB,GAAG9C,WAAW,CAAC,CAAC+C,CAAD,EAAIC,MAAJ,KAAe;AACzDtB,IAAAA,aAAa,CAACC,OAAd,GAAwBqB,MAAxB;AACD,GAF0C,EAExC,EAFwC,CAA3C;AAIA,QAAMC,yBAAyB,GAAGjD,WAAW,CAAC,MAAM,CAAE,CAAT,EAAW,EAAX,CAA7C;;AAEA,QAAMkD,gBAAgB,GAAG,mBACvB,oBAAC,IAAD,qBACE,oBAAC,eAAD;AAAiB,IAAA,MAAM,EAAE7B;AAAzB,IADF,EAEGD,KAAK,CAAC+B,mBAFT,CADF;;AAOA,sBACE,oBAAC,sBAAD;AAAwB,IAAA,OAAO,EAAE7B;AAAjC,kBAEE,oBAAC,gBAAD;AACE,IAAA,GAAG,EAAEE,aADP;AAEE,IAAA,OAAO,EAAE,KAFX;AAGE,IAAA,mBAAmB,EAAC,SAHtB;AAIE,IAAA,yBAAyB,EAAC,SAJ5B;AAKE,IAAA,mBAAmB,EAAE,CALvB;AAME,IAAA,qBAAqB,EAAEyB;AANzB,KAOM7B,KAPN;AAQE,IAAA,KAAK,EAAE,CAACuB,MAAM,CAACS,SAAR,EAAmBhC,KAAK,CAACiC,KAAzB,CART;AASE,IAAA,qBAAqB,EAAEX,qBATzB;AAUE,IAAA,QAAQ,EAAEJ,aAVZ;AAWE,IAAA,mBAAmB,EAAEY,gBAAgB,EAXvC;AAYE,IAAA,mBAAmB,EAAEJ;AAZvB,KAFF,CADF;AAmBD;AAED,MAAMH,MAAM,GAAGrC,UAAU,CAACgD,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE,EACT,GAAG9C,UAAU,CAACiD;AADL,GADoB;AAI/BX,EAAAA,gBAAgB,EAAE;AAChBY,IAAAA,QAAQ,EAAE;AADM,GAJa;AAO/BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,QAAQ,EAAE,UADH;AAEPC,IAAAA,GAAG,EAAE,CAFE;AAGPC,IAAAA,IAAI,EAAE,CAHC;AAIPC,IAAAA,KAAK,EAAE;AAJA;AAPsB,CAAlB,CAAf","sourcesContent":["/* 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","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        //@ts-ignore\n        simultaneousHandlers={[]}\n      />\n    </PullToRefreshContainer>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    ...StyleSheet.absoluteFillObject,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  topView: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  },\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["useAnimatedScroll.ts"],"names":["useCallback","useEffect","Dimensions","runOnJS","useAnimatedScrollHandler","useSharedValue","useCollapsibleContext","useInternalCollapsibleContext","height","wHeight","get","useAnimatedScroll","headerSnappable","scrollTo","scrollToIndex","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","animated","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":"AAAA;AACA,SAASA,WAAT,EAAsBC,SAAtB,QAAuC,OAAvC;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SACEC,OADF,EAEEC,wBAFF,EAGEC,cAHF,QAIO,yBAJP;AAMA,OAAOC,qBAAP,MAAkC,mCAAlC;AACA,OAAOC,6BAAP,MAA0C,2CAA1C;AAEA,MAAM;AAAEC,EAAAA,MAAM,EAAEC;AAAV,IAAsBP,UAAU,CAACQ,GAAX,CAAe,QAAf,CAA5B;AAQA,eAAe,SAASC,iBAAT,CAA2B;AACxCC,EAAAA,eADwC;AAExCC,EAAAA,QAFwC;AAGxCC,EAAAA;AAHwC,CAA3B,EAIL;AACR,QAAMC,eAAe,GAAGV,cAAc,CAAC,SAAD,CAAtC;AACA,QAAM;AAAEW,IAAAA;AAAF,MAAcV,qBAAqB,EAAzC;AACA,QAAM;AAAEW,IAAAA,sBAAF;AAA0BC,IAAAA,gBAA1B;AAA4CC,IAAAA;AAA5C,MACJZ,6BAA6B,EAD/B;AAGAN,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIe,OAAO,CAACI,KAAR,GAAgB,CAApB,EAAuB;AACrBC,MAAAA,qBAAqB,CAAC,MAAMR,QAAQ,CAACG,OAAO,CAACI,KAAT,EAAgB,KAAhB,CAAf,CAArB;AACD;AACF,GAJQ,EAIN,EAJM,CAAT;AAMA,QAAME,QAAQ,GAAGtB,WAAW,CAC1B,CAACuB,QAAQ,GAAG,IAAZ,KAAqB;AACnBV,IAAAA,QAAQ,CACNW,IAAI,CAACC,GAAL,CAASN,iBAAiB,CAACC,KAAlB,IAA2B,CAApC,EAAuCF,gBAAgB,CAACE,KAAjB,IAA0B,CAAjE,CADM,EAENG,QAFM,CAAR;AAID,GANyB,EAO1B,CAACV,QAAD,CAP0B,CAA5B;AAUA,QAAMa,MAAM,GAAG1B,WAAW,CAAC,MAAMa,QAAQ,CAAC,CAAD,CAAf,EAAoB,CAACA,QAAD,CAApB,CAA1B;AAEAZ,EAAAA,SAAS,CAAC,MAAM;AACdgB,IAAAA,sBAAsB,CAAC;AACrBK,MAAAA,QADqB;AAErBI,MAAAA,MAFqB;AAGrBb,MAAAA,QAHqB;AAIrBC,MAAAA;AAJqB,KAAD,CAAtB;AAMD,GAPQ,EAON,CAACG,sBAAD,EAAyBK,QAAzB,EAAmCI,MAAnC,EAA2Cb,QAA3C,EAAqDC,aAArD,CAPM,CAAT;AASA,QAAMa,aAAa,GAAGvB,wBAAwB,CAC5C;AACEwB,IAAAA,QAAQ,EAAGC,KAAD,IAAW;AACnB,YAAMC,MAAM,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAAnC;AACA,YAAMC,IAAI,GAAGjB,OAAO,CAACI,KAAR,GAAgBU,MAA7B;AACAf,MAAAA,eAAe,CAACK,KAAhB,GAAwBa,IAAI,GAAG,CAAP,GAAW,MAAX,GAAoBA,IAAI,GAAG,CAAP,GAAW,IAAX,GAAkB,SAA9D;AACAjB,MAAAA,OAAO,CAACI,KAAR,GAAgBU,MAAhB;AACD,KANH;AAOEI,IAAAA,SAAS,EAAE,MAAM;AACf,UAAI,CAACtB,eAAL,EAAsB;AACtB,YAAMuB,IAAI,GACRjB,gBAAgB,CAACE,KAAjB,IAA0BF,gBAAgB,CAACE,KAAjB,GAAyB,CAAnD,GACIF,gBAAgB,CAACE,KADrB,GAEID,iBAAiB,CAACC,KAAlB,IAA2B,CAHjC;;AAKA,UAAIJ,OAAO,CAACI,KAAR,GAAgBe,IAApB,EAA0B;AACxB,cAAMC,KAAK,GAAGZ,IAAI,CAACa,GAAL,CAASrB,OAAO,CAACI,KAAR,GAAgBe,IAAzB,CAAd;;AACA,YAAIC,KAAK,GAAG3B,OAAO,GAAG,CAAtB,EAAyB;AACvB,cAAI6B,MAAM,GAAG,CAAb;;AACA,cAAIvB,eAAe,CAACK,KAAhB,KAA0B,IAA9B,EAAoC;AAClCkB,YAAAA,MAAM,GAAGH,IAAT;AACD;;AACDhC,UAAAA,OAAO,CAACU,QAAD,CAAP,CAAkByB,MAAlB;AACD;AACF;AACF;AAxBH,GAD4C,EA2B5C,CAACzB,QAAD,CA3B4C,CAA9C;AA8BA,SAAO;AACLc,IAAAA,aADK;AAELL,IAAAA,QAFK;AAGLI,IAAAA;AAHK,GAAP;AAKD","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n  runOnJS,\n  useAnimatedScrollHandler,\n  useSharedValue,\n} from 'react-native-reanimated';\nimport type { ScrollToIndexParams } from 'src/types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\nconst { height: wHeight } = Dimensions.get('window');\n\ntype Props = {\n  headerSnappable: boolean;\n  scrollTo: (yValue: number, animated?: boolean) => void;\n  scrollToIndex: (params: ScrollToIndexParams) => void;\n};\n\nexport default function useAnimatedScroll({\n  headerSnappable,\n  scrollTo,\n  scrollToIndex,\n}: Props) {\n  const scrollDirection = useSharedValue('unknown');\n  const { scrollY } = useCollapsibleContext();\n  const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =\n    useInternalCollapsibleContext();\n\n  useEffect(() => {\n    if (scrollY.value > 0) {\n      requestAnimationFrame(() => scrollTo(scrollY.value, false));\n    }\n  }, []);\n\n  const collapse = useCallback(\n    (animated = true) => {\n      scrollTo(\n        Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0),\n        animated\n      );\n    },\n    [scrollTo]\n  );\n\n  const expand = useCallback(() => scrollTo(0), [scrollTo]);\n\n  useEffect(() => {\n    setCollapsibleHandlers({\n      collapse,\n      expand,\n      scrollTo,\n      scrollToIndex,\n    });\n  }, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);\n\n  const scrollHandler = useAnimatedScrollHandler(\n    {\n      onScroll: (event) => {\n        const offset = event.contentOffset.y;\n        const diff = scrollY.value - offset;\n        scrollDirection.value = diff > 0 ? 'down' : diff < 0 ? 'up' : 'unknown';\n        scrollY.value = offset;\n      },\n      onEndDrag: () => {\n        if (!headerSnappable) return;\n        const maxY =\n          firstStickyViewY.value && firstStickyViewY.value > 0\n            ? firstStickyViewY.value\n            : fixedHeaderHeight.value || 0;\n\n        if (scrollY.value < maxY) {\n          const delta = Math.abs(scrollY.value - maxY);\n          if (delta < wHeight / 2) {\n            let yValue = 0;\n            if (scrollDirection.value === 'up') {\n              yValue = maxY;\n            }\n            runOnJS(scrollTo)(yValue);\n          }\n        }\n      },\n    },\n    [scrollTo]\n  );\n\n  return {\n    scrollHandler,\n    collapse,\n    expand,\n  };\n}\n"]}
+{"version":3,"sources":["useAnimatedScroll.ts"],"names":["useCallback","useEffect","Dimensions","runOnJS","useAnimatedScrollHandler","useSharedValue","useCollapsibleContext","useInternalCollapsibleContext","height","wHeight","get","useAnimatedScroll","headerSnappable","scrollTo","scrollToIndex","scrollDirection","scrollY","setCollapsibleHandlers","firstStickyViewY","fixedHeaderHeight","value","requestAnimationFrame","collapse","animated","Math","min","expand","scrollHandler","onScroll","event","offset","contentOffset","y","diff","onEndDrag","maxY","delta","abs","yValue"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport { useCallback, useEffect } from 'react';\nimport { Dimensions } from 'react-native';\nimport {\n  runOnJS,\n  useAnimatedScrollHandler,\n  useSharedValue,\n} from 'react-native-reanimated';\nimport type { ScrollToIndexParams } from '../../types';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\n\nconst { height: wHeight } = Dimensions.get('window');\n\ntype Props = {\n  headerSnappable: boolean;\n  scrollTo: (yValue: number, animated?: boolean) => void;\n  scrollToIndex: (params: ScrollToIndexParams) => void;\n};\n\nexport default function useAnimatedScroll({\n  headerSnappable,\n  scrollTo,\n  scrollToIndex,\n}: Props) {\n  const scrollDirection = useSharedValue('unknown');\n  const { scrollY } = useCollapsibleContext();\n  const { setCollapsibleHandlers, firstStickyViewY, fixedHeaderHeight } =\n    useInternalCollapsibleContext();\n\n  useEffect(() => {\n    if (scrollY.value > 0) {\n      requestAnimationFrame(() => scrollTo(scrollY.value, false));\n    }\n  }, []);\n\n  const collapse = useCallback(\n    (animated = true) => {\n      scrollTo(\n        Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0),\n        animated\n      );\n    },\n    [scrollTo]\n  );\n\n  const expand = useCallback(() => scrollTo(0), [scrollTo]);\n\n  useEffect(() => {\n    setCollapsibleHandlers({\n      collapse,\n      expand,\n      scrollTo,\n      scrollToIndex,\n    });\n  }, [setCollapsibleHandlers, collapse, expand, scrollTo, scrollToIndex]);\n\n  const scrollHandler = useAnimatedScrollHandler(\n    {\n      onScroll: (event) => {\n        const offset = event.contentOffset.y;\n        const diff = scrollY.value - offset;\n        scrollDirection.value = diff > 0 ? 'down' : diff < 0 ? 'up' : 'unknown';\n        scrollY.value = offset;\n      },\n      onEndDrag: () => {\n        if (!headerSnappable) return;\n        const maxY =\n          firstStickyViewY.value && firstStickyViewY.value > 0\n            ? firstStickyViewY.value\n            : fixedHeaderHeight.value || 0;\n\n        if (scrollY.value < maxY) {\n          const delta = Math.abs(scrollY.value - maxY);\n          if (delta < wHeight / 2) {\n            let yValue = 0;\n            if (scrollDirection.value === 'up') {\n              yValue = maxY;\n            }\n            runOnJS(scrollTo)(yValue);\n          }\n        }\n      },\n    },\n    [scrollTo]\n  );\n\n  return {\n    scrollHandler,\n    collapse,\n    expand,\n  };\n}\n"]}

package/lib/typescript/components/CollapsibleView.d.ts

@@ -14,8 +14,9 @@ declare type Props = {
     collapsedBackgroundColor?: string;
     expandedBackgroundColor?: string;
     useDynamicLayout?: boolean;
+    onToggle?: (isExpand: boolean) => void;
 };
-export default function CollapsibleView({ initialState, collapseState, renderHeader, children, containerStyle, collapsedBackgroundColor, expandedBackgroundColor, }: Props): JSX.Element;
+export default function CollapsibleView({ initialState, collapseState, renderHeader, children, containerStyle, collapsedBackgroundColor, expandedBackgroundColor, onToggle, }: Props): JSX.Element;
 export declare function CollapsibleHeaderText({ title, collapsed, onToggle, style, titleStyle, icon, iconInitialAngle, children, }: {
     title: string | Element;
     style?: StyleProp<ViewStyle>;

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

@@ -4,5 +4,5 @@ declare type Props = {
     children: ReactNode;
     containerStyle?: StyleProp<ViewStyle>;
 };
-export default function CollapsibleHeaderContainer({ children }: Props): null;
+export default function CollapsibleHeaderContainer({ children, containerStyle, }: Props): null;
 export {};

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

@@ -1,4 +1,4 @@
-import type { ScrollToIndexParams } from 'src/types';
+import type { ScrollToIndexParams } from '../../types';
 declare type Props = {
     headerSnappable: boolean;
     scrollTo: (yValue: number, animated?: boolean) => void;

package/package.json

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

package/src/components/CollapsibleView.tsx

@@ -17,6 +17,8 @@ import Animated, {
   withSpring,
   interpolateColor,
   interpolate,
+  useAnimatedReaction,
+  runOnJS,
 } from 'react-native-reanimated';
 
 export type CollapsibleHeaderProps = {
@@ -33,6 +35,7 @@ type Props = {
   collapsedBackgroundColor?: string;
   expandedBackgroundColor?: string;
   useDynamicLayout?: boolean;
+  onToggle?: (isExpand: boolean) => void;
 };
 
 let key = 0;
@@ -44,6 +47,7 @@ export default function CollapsibleView({
   containerStyle,
   collapsedBackgroundColor,
   expandedBackgroundColor,
+  onToggle,
 }: Props) {
   const actualHeight = useSharedValue(11110);
   const contentKey = useMemo(() => `collapsible-view-${key++}`, []);
@@ -56,7 +60,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,
     });
@@ -86,6 +90,18 @@ export default function CollapsibleView({
     [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) {
@@ -101,8 +117,8 @@ export default function CollapsibleView({
   }, []);
 
   const headerProps = useMemo(
-    () => ({ onToggle, collapsed: collapseState }),
-    [onToggle, collapseState]
+    () => ({ onToggle: handleToggle, collapsed: collapseState }),
+    [handleToggle, collapseState]
   );
 
   return (

package/src/components/header/CollapsibleHeaderContainer.tsx

@@ -10,7 +10,10 @@ type Props = {
 
 let key = 0;
 
-export default function CollapsibleHeaderContainer({ children }: Props) {
+export default function CollapsibleHeaderContainer({
+  children,
+  containerStyle,
+}: Props) {
   const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
   const { mount, unmount, update } = useCollapsibleHeaderContext();
 
@@ -22,11 +25,15 @@ export default function CollapsibleHeaderContainer({ children }: Props) {
 
   const content = useMemo(() => {
     return (
-      <View key={contentKey} style={internalStyle} pointerEvents="box-none">
+      <View
+        key={contentKey}
+        style={[containerStyle, internalStyle]}
+        pointerEvents="box-none"
+      >
         {children}
       </View>
     );
-  }, [children]);
+  }, [children, containerStyle]);
 
   useEffect(() => {
     mount(contentKey, content);

package/src/components/header/StickyView.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import useCollapsibleContext from '../../hooks/useCollapsibleContext';
 import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
 import Animated, {
@@ -72,5 +72,6 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
     zIndex: 10,
+    marginTop: Platform.OS === 'android' ? -1 : 0,
   },
 });

package/src/components/scrollable/CollapsibleFlatList.tsx

@@ -119,6 +119,8 @@ export default function CollapsibleFlatList<Data>({
         onScroll={scrollHandler}
         ListHeaderComponent={renderListHeader()}
         onContentSizeChange={handleContentSizeChange}
+        //@ts-ignore
+        simultaneousHandlers={[]}
       />
     </PullToRefreshContainer>
   );

package/src/components/scrollable/useAnimatedScroll.ts

@@ -6,7 +6,7 @@ import {
   useAnimatedScrollHandler,
   useSharedValue,
 } from 'react-native-reanimated';
-import type { ScrollToIndexParams } from 'src/types';
+import type { ScrollToIndexParams } from '../../types';
 import useCollapsibleContext from '../../hooks/useCollapsibleContext';
 import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';