@r0b0t3d/react-native-collapsible 1.5.3 → 1.6.0-alpha.0

package/package.json

@@ -1,12 +1,33 @@
 {
   "name": "@r0b0t3d/react-native-collapsible",
-  "version": "1.5.3",
+  "version": "1.6.0-alpha.0",
   "description": "Fully customizable collapsible views",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/index.d.ts",
+      "react-native": "./src/index.tsx",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
+    },
+    "./plugins/CollapsibleFlashList": {
+      "types": "./lib/typescript/plugins/CollapsibleFlashList.d.ts",
+      "react-native": "./src/plugins/CollapsibleFlashList.tsx",
+      "import": "./lib/module/plugins/CollapsibleFlashList.js",
+      "require": "./lib/commonjs/plugins/CollapsibleFlashList.js"
+    },
+    "./plugins/CollapsibleLegendList": {
+      "types": "./lib/typescript/plugins/CollapsibleLegendList.d.ts",
+      "react-native": "./src/plugins/CollapsibleLegendList.tsx",
+      "import": "./lib/module/plugins/CollapsibleLegendList.js",
+      "require": "./lib/commonjs/plugins/CollapsibleLegendList.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "src",
     "lib",
@@ -30,6 +51,7 @@
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
     "prepack": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
@@ -53,42 +75,55 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
-    "@legendapp/list": "^1.0.7",
-    "@react-native-community/eslint-config": "^3.0.2",
+    "@legendapp/list": "^3.0.6",
+    "@react-native-community/eslint-config": "^3.2.0",
     "@release-it/conventional-changelog": "^5.0.0",
-    "@shopify/flash-list": "^1.8.0",
+    "@shopify/flash-list": "^2.3.2",
     "@types/jest": "^28.1.2",
-    "@types/react": "~17.0.21",
+    "@types/react": "~19.2.17",
     "@types/react-native": "0.70.0",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.4.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
     "jest": "^28.1.1",
     "pod-install": "^0.1.0",
-    "prettier": "^2.0.5",
-    "react": "18.2.0",
-    "react-native": "0.71.8",
+    "prettier": "^3.8.4",
+    "react": "19.2.3",
+    "react-native": "0.86.0",
     "react-native-builder-bob": "^0.20.0",
-    "react-native-reanimated": "^3.3.0",
-    "release-it": "^15.0.0",
-    "typescript": "^5.0.2"
-  },
-  "resolutions": {
-    "@types/react": "17.0.21"
+    "react-native-reanimated": "^4.4.1",
+    "release-it": "^20.2.0",
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "react": "*",
+    "@legendapp/list": "*",
+    "@shopify/flash-list": "*",
+    "react": ">=18.0.0",
     "react-native": "*",
     "react-native-gesture-handler": "*",
     "react-native-reanimated": ">=3.0.0"
   },
+  "peerDependenciesMeta": {
+    "@legendapp/list": {
+      "optional": true
+    },
+    "@shopify/flash-list": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">= 16.0.0"
   },
   "jest": {
     "preset": "react-native",
+    "setupFiles": [
+      "<rootDir>/jest.setup.js"
+    ],
+    "moduleNameMapper": {
+      "^react-native-reanimated$": "<rootDir>/jest.setup.js"
+    },
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
@@ -155,7 +190,8 @@
       [
         "typescript",
         {
-          "project": "tsconfig.build.json"
+          "project": "tsconfig.build.json",
+          "tsc": "node_modules/.bin/tsc"
         }
       ]
     ]

package/src/components/CollapsibleContainer.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useLayoutEffect } from 'react';
+import React, { useCallback, useLayoutEffect } from 'react';
 import {
   KeyboardAvoidingView,
   KeyboardAvoidingViewProps,
@@ -28,7 +28,7 @@ function CollapsibleContainer({
   const { containerHeight, containerRef } = useInternalCollapsibleContext();
   const { scrollY, scrollTo } = useCollapsibleContext();
 
-  useKeyboardShowEvent(() => {
+  const handleKeyboardShow = useCallback(() => {
     textInputRefs.some((ref) => {
       const isFocusedFunc = ref.current.isFocused;
       const isFocused =
@@ -51,7 +51,16 @@ function CollapsibleContainer({
       }
       return isFocused;
     });
-  });
+  }, [
+    textInputRefs,
+    containerRef,
+    containerHeight,
+    scrollY,
+    scrollTo,
+    keyboardAvoidingViewProps?.keyboardVerticalOffset,
+  ]);
+
+  useKeyboardShowEvent(handleKeyboardShow);
 
   return (
     <KeyboardAvoidingViewComponent

package/src/components/CollapsibleView.tsx

@@ -1,6 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+} from 'react';
 import {
   LayoutChangeEvent,
   Pressable,
@@ -19,16 +24,17 @@ import Animated, {
   interpolate,
   useAnimatedReaction,
   runOnJS,
+  SharedValue,
 } from 'react-native-reanimated';
 
 export type CollapsibleHeaderProps = {
   onToggle: () => void;
-  collapsed: Animated.SharedValue<number>;
+  collapsed: SharedValue<number>;
 };
 
 type Props = {
   initialState?: 'collapsed' | 'expanded';
-  collapseState?: Animated.SharedValue<number>;
+  collapseState?: SharedValue<number>;
   renderHeader: (props: CollapsibleHeaderProps) => ReactNode;
   children: ReactNode;
   containerStyle?: StyleProp<ViewStyle>;
@@ -38,10 +44,9 @@ type Props = {
   onToggle?: (isExpand: boolean) => void;
 };
 
-let key = 0;
 export default function CollapsibleView({
   initialState = 'collapsed',
-  collapseState = useSharedValue(0),
+  collapseState: collapseStateProp,
   renderHeader,
   children,
   containerStyle,
@@ -49,16 +54,32 @@ export default function CollapsibleView({
   expandedBackgroundColor,
   onToggle,
 }: Props) {
+  // Shared value is always allocated; unused when caller provides one.
+  // The allocation cost is negligible and this keeps hook order stable
+  // across renders and React StrictMode double-invocation.
+  const collapseStateInternal = useSharedValue(0);
+  const collapseState = collapseStateProp ?? collapseStateInternal;
   const actualHeight = useSharedValue(11110);
-  const contentKey = useMemo(() => `collapsible-view-${key++}`, []);
+  const instanceId = useId();
+  const contentKey = useMemo(
+    () => `collapsible-view-${instanceId}`,
+    [instanceId]
+  );
 
   useEffect(() => {
+    // `initialState` is only honored when the caller does not pass a
+    // `collapseState` of their own. When a caller-controlled SV is
+    // provided, mutating it from here would silently clobber whatever
+    // value the caller is driving from gesture state or animations.
+    if (collapseStateProp) {
+      return;
+    }
     const newValue = initialState === 'collapsed' ? 0 : 1;
     if (newValue === collapseState.value) {
       return;
     }
     collapseState.value = newValue;
-  }, [initialState]);
+  }, [initialState, collapseStateProp]);
 
   const handleToggle = useCallback(() => {
     collapseState.value = withSpring(collapseState.value === 0 ? 1 : 0, {
@@ -80,7 +101,7 @@ export default function CollapsibleView({
         overshootClamping: true,
       }),
     }),
-    [actualHeight, contentKey]
+    [actualHeight, contentKey, collapseState]
   );
 
   const contentHeight = useAnimatedStyle(
@@ -114,7 +135,7 @@ export default function CollapsibleView({
       };
     }
     return {};
-  }, []);
+  }, [collapseState, collapsedBackgroundColor, expandedBackgroundColor]);
 
   const headerProps = useMemo(
     () => ({ onToggle: handleToggle, collapsed: collapseState }),

package/src/components/header/AnimatedTopView.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, {
+  SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 
 type Props = {
-  height: Animated.SharedValue<number>;
+  height: SharedValue<number>;
 };
 
 export default function AnimatedTopView({ height }: Props) {

package/src/components/header/CollapsibleHeaderContainer.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useMemo } from 'react';
+import React, { ReactNode, useEffect, useId, useMemo, useRef } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import useCollapsibleHeaderConsumerContext from '../../hooks/useCollapsibleHeaderConsumerContext';
 import CollapsibleHeaderContainerProvider from './CollapsibleHeaderContainerProvider';
@@ -8,25 +8,30 @@ type Props = {
   containerStyle?: StyleProp<ViewStyle>;
 };
 
-let key = 0;
+// Module-scoped monotonic counter used only to assign zIndex to *new* instances
+// (see useInstanceZIndex below). Bounded by app lifetime; wraparound after ~100k
+// instances may cause one frame of incorrect layering.
+let nextZIndex = 0;
+function useInstanceZIndex(): number {
+  const ref = useRef<number | null>(null);
+  if (ref.current === null) {
+    ref.current = nextZIndex++;
+  }
+  return ref.current;
+}
 
 export default function CollapsibleHeaderContainer({
   children,
   containerStyle,
 }: Props) {
-  const originalKey = useMemo(() => key++, []);
-  const contentKey = useMemo(
-    () => `collapsible-header-${originalKey}`,
-    [originalKey]
-  );
+  const contentKey = `collapsible-header-${useId()}`;
+  const instanceZIndex = useInstanceZIndex();
   const { mount, unmount, update } = useCollapsibleHeaderConsumerContext();
 
-  const internalStyle = useMemo(() => {
-    return {
-      zIndex: 100000 - key - originalKey,
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key, originalKey]);
+  const internalStyle = useMemo(
+    () => ({ zIndex: 100000 - instanceZIndex }),
+    [instanceZIndex]
+  );
 
   const content = useMemo(() => {
     return (

package/src/components/header/StickyView.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useEffect, useId } from 'react';
 import {
   LayoutChangeEvent,
   LayoutRectangle,
@@ -8,7 +7,6 @@ import {
   ViewStyle,
 } from 'react-native';
 import Animated, {
-  Extrapolate,
   interpolate,
   useAnimatedStyle,
   useDerivedValue,
@@ -22,24 +20,20 @@ type Props = {
   stickyRef?: React.MutableRefObject<any>;
 };
 
-let stickyKey = 0;
-
 export default function StickyView({ children, style, stickyRef }: Props) {
-  const key = useMemo(() => `sticky_${stickyKey++}`, []);
+  const key = `sticky_${useId()}`;
   const { handleStickyViewLayout, animatedY } = useCollapsibleHeaderContext();
   const currentLayout = useSharedValue<LayoutRectangle | undefined>(undefined);
 
   useEffect(() => {
     return () => handleStickyViewLayout(key, undefined);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key]);
 
-  const handleLayout = useCallback(
-    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
-      currentLayout.value = layout;
-      handleStickyViewLayout(key, layout);
-    },
-    [key, handleStickyViewLayout]
-  );
+  const handleLayout = ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+    currentLayout.set(layout);
+    handleStickyViewLayout(key, layout);
+  };
 
   const translateY = useDerivedValue(() => {
     if (!currentLayout.value) {
@@ -52,7 +46,7 @@ export default function StickyView({ children, style, stickyRef }: Props) {
       animatedY.value,
       [0, topValue, topValue + stickyHeight + 100000],
       [0, 0, stickyHeight + 100000],
-      Extrapolate.CLAMP
+      'clamp'
     );
   }, []);
 
@@ -69,7 +63,6 @@ export default function StickyView({ children, style, stickyRef }: Props) {
   return (
     <Animated.View
       key={key}
-      // @ts-ignore
       ref={stickyRef}
       onLayout={handleLayout}
       style={[styles.container, style, animatedStyle]}

package/src/components/scrollable/CollapsibleFlatList.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import React, {
   useCallback,
   useEffect,
@@ -6,10 +5,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { FlatListProps, View, StyleSheet, FlatList } from 'react-native';
+import { FlatListProps, StyleSheet } from 'react-native';
+import type { ScrollToIndexParams } from '../../types';
 import Animated, {
   runOnJS,
   useAnimatedReaction,
+  useAnimatedStyle,
 } from 'react-native-reanimated';
 import useAnimatedScroll from './useAnimatedScroll';
 import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
@@ -17,8 +18,6 @@ import type { CollapsibleProps } from '../../types';
 import AnimatedTopView from '../header/AnimatedTopView';
 import useCollapsibleContext from '../../hooks/useCollapsibleContext';
 
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
-
 type Props<Data> = Omit<FlatListProps<Data>, 'scrollEnabled'> &
   CollapsibleProps;
 
@@ -30,10 +29,6 @@ export default function CollapsibleFlatList<Data>({
   const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =
     useInternalCollapsibleContext();
   const mounted = useRef(true);
-  const contentHeight = useRef(0);
-  const [internalContentMinHeight, setInternalContentMinHeight] = useState(
-    contentMinHeight.value
-  );
   const [internalProgressViewOffset, setInternalProgressViewOffset] =
     useState(0);
 
@@ -48,10 +43,12 @@ export default function CollapsibleFlatList<Data>({
       offset: yValue,
       animated,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const scrollToIndex = useCallback((params) => {
+  const scrollToIndex = useCallback((params: ScrollToIndexParams) => {
     scrollViewRef.current?.scrollToIndex?.(params);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const scrollToLocation = useCallback(() => {
@@ -65,34 +62,12 @@ export default function CollapsibleFlatList<Data>({
     scrollToLocation,
   });
 
-  const handleInternalContentHeight = useCallback((value: number) => {
-    if (mounted.current) {
-      setInternalContentMinHeight(value);
-    }
-  }, []);
-
   const handleInternalProgressViewOffset = useCallback((value: number) => {
     if (mounted.current) {
       setInternalProgressViewOffset(value);
     }
   }, []);
 
-  useAnimatedReaction(
-    () => {
-      return contentMinHeight.value;
-    },
-    (result, previous) => {
-      if (result !== previous) {
-        if (
-          contentHeight.current < result &&
-          internalContentMinHeight !== result
-        ) {
-          runOnJS(handleInternalContentHeight)(result);
-        }
-      }
-    }
-  );
-
   useAnimatedReaction(
     () => {
       return fixedHeaderHeight.value;
@@ -104,32 +79,39 @@ export default function CollapsibleFlatList<Data>({
     }
   );
 
-  const contentContainerStyle = useMemo(
-    () => [
-      styles.contentContainer,
-      { minHeight: internalContentMinHeight },
-      props.contentContainerStyle,
-    ],
-    [props.contentContainerStyle, internalContentMinHeight]
+  // Animate minHeight on the UI thread instead of bouncing through React state.
+  // Skip applying minHeight when the value is 0 to avoid forcing a 0-height
+  // layout on the first frame before the container has been measured.
+  const listHeaderStyle = useAnimatedStyle(
+    () => ({
+      minHeight:
+        contentMinHeight.value > 0 ? contentMinHeight.value : undefined,
+    }),
+    []
   );
 
-  const handleContentSizeChange = useCallback((_, height) => {
-    contentHeight.current = height;
-  }, []);
+  const contentContainerStyle = useMemo(
+    () => [styles.contentContainer, props.contentContainerStyle],
+    [props.contentContainerStyle]
+  );
 
   const handleScrollToIndexFailed = useCallback(() => {}, []);
 
+  const ListHeaderComponent = props.ListHeaderComponent;
   function renderListHeader() {
     return (
-      <View>
+      <Animated.View style={listHeaderStyle}>
         <AnimatedTopView height={headerHeight} />
-        {props.ListHeaderComponent}
-      </View>
+        {ListHeaderComponent &&
+          (React.isValidElement(ListHeaderComponent)
+            ? ListHeaderComponent
+            : React.createElement(ListHeaderComponent as React.ComponentType))}
+      </Animated.View>
     );
   }
 
   return (
-    <AnimatedFlatList
+    <Animated.FlatList
       ref={scrollViewRef}
       keyboardDismissMode="on-drag"
       keyboardShouldPersistTaps="handled"
@@ -140,7 +122,6 @@ export default function CollapsibleFlatList<Data>({
       contentContainerStyle={contentContainerStyle}
       onScroll={scrollHandler}
       ListHeaderComponent={renderListHeader()}
-      onContentSizeChange={handleContentSizeChange}
       //@ts-ignore
       simultaneousHandlers={[]}
       progressViewOffset={internalProgressViewOffset}

package/src/components/scrollable/CollapsibleSectionList.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react';
 import {
-  View,
   StyleSheet,
   SectionList,
   SectionListProps,
@@ -15,6 +14,7 @@ import {
 import Animated, {
   runOnJS,
   useAnimatedReaction,
+  useAnimatedStyle,
 } from 'react-native-reanimated';
 import useAnimatedScroll from './useAnimatedScroll';
 import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
@@ -35,10 +35,6 @@ export default function CollapsibleSectionList<Data>({
   const { contentMinHeight, scrollViewRef, fixedHeaderHeight } =
     useInternalCollapsibleContext();
   const mounted = useRef(true);
-  const contentHeight = useRef(0);
-  const [internalContentMinHeight, setInternalContentMinHeight] = useState(
-    contentMinHeight.value
-  );
   const [internalProgressViewOffset, setInternalProgressViewOffset] =
     useState(0);
 
@@ -70,34 +66,12 @@ export default function CollapsibleSectionList<Data>({
     scrollToLocation,
   });
 
-  const handleInternalContentHeight = useCallback((value: number) => {
-    if (mounted.current) {
-      setInternalContentMinHeight(value);
-    }
-  }, []);
-
   const handleInternalProgressViewOffset = useCallback((value: number) => {
     if (mounted.current) {
       setInternalProgressViewOffset(value);
     }
   }, []);
 
-  useAnimatedReaction(
-    () => {
-      return contentMinHeight.value;
-    },
-    (result, previous) => {
-      if (result !== previous) {
-        if (
-          contentHeight.current < result &&
-          internalContentMinHeight !== result
-        ) {
-          runOnJS(handleInternalContentHeight)(result);
-        }
-      }
-    }
-  );
-
   useAnimatedReaction(
     () => {
       return fixedHeaderHeight.value;
@@ -109,27 +83,34 @@ export default function CollapsibleSectionList<Data>({
     }
   );
 
-  const contentContainerStyle = useMemo(
-    () => [
-      styles.contentContainer,
-      { minHeight: internalContentMinHeight },
-      props.contentContainerStyle,
-    ],
-    [props.contentContainerStyle, internalContentMinHeight]
+  // Animate minHeight on the UI thread instead of bouncing through React state.
+  // Skip applying minHeight when the value is 0 to avoid forcing a 0-height
+  // layout on the first frame before the container has been measured.
+  const listHeaderStyle = useAnimatedStyle(
+    () => ({
+      minHeight:
+        contentMinHeight.value > 0 ? contentMinHeight.value : undefined,
+    }),
+    []
   );
 
-  const handleContentSizeChange = useCallback((_, height) => {
-    contentHeight.current = height;
-  }, []);
+  const contentContainerStyle = useMemo(
+    () => [styles.contentContainer, props.contentContainerStyle],
+    [props.contentContainerStyle]
+  );
 
   const handleScrollToIndexFailed = useCallback(() => {}, []);
 
+  const ListHeaderComponent = props.ListHeaderComponent;
   function renderListHeader() {
     return (
-      <View>
+      <Animated.View style={listHeaderStyle}>
         <AnimatedTopView height={headerHeight} />
-        {props.ListHeaderComponent}
-      </View>
+        {ListHeaderComponent &&
+          (React.isValidElement(ListHeaderComponent)
+            ? ListHeaderComponent
+            : React.createElement(ListHeaderComponent as React.ComponentType))}
+      </Animated.View>
     );
   }
 
@@ -145,7 +126,6 @@ export default function CollapsibleSectionList<Data>({
       contentContainerStyle={contentContainerStyle}
       onScroll={scrollHandler}
       ListHeaderComponent={renderListHeader()}
-      onContentSizeChange={handleContentSizeChange}
       //@ts-ignore
       simultaneousHandlers={[]}
       progressViewOffset={internalProgressViewOffset}