@r0b0t3d/react-native-collapsible 1.1.0 → 1.2.0-alpha.1

package/lib/typescript/components/pullToRefresh/usePullToRefreshContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { PullToRefreshContextType } from '../../types';
+export declare const PullToRefreshContext: import("react").Context<PullToRefreshContextType>;
+export default function usePullToRefreshContext(): PullToRefreshContextType;

package/lib/typescript/components/pullToRefresh/utils.d.ts

@@ -0,0 +1,20 @@
+export declare const springConfig: (velocity: number) => {
+    stiffness: number;
+    damping: number;
+    mass: number;
+    overshootClamping: boolean;
+    restDisplacementThreshold: number;
+    restSpeedThreshold: number;
+    velocity: number;
+};
+export declare function clamp(value: number, lowerbound: number, upperbound: number): number;
+/**
+ * calculates rubber value
+ *
+ * @param x distance from the edge
+ * @param dim dimension, either width or height
+ * @param coeff constant value, UIScrollView uses 0.55
+ * @returns rubber = (1.0 – (1.0 / ((x * coeff / dim) + 1.0))) * dim
+ */
+export declare const rubberBandClamp: (x: number, dim: number, coeff: number) => number;
+export declare const rubberClamp: (y: number, topBound: number, bottomBound: number, coeff?: number) => number;

package/lib/typescript/components/{CollapsibleFlatList.d.ts → scrollable/CollapsibleFlatList.d.ts}

@@ -1,5 +1,5 @@
 import { FlatListProps } from 'react-native';
-import type { CollapsibleProps } from '../types';
+import type { CollapsibleProps } from '../../types';
 declare type Props<Data> = Omit<FlatListProps<Data>, 'scrollEnabled'> & CollapsibleProps;
 export default function CollapsibleFlatList<Data>({ headerSnappable, ...props }: Props<Data>): JSX.Element;
 export {};

package/lib/typescript/components/{CollapsibleScrollView.d.ts → scrollable/CollapsibleScrollView.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ScrollViewProps } from 'react-native';
-import type { CollapsibleProps } from '../types';
+import type { CollapsibleProps } from '../../types';
 declare type Props = ScrollViewProps & CollapsibleProps & {
     children?: ReactNode;
 };

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { CollapsibleContextInternalType } from '../types';
 export declare const InternalCollapsibleContext: import("react").Context<CollapsibleContextInternalType>;
-export declare function useInternalCollapsibleContext(): CollapsibleContextInternalType;
+export default function useInternalCollapsibleContext(): CollapsibleContextInternalType;

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

@@ -0,0 +1 @@
+export default function useKeyboardShowEvent(callback: () => void): void;

package/lib/typescript/index.d.ts

@@ -1,9 +1,10 @@
-export { default as withCollapsibleContext } from './hooks/withCollapsibleContext';
+export { default as withCollapsibleContext } from './withCollapsibleContext';
 export { default as useCollapsibleContext } from './hooks/useCollapsibleContext';
 export { default as CollapsibleContainer } from './components/CollapsibleContainer';
-export { default as CollapsibleFlatList } from './components/CollapsibleFlatList';
-export { default as CollapsibleScrollView } from './components/CollapsibleScrollView';
-export { default as CollapsibleHeaderContainer } from './components/CollapsibleHeaderContainer';
+export { default as CollapsibleFlatList } from './components/scrollable/CollapsibleFlatList';
+export { default as CollapsibleScrollView } from './components/scrollable/CollapsibleScrollView';
+export { default as CollapsibleHeaderContainer } from './components/header/CollapsibleHeaderContainer';
+export { default as StickyView } from './components/header/StickyView';
+export { default as RefreshControl } from './components/pullToRefresh/RefreshControl';
 export { default as CollapsibleView } from './components/CollapsibleView';
-export { default as StickyView } from './components/StickyView';
 export * from './components/CollapsibleView';

package/lib/typescript/types.d.ts

@@ -18,6 +18,7 @@ export declare type LayoutParams = {
     height: number;
 };
 export declare type CollapsibleContextInternalType = {
+    scrollViewRef: React.RefObject<any>;
     containerRef: React.RefObject<View>;
     contentMinHeight: Animated.SharedValue<number>;
     firstStickyViewY: Animated.SharedValue<number>;
@@ -32,3 +33,8 @@ export declare type CollapsibleContextInternalType = {
 export declare type CollapsibleProps = {
     headerSnappable?: boolean;
 };
+export declare type PullToRefreshContextType = {
+    refreshValue: Animated.SharedValue<number>;
+    internalRefreshing: Animated.SharedValue<boolean>;
+    internalHeight: Animated.SharedValue<number>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r0b0t3d/react-native-collapsible",
-  "version": "1.1.0",
+  "version": "1.2.0-alpha.1",
   "description": "Fully customizable collapsible views",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -64,6 +64,7 @@
     "react": "16.13.1",
     "react-native": "0.63.4",
     "react-native-builder-bob": "^0.18.0",
+    "react-native-gesture-handler": "^1.10.3",
     "react-native-reanimated": "^2.2.0",
     "release-it": "^14.11.5",
     "typescript": "^4.1.3"
@@ -71,7 +72,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-reanimated": "^2.2.0"
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": ">=2.2.0"
   },
   "jest": {
     "preset": "react-native",

package/src/components/CollapsibleContainer.tsx

@@ -1,32 +1,85 @@
-import React, { useCallback } from 'react';
-import { LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';
-import { useInternalCollapsibleContext } from '../hooks/useInternalCollapsibleContext';
+import React, { useCallback, useRef } from 'react';
+import {
+  KeyboardAvoidingView,
+  KeyboardAvoidingViewProps,
+  LayoutChangeEvent,
+  StyleSheet,
+  View,
+  ViewProps,
+} from 'react-native';
+import useKeyboardShowEvent from '../hooks/useKeyboardShowEvent';
+import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
+import useCollapsibleContext from '../hooks/useCollapsibleContext';
 
 type Props = Omit<ViewProps, 'ref' | 'onLayout'> & {
   children: Element;
+  keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
+  textInputRefs?: any[];
 };
 
-export default function CollapsibleContainer({ children, ...props }: Props) {
+export default function CollapsibleContainer({
+  children,
+  keyboardAvoidingViewProps,
+  textInputRefs = [],
+  ...props
+}: Props) {
   const { containerRef, handleContainerHeight } =
     useInternalCollapsibleContext();
+  const { scrollY, scrollTo } = useCollapsibleContext();
+
+  const containerHeight = useRef(0);
+
+  useKeyboardShowEvent(() => {
+    textInputRefs.some((ref) => {
+      const isFocusedFunc = ref.current.isFocused;
+      const isFocused =
+        isFocusedFunc && typeof isFocusedFunc === 'function'
+          ? isFocusedFunc()
+          : isFocusedFunc;
+      if (isFocused) {
+        ref.current.measureLayout(
+          // @ts-ignore
+          containerRef.current,
+          (left: number, top: number, width: number, height: number) => {
+            console.log({ left, top, width, height });
+            if (top + height - scrollY.value > containerHeight.current) {
+              console.log('need to scroll');
+              const extraOffset =
+                keyboardAvoidingViewProps?.keyboardVerticalOffset ?? 20;
+              scrollTo(top + height + extraOffset - containerHeight.current);
+            }
+          },
+          () => {}
+        );
+      }
+      return isFocused;
+    });
+  });
 
   const handleContainerLayout = useCallback(
     (layout: LayoutChangeEvent) => {
       const height = layout.nativeEvent.layout.height;
+      containerHeight.current = height;
       handleContainerHeight(height);
     },
     [handleContainerHeight]
   );
 
   return (
-    <View
-      {...props}
-      ref={containerRef}
-      style={[styles.container, props.style]}
-      onLayout={handleContainerLayout}
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior="padding"
+      {...keyboardAvoidingViewProps}
     >
-      {children}
-    </View>
+      <View
+        {...props}
+        ref={containerRef}
+        style={[styles.container, props.style]}
+        onLayout={handleContainerLayout}
+      >
+        {children}
+      </View>
+    </KeyboardAvoidingView>
   );
 }
 

package/src/components/{CollapsibleHeaderContainer.tsx → header/CollapsibleHeaderContainer.tsx}

@@ -1,8 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useInternalCollapsibleContext } from '../hooks/useInternalCollapsibleContext';
+import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
 import React, { ReactNode, useCallback, useEffect, useMemo } from 'react';
 import {
   LayoutChangeEvent,
+  Platform,
   StyleProp,
   StyleSheet,
   View,
@@ -15,7 +16,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import useCollapsibleContext from '../hooks/useCollapsibleContext';
+import useCollapsibleContext from '../../hooks/useCollapsibleContext';
 
 type Props = {
   children: ReactNode;
@@ -78,14 +79,14 @@ export default function CollapsibleHeaderContainer({
 
   return (
     <Animated.View
-      style={[styles.container, headerStyle, internalStyle]}
+      style={[headerStyle, internalStyle]}
       pointerEvents="box-none"
     >
       <View
         key={contentKey}
         onLayout={handleHeaderLayout}
         pointerEvents="box-none"
-        style={containerStyle}
+        style={[styles.container, containerStyle]}
       >
         {children}
       </View>
@@ -96,5 +97,6 @@ export default function CollapsibleHeaderContainer({
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
+    marginTop: Platform.OS === 'android' ? -1 : 0,
   },
 });

package/src/components/{StickyView.tsx → header/StickyView.tsx}

@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useInternalCollapsibleContext } from '../hooks/useInternalCollapsibleContext';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import useCollapsibleContext from '../hooks/useCollapsibleContext';
+import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
 import Animated, {
   Extrapolate,
   interpolate,

package/src/components/pullToRefresh/PullToRefreshContainer.tsx

@@ -0,0 +1,65 @@
+import {
+  NativeViewGestureHandler,
+  PanGestureHandler,
+} from 'react-native-gesture-handler';
+import React, { useRef } from 'react';
+import Animated, {
+  useAnimatedGestureHandler,
+  withTiming,
+} from 'react-native-reanimated';
+import usePullToRefreshContext from './usePullToRefreshContext';
+import { StyleSheet } from 'react-native';
+import { rubberClamp } from './utils';
+
+type Props = {
+  children: React.ReactNode;
+  scrollY: Animated.SharedValue<number>;
+};
+
+export default function PullToRefreshContainer({ children, scrollY }: Props) {
+  const scrollRef = useRef();
+  const panRef = useRef();
+  const { refreshValue, internalRefreshing, internalHeight } =
+    usePullToRefreshContext();
+
+  const gestureHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx: any) => {
+      ctx.startY = internalRefreshing.value ? refreshValue.value : 0;
+    },
+    onActive: (event, ctx: any) => {
+      if (scrollY.value <= 1) {
+        const tranY = event.translationY + ctx.startY;
+        const clampedValue = rubberClamp(tranY, 0, internalHeight.value);
+        refreshValue.value = clampedValue;
+        if (clampedValue > internalHeight.value) {
+          internalRefreshing.value = true;
+        }
+      } else {
+        refreshValue.value = 0;
+      }
+    },
+    onEnd: () => {
+      if (refreshValue.value > 0) {
+        const value = internalRefreshing.value ? internalHeight.value : 0;
+        refreshValue.value = withTiming(value);
+      }
+    },
+  });
+
+  return (
+    <PanGestureHandler
+      ref={panRef}
+      simultaneousHandlers={scrollRef}
+      onGestureEvent={gestureHandler}
+      shouldCancelWhenOutside={false}
+      enableTrackpadTwoFingerGesture
+      maxPointers={1}
+    >
+      <Animated.View style={StyleSheet.absoluteFill}>
+        <NativeViewGestureHandler ref={scrollRef} simultaneousHandlers={panRef}>
+          {children}
+        </NativeViewGestureHandler>
+      </Animated.View>
+    </PanGestureHandler>
+  );
+}

package/src/components/pullToRefresh/PullToRefreshProvider.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import { PullToRefreshContext } from './usePullToRefreshContext';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function PullToRefreshProvider({ children }: Props) {
+  const refreshValue = useSharedValue(0);
+  const internalRefreshing = useSharedValue(false);
+  const internalHeight = useSharedValue(0);
+
+  const context = useMemo(() => {
+    return {
+      refreshValue: refreshValue,
+      internalRefreshing,
+      internalHeight,
+    };
+  }, [refreshValue, internalRefreshing, internalHeight]);
+
+  return (
+    <PullToRefreshContext.Provider value={context}>
+      {children}
+    </PullToRefreshContext.Provider>
+  );
+}

package/src/components/pullToRefresh/RefreshControl.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useCallback, useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedProps,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+import usePullToRefreshContext from './usePullToRefreshContext';
+
+type Props = {
+  height?: number;
+  refreshing: boolean;
+  onRefresh: () => void;
+  renderAnimation: (animatedProps: any) => React.ReactNode;
+};
+
+export default function RefreshControl({
+  height = 100,
+  refreshing,
+  onRefresh,
+  renderAnimation,
+}: Props) {
+  const { refreshValue, internalRefreshing, internalHeight } =
+    usePullToRefreshContext();
+
+  useEffect(() => {
+    internalHeight.value = height;
+  }, [height]);
+
+  useEffect(() => {
+    internalRefreshing.value = refreshing;
+  }, [refreshing]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      height: refreshValue.value,
+    };
+  }, []);
+
+  const handleRefresh = useCallback(() => {
+    console.log('refresh');
+    onRefresh();
+  }, [onRefresh]);
+
+  useAnimatedReaction(
+    () => internalRefreshing.value,
+    (result, prev) => {
+      if (result !== prev) {
+        if (result) {
+          runOnJS(handleRefresh)();
+        } else {
+          refreshValue.value = withTiming(0);
+        }
+      }
+    }
+  );
+
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      progress: internalRefreshing.value
+        ? undefined
+        : Math.min(refreshValue.value / height, 1),
+    };
+  }, [height]);
+
+  return (
+    <Animated.View style={[styles.container, animatedStyle]}>
+      {renderAnimation(animatedProps)}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+});

package/src/components/pullToRefresh/usePullToRefreshContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import type { PullToRefreshContextType } from '../../types';
+
+// @ts-ignore
+export const PullToRefreshContext = createContext<PullToRefreshContextType>({});
+
+export default function usePullToRefreshContext() {
+  const ctx = useContext(PullToRefreshContext);
+  if (!ctx) {
+    throw new Error('Component should be wrapped with withCollapsibleContext');
+  }
+  return ctx;
+}

package/src/components/pullToRefresh/utils.ts

@@ -0,0 +1,49 @@
+export const springConfig = (velocity: number) => {
+  'worklet';
+
+  return {
+    stiffness: 1000,
+    damping: 500,
+    mass: 3,
+    overshootClamping: true,
+    restDisplacementThreshold: 0.01,
+    restSpeedThreshold: 0.01,
+    velocity,
+  };
+};
+
+export function clamp(value: number, lowerbound: number, upperbound: number) {
+  'worklet';
+
+  return Math.min(Math.max(value, lowerbound), upperbound);
+}
+
+/**
+ * calculates rubber value
+ *
+ * @param x distance from the edge
+ * @param dim dimension, either width or height
+ * @param coeff constant value, UIScrollView uses 0.55
+ * @returns rubber = (1.0 – (1.0 / ((x * coeff / dim) + 1.0))) * dim
+ */
+export const rubberBandClamp = (x: number, dim: number, coeff: number) => {
+  'worklet';
+
+  return (1.0 - 1.0 / ((x * coeff) / dim + 1.0)) * dim;
+};
+
+export const rubberClamp = (
+  y: number,
+  topBound: number,
+  bottomBound: number,
+  coeff = 0.55
+) => {
+  'worklet';
+
+  const clampedY = clamp(y, topBound, bottomBound);
+  const diff = Math.abs(y - clampedY);
+  const sign = clampedY > y ? -1 : 1;
+  const dimension = bottomBound - topBound;
+
+  return clampedY + sign * rubberBandClamp(diff, dimension, coeff);
+};

package/src/components/{CollapsibleFlatList.tsx → scrollable/CollapsibleFlatList.tsx}

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, {
   useCallback,
   useEffect,
@@ -5,16 +6,17 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { FlatListProps, FlatList, View, StyleSheet } from 'react-native';
+import { FlatListProps, View, StyleSheet, FlatList } from 'react-native';
 import Animated, {
   runOnJS,
   useAnimatedReaction,
 } from 'react-native-reanimated';
-import AnimatedTopView from './AnimatedTopView';
-import useAnimatedScroll from '../hooks/useAnimatedScroll';
-import useCollapsibleContext from '../hooks/useCollapsibleContext';
-import type { CollapsibleProps } from '../types';
-import { useInternalCollapsibleContext } from '../hooks/useInternalCollapsibleContext';
+import AnimatedTopView from '../header/AnimatedTopView';
+import useAnimatedScroll from './useAnimatedScroll';
+import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
+import type { CollapsibleProps } from '../../types';
+import PullToRefreshContainer from '../pullToRefresh/PullToRefreshContainer';
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 
@@ -25,9 +27,8 @@ export default function CollapsibleFlatList<Data>({
   headerSnappable = true,
   ...props
 }: Props<Data>) {
-  const scrollView = useRef<FlatList>(null);
-  const { headerHeight } = useCollapsibleContext();
-  const { contentMinHeight } = useInternalCollapsibleContext();
+  const { headerHeight, scrollY } = useCollapsibleContext();
+  const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();
   const mounted = useRef(true);
   const contentHeight = useRef(0);
 
@@ -38,7 +39,7 @@ export default function CollapsibleFlatList<Data>({
   }, []);
 
   const scrollTo = useCallback((yValue: number, animated = true) => {
-    scrollView.current?.scrollToOffset({
+    scrollViewRef.current?.scrollToOffset({
       offset: yValue,
       animated,
     });
@@ -96,20 +97,22 @@ export default function CollapsibleFlatList<Data>({
   );
 
   return (
-    // @ts-ignore
-    <AnimatedFlatList
-      ref={scrollView}
-      bounces={false}
-      keyboardDismissMode="on-drag"
-      keyboardShouldPersistTaps="handled"
-      scrollEventThrottle={16}
-      {...props}
-      style={[styles.container, props.style]}
-      contentContainerStyle={contentContainerStyle}
-      onScroll={scrollHandler}
-      ListHeaderComponent={renderListHeader()}
-      onContentSizeChange={handleContentSizeChange}
-    />
+    <PullToRefreshContainer scrollY={scrollY}>
+      {/* @ts-ignore */}
+      <AnimatedFlatList
+        ref={scrollViewRef}
+        bounces={false}
+        keyboardDismissMode="on-drag"
+        keyboardShouldPersistTaps="handled"
+        scrollEventThrottle={1}
+        {...props}
+        style={[styles.container, props.style]}
+        contentContainerStyle={contentContainerStyle}
+        onScroll={scrollHandler}
+        ListHeaderComponent={renderListHeader()}
+        onContentSizeChange={handleContentSizeChange}
+      />
+    </PullToRefreshContainer>
   );
 }
 

package/src/components/{CollapsibleScrollView.tsx → scrollable/CollapsibleScrollView.tsx}

@@ -1,11 +1,12 @@
-import AnimatedTopView from './AnimatedTopView';
-import useAnimatedScroll from '../hooks/useAnimatedScroll';
-import React, { ReactNode, useCallback, useMemo, useRef } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import AnimatedTopView from '../header/AnimatedTopView';
+import useAnimatedScroll from './useAnimatedScroll';
+import React, { ReactNode, useCallback, useMemo } from 'react';
 import { ScrollViewProps, StyleSheet } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-import type { CollapsibleProps } from '../types';
-import useCollapsibleContext from '../hooks/useCollapsibleContext';
-import { useInternalCollapsibleContext } from '../hooks/useInternalCollapsibleContext';
+import type { CollapsibleProps } from '../../types';
+import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
 
 type Props = ScrollViewProps &
   CollapsibleProps & {
@@ -17,13 +18,11 @@ export default function CollapsibleScrollView({
   children,
   ...props
 }: Props) {
-  const scrollView = useRef<Animated.ScrollView>(null);
-  const { contentMinHeight } = useInternalCollapsibleContext();
+  const { contentMinHeight, scrollViewRef } = useInternalCollapsibleContext();
   const { headerHeight } = useCollapsibleContext();
 
   const scrollTo = useCallback((yValue: number, animated = true) => {
-    // @ts-ignore
-    scrollView.current?.scrollTo({ y: yValue, animated });
+    scrollViewRef.current?.scrollTo({ y: yValue, animated });
   }, []);
 
   const { scrollHandler } = useAnimatedScroll({
@@ -44,7 +43,7 @@ export default function CollapsibleScrollView({
 
   return (
     <Animated.ScrollView
-      ref={scrollView}
+      ref={scrollViewRef}
       bounces={false}
       {...props}
       style={[styles.container, props.style]}
@@ -52,7 +51,7 @@ export default function CollapsibleScrollView({
       onScroll={scrollHandler}
       keyboardDismissMode="on-drag"
       keyboardShouldPersistTaps="handled"
-      scrollEventThrottle={16}
+      scrollEventThrottle={1}
     >
       <Animated.View style={animatedStyle}>
         <AnimatedTopView height={headerHeight} />

package/src/{hooks → components/scrollable}/useAnimatedScroll.ts

@@ -6,8 +6,8 @@ import {
   useAnimatedScrollHandler,
   useSharedValue,
 } from 'react-native-reanimated';
-import useCollapsibleContext from './useCollapsibleContext';
-import { useInternalCollapsibleContext } from './useInternalCollapsibleContext';
+import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
 
 const { height: wHeight } = Dimensions.get('window');