@r0b0t3d/react-native-collapsible 1.3.5-beta.4 → 1.3.5-beta.5

package/src/components/header/CollapsibleHeaderContainer.tsx

@@ -1,27 +1,7 @@
-import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
-import {
-  StyleProp,
-  ViewStyle,
-  LayoutChangeEvent,
-  LayoutRectangle,
-  StyleSheet,
-} from 'react-native';
-import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
-import useCollapsibleContext from '../../hooks/useCollapsibleContext';
-import Animated, {
-  Extrapolate,
-  interpolate,
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-} from 'react-native-reanimated';
-import {
-  CollapsibleContextHeaderType,
-  CollapsibleHeaderContext,
-} from '../../hooks/useCollapsibleHeaderContext';
-import useSharedValueRef from '../../utils/useSharedValueRef';
+import React, { ReactNode, useEffect, useMemo } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import useCollapsibleHeaderConsumerContext from '../../hooks/useCollapsibleHeaderConsumerContext';
+import CollapsibleHeaderContainerProvider from './CollapsibleHeaderContainerProvider';
 
 type Props = {
   children: ReactNode;
@@ -35,63 +15,7 @@ export default function CollapsibleHeaderContainer({
   containerStyle,
 }: Props) {
   const contentKey = useMemo(() => `collapsible-header-${key++}`, []);
-  const { handleHeaderContainerLayout, headerViewPositions } =
-    useInternalCollapsibleContext();
-  const { scrollY } = useCollapsibleContext();
-  const currentLayout = useSharedValue<LayoutRectangle | undefined>(undefined);
-  const [stickyLayouts, setStickyLayouts] = useSharedValueRef<
-    Record<string, LayoutRectangle | undefined>
-  >({});
-
-  useEffect(() => {
-    return () => {
-      handleHeaderContainerLayout(contentKey);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contentKey]);
-
-  const stickyHeight = useDerivedValue(
-    () =>
-      Object.values(stickyLayouts.value).reduce(
-        (acc, value) => acc + (value?.height ?? 0),
-        0
-      ),
-    []
-  );
-
-  useAnimatedReaction(
-    () => {
-      if (!currentLayout.value) {
-        return -1;
-      }
-      return currentLayout.value.height - stickyHeight.value;
-    },
-    (result, previous) => {
-      if (result !== -1 && result !== previous) {
-        runOnJS(handleHeaderContainerLayout)(
-          contentKey,
-          currentLayout.value,
-          stickyHeight.value
-        );
-      }
-    }
-  );
-
-  const handleLayout = useCallback(
-    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
-      currentLayout.value = layout;
-    },
-    [currentLayout]
-  );
-
-  const handleStickyViewLayout = useCallback(
-    (stickyKey: string, layout?: LayoutRectangle) => {
-      setStickyLayouts({
-        [stickyKey]: layout,
-      });
-    },
-    [setStickyLayouts]
-  );
+  const { mount, unmount, update } = useCollapsibleHeaderConsumerContext();
 
   const internalStyle = useMemo(() => {
     return {
@@ -99,71 +23,31 @@ export default function CollapsibleHeaderContainer({
     };
   }, []);
 
-  const translateY = useDerivedValue(() => {
-    const position = headerViewPositions.value[contentKey];
-    if (!currentLayout.value || !position) {
-      return scrollY.value;
-    }
-    const topPosition =
-      currentLayout.value.height +
-      currentLayout.value.y -
-      position.top -
-      position.stickyHeight;
-
-    return interpolate(
-      scrollY.value,
-      [0, topPosition, 10000],
-      [0, -topPosition, -topPosition],
-      Extrapolate.CLAMP
+  const content = useMemo(() => {
+    return (
+      <CollapsibleHeaderContainerProvider
+        containerStyle={[containerStyle, internalStyle]}
+        contentKey={contentKey}
+        key={contentKey}
+      >
+        {children}
+      </CollapsibleHeaderContainerProvider>
     );
-  });
+  }, [children, containerStyle, contentKey, internalStyle]);
 
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          translateY: translateY.value,
-        },
-      ],
-    };
-  });
-
-  const animatedY = useDerivedValue(() => {
-    const position = headerViewPositions.value[contentKey];
-    if (!currentLayout.value || !position) {
-      return 0;
-    }
-    const value = scrollY.value - currentLayout.value.y + position.top;
-    const maxV = currentLayout.value.height - stickyHeight.value;
+  useEffect(() => {
+    mount(contentKey, content);
 
-    return Math.max(0, Math.min(value, maxV));
-  });
+    return () => {
+      unmount(contentKey);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentKey]);
 
-  const value: CollapsibleContextHeaderType = useMemo(
-    () => ({
-      handleStickyViewLayout,
-      animatedY,
-    }),
-    [handleStickyViewLayout, animatedY]
-  );
+  useEffect(() => {
+    update(contentKey, content);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [content]);
 
-  return (
-    <CollapsibleHeaderContext.Provider value={value}>
-      <Animated.View
-        key={contentKey}
-        style={[styles.container, containerStyle, internalStyle, animatedStyle]}
-        pointerEvents="box-none"
-        onLayout={handleLayout}
-      >
-        {children}
-      </Animated.View>
-    </CollapsibleHeaderContext.Provider>
-  );
+  return null;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-    backgroundColor: 'white',
-  },
-});

package/src/components/header/CollapsibleHeaderContainerProvider.tsx

@@ -0,0 +1,162 @@
+import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
+import {
+  StyleProp,
+  ViewStyle,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  StyleSheet,
+} from 'react-native';
+import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
+import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import Animated, {
+  Extrapolate,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+import {
+  CollapsibleContextHeaderType,
+  CollapsibleHeaderContext,
+} from '../../hooks/useCollapsibleHeaderContext';
+import useSharedValueRef from '../../utils/useSharedValueRef';
+
+type Props = {
+  children: ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+  contentKey: string;
+};
+
+export default function CollapsibleHeaderContainerProvider({
+  children,
+  containerStyle,
+  contentKey,
+}: Props) {
+  const { handleHeaderContainerLayout, headerViewPositions } =
+    useInternalCollapsibleContext();
+  const { scrollY } = useCollapsibleContext();
+  const currentLayout = useSharedValue<LayoutRectangle | undefined>(undefined);
+  const [stickyLayouts, setStickyLayouts] = useSharedValueRef<
+    Record<string, LayoutRectangle | undefined>
+  >({});
+
+  useEffect(() => {
+    return () => {
+      handleHeaderContainerLayout(contentKey);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentKey]);
+
+  const stickyHeight = useDerivedValue(
+    () =>
+      Object.values(stickyLayouts.value).reduce(
+        (acc, value) => acc + (value?.height ?? 0),
+        0
+      ),
+    []
+  );
+
+  useAnimatedReaction(
+    () => {
+      if (!currentLayout.value) {
+        return -1;
+      }
+      return currentLayout.value.height - stickyHeight.value;
+    },
+    (result, previous) => {
+      if (result !== -1 && result !== previous) {
+        runOnJS(handleHeaderContainerLayout)(
+          contentKey,
+          currentLayout.value,
+          stickyHeight.value
+        );
+      }
+    }
+  );
+
+  const handleLayout = useCallback(
+    ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
+      currentLayout.value = layout;
+    },
+    [currentLayout]
+  );
+
+  const handleStickyViewLayout = useCallback(
+    (stickyKey: string, layout?: LayoutRectangle) => {
+      setStickyLayouts({
+        [stickyKey]: layout,
+      });
+    },
+    [setStickyLayouts]
+  );
+
+  const translateY = useDerivedValue(() => {
+    const position = headerViewPositions.value[contentKey];
+    if (!currentLayout.value || !position) {
+      return scrollY.value;
+    }
+    const topPosition =
+      currentLayout.value.height +
+      currentLayout.value.y -
+      position.top -
+      position.stickyHeight;
+
+    return interpolate(
+      scrollY.value,
+      [0, topPosition, 10000],
+      [0, -topPosition, -topPosition],
+      Extrapolate.CLAMP
+    );
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: translateY.value,
+        },
+      ],
+    };
+  });
+
+  const animatedY = useDerivedValue(() => {
+    const position = headerViewPositions.value[contentKey];
+    if (!currentLayout.value || !position) {
+      return 0;
+    }
+    const value = scrollY.value - currentLayout.value.y + position.top;
+    const maxV = currentLayout.value.height - stickyHeight.value;
+
+    return Math.max(0, Math.min(value, maxV));
+  });
+
+  const value: CollapsibleContextHeaderType = useMemo(
+    () => ({
+      handleStickyViewLayout,
+      animatedY,
+    }),
+    [handleStickyViewLayout, animatedY]
+  );
+
+  return (
+    <CollapsibleHeaderContext.Provider value={value}>
+      <Animated.View
+        key={contentKey}
+        style={[styles.container, containerStyle, animatedStyle]}
+        pointerEvents="box-none"
+        onLayout={handleLayout}
+      >
+        {children}
+      </Animated.View>
+    </CollapsibleHeaderContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    backgroundColor: 'white',
+  },
+});

package/src/hooks/useCollapsibleHeaderConsumerContext.ts

@@ -0,0 +1,22 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+export type HeaderItem = { key: string; children: ReactNode };
+
+type CollapsibleContextHeaderConsumerType = {
+  headers: HeaderItem[];
+  mount: (key: string, header: ReactNode) => void;
+  update: (key: string, header: ReactNode) => void;
+  unmount: (key: string) => void;
+};
+
+export const CollapsibleHeaderConsumerContext =
+  // @ts-ignore
+  createContext<CollapsibleContextHeaderConsumerType>({});
+
+export default function useCollapsibleHeaderConsumerContext() {
+  const ctx = useContext(CollapsibleHeaderConsumerContext);
+  if (!ctx) {
+    throw new Error('Component should be wrapped CollapsibleHeaderProvider');
+  }
+  return ctx;
+}

package/src/types.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { LayoutRectangle, View } from 'react-native';
+import type { LayoutRectangle } from 'react-native';
 import type Animated from 'react-native-reanimated';
 
 export type ScrollToIndexParams = {
@@ -31,7 +31,6 @@ export type LayoutParams = {
 
 export type CollapsibleContextInternalType = {
   scrollViewRef: React.RefObject<any>;
-  containerRef: React.RefObject<View>;
   contentMinHeight: Animated.SharedValue<number>;
   headerViewPositions: Animated.SharedValue<
     Record<string, { top: number; stickyHeight: number }>

package/src/withCollapsibleContext.tsx

@@ -17,7 +17,6 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
     const scrollY = useSharedValue(0);
     const fixedHeaderHeight = useSharedValue(0);
     const containerHeight = useSharedValue(0);
-    const containerRef = useRef<View>(null);
     const scrollViewRef = useRef<View>(null);
     const headerContainerLayouts = useRef<
       Record<string, (LayoutRectangle & { stickyHeight?: number }) | undefined>
@@ -104,7 +103,6 @@ export default function withCollapsibleContext<T>(Component: FC<T>) {
     const internalContext = useMemo(
       () => ({
         scrollViewRef,
-        containerRef,
         handleHeaderContainerLayout,
         setCollapsibleHandlers,
         handleContainerHeight,