@r0b0t3d/react-native-collapsible 1.0.1 → 1.2.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r0b0t3d/react-native-collapsible",
-  "version": "1.0.1",
+  "version": "1.2.0-alpha.0",
   "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,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';
-import { useInternalCollapsibleContext } from '../hooks/useInternalCollapsibleContext';
+import useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';
 
 type Props = Omit<ViewProps, 'ref' | 'onLayout'> & {
   children: Element;

package/src/components/CollapsibleView.tsx

@@ -63,7 +63,7 @@ export default function CollapsibleView({
   }, []);
 
   const handleLayout = useCallback((event: LayoutChangeEvent) => {
-    if (event.nativeEvent.layout.height > 0) {
+    if (event.nativeEvent.layout.height >= 0) {
       actualHeight.value = event.nativeEvent.layout.height;
     }
   }, []);
@@ -142,7 +142,7 @@ export function CollapsibleHeaderText({
   iconInitialAngle = 0,
   children,
 }: {
-  title: string;
+  title: string | Element;
   style?: StyleProp<ViewStyle>;
   titleStyle?: StyleProp<TextStyle>;
   icon?: ReactNode;
@@ -165,7 +165,7 @@ export function CollapsibleHeaderText({
   }, [iconInitialAngle]);
 
   return (
-    <TouchableOpacity activeOpacity={0.9} onPress={onToggle} style={[style]}>
+    <TouchableOpacity activeOpacity={0.9} onPress={onToggle} style={style}>
       <View style={styles.headerContainer}>
         <Text style={[styles.headerTitle, titleStyle]}>{title}</Text>
         {icon && <Animated.View style={iconStyle}>{icon}</Animated.View>}
@@ -182,6 +182,7 @@ const styles = StyleSheet.create({
   content: {},
   headerContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
   headerTitle: {
     flex: 1,

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,13 +1,13 @@
 /* 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,
   useAnimatedStyle,
-  useSharedValue,
+  useDerivedValue,
 } from 'react-native-reanimated';
 
 type Props = {
@@ -20,46 +20,39 @@ let stickyKey = 0;
 export default function StickyView({ children, style }: Props) {
   const key = useMemo(() => `sticky_${stickyKey++}`, []);
   const viewRef = useRef<View>(null);
-  const { containerRef, handleStickyViewLayout, stickyViewTops } =
+  const { handleStickyViewLayout, stickyViewTops, stickyViewPositions } =
     useInternalCollapsibleContext();
   const { scrollY } = useCollapsibleContext();
-  const layoutValues = useSharedValue({ top: 0, height: 0 });
 
   useEffect(() => {
     return () => handleStickyViewLayout(key, undefined);
   }, []);
 
   const handleLayout = useCallback(() => {
-    if (viewRef.current && containerRef.current) {
-      viewRef.current.measureLayout(
-        // @ts-ignore
-        containerRef.current,
-        (left, top, width, height) => {
-          handleStickyViewLayout(key, { left, top, width, height });
-          layoutValues.value = { top, height };
-        },
-        () => {}
-      );
-    }
-  }, [handleStickyViewLayout]);
+    handleStickyViewLayout(key, viewRef);
+  }, [handleStickyViewLayout, key]);
 
-  const animatedStyle = useAnimatedStyle(() => {
+  const translateY = useDerivedValue(() => {
     const top = stickyViewTops.value[key] || 0;
-    const inputMid = layoutValues.value.top - top;
-    const translateY = interpolate(
+    const layoutValues = stickyViewPositions.value[key] || { top: 0 };
+    const inputMid = layoutValues.top - top;
+    return interpolate(
       scrollY.value,
       [0, inputMid, inputMid + 100000],
       [0, 0, 100000],
       Extrapolate.CLAMP
     );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [
         {
-          translateY: translateY,
+          translateY: translateY.value,
         },
       ],
     };
-  }, [stickyViewTops, layoutValues, scrollY]);
+  }, []);
 
   return (
     <Animated.View

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/scrollable/CollapsibleFlatList.tsx

@@ -0,0 +1,135 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { FlatListProps, View, StyleSheet, FlatList } from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+} from 'react-native-reanimated';
+import AnimatedTopView from '../header/AnimatedTopView';
+import useAnimatedScroll from './useAnimatedScroll';
+import useCollapsibleContext from '../../hooks/useCollapsibleContext';
+import useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';
+import type { CollapsibleProps } from '../../types';
+import PullToRefreshContainer from '../pullToRefresh/PullToRefreshContainer';
+
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+
+type Props<Data> = Omit<FlatListProps<Data>, 'scrollEnabled'> &
+  CollapsibleProps;
+
+export default function CollapsibleFlatList<Data>({
+  headerSnappable = true,
+  ...props
+}: Props<Data>) {
+  const { headerHeight, scrollY } = useCollapsibleContext();
+  const { contentMinHeight } = useInternalCollapsibleContext();
+  const scrollRef = useRef<any>(null);
+  const mounted = useRef(true);
+  const contentHeight = useRef(0);
+
+  useEffect(() => {
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  const scrollTo = useCallback(
+    (yValue: number, animated = true) => {
+      scrollRef.current?.scrollToOffset({
+        offset: yValue,
+        animated,
+      });
+    },
+    [scrollRef]
+  );
+
+  const handleInternalContentHeight = useCallback((value: number) => {
+    if (mounted.current) {
+      setInternalContentMinHeight(value);
+    }
+  }, []);
+
+  const { scrollHandler } = useAnimatedScroll({
+    headerSnappable,
+    scrollTo,
+  });
+
+  const [internalContentMinHeight, setInternalContentMinHeight] = useState(
+    contentMinHeight.value
+  );
+
+  useAnimatedReaction(
+    () => {
+      return contentMinHeight.value;
+    },
+    (result, previous) => {
+      if (result !== previous) {
+        if (
+          contentHeight.current < contentMinHeight.value &&
+          internalContentMinHeight !== contentMinHeight.value
+        ) {
+          runOnJS(handleInternalContentHeight)(contentMinHeight.value);
+        }
+      }
+    }
+  );
+
+  const contentContainerStyle = useMemo(
+    () => [
+      styles.contentContainer,
+      { minHeight: internalContentMinHeight },
+      props.contentContainerStyle,
+    ],
+    [props.contentContainerStyle, internalContentMinHeight]
+  );
+
+  const handleContentSizeChange = useCallback((_, height) => {
+    contentHeight.current = height;
+  }, []);
+
+  const renderListHeader = () => (
+    <View>
+      <AnimatedTopView height={headerHeight} />
+      {props.ListHeaderComponent}
+    </View>
+  );
+
+  return (
+    <PullToRefreshContainer scrollY={scrollY}>
+      {/* @ts-ignore */}
+      <AnimatedFlatList
+        ref={scrollRef}
+        bounces={false}
+        keyboardDismissMode="on-drag"
+        keyboardShouldPersistTaps="handled"
+        scrollEventThrottle={1}
+        {...props}
+        style={[styles.container, props.style]}
+        contentContainerStyle={contentContainerStyle}
+        onScroll={scrollHandler}
+        ListHeaderComponent={renderListHeader()}
+        onContentSizeChange={handleContentSizeChange}
+      />
+    </PullToRefreshContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  topView: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});

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

@@ -1,11 +1,11 @@
-import AnimatedTopView from './AnimatedTopView';
-import useAnimatedScroll from '../hooks/useAnimatedScroll';
+import AnimatedTopView from '../header/AnimatedTopView';
+import useAnimatedScroll from './useAnimatedScroll';
 import React, { ReactNode, useCallback, useMemo, useRef } 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 & {
@@ -52,7 +52,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');
 
@@ -33,9 +33,9 @@ export default function useAnimatedScroll({
 
   const collapse = useCallback(() => {
     scrollTo(
-      Math.min(fixedHeaderHeight.current || 0, firstStickyViewY.current || 0)
+      Math.min(fixedHeaderHeight.value || 0, firstStickyViewY.value || 0)
     );
-  }, [scrollTo, fixedHeaderHeight.current, firstStickyViewY.current]);
+  }, [scrollTo]);
 
   const expand = useCallback(() => scrollTo(0), [scrollTo]);
 
@@ -58,9 +58,9 @@ export default function useAnimatedScroll({
       onEndDrag: () => {
         if (!headerSnappable) return;
         const maxY =
-          firstStickyViewY.current && firstStickyViewY.current > 0
-            ? firstStickyViewY.current
-            : fixedHeaderHeight.current || 0;
+          firstStickyViewY.value && firstStickyViewY.value > 0
+            ? firstStickyViewY.value
+            : fixedHeaderHeight.value || 0;
 
         if (scrollY.value < maxY) {
           const delta = Math.abs(scrollY.value - maxY);
@@ -74,7 +74,7 @@ export default function useAnimatedScroll({
         }
       },
     },
-    [firstStickyViewY.current, fixedHeaderHeight.current]
+    [scrollTo]
   );
 
   return {

package/src/hooks/useInternalCollapsibleContext.ts

@@ -5,7 +5,7 @@ export const InternalCollapsibleContext =
   // @ts-ignore
   createContext<CollapsibleContextInternalType>();
 
-export function useInternalCollapsibleContext() {
+export default function useInternalCollapsibleContext() {
   const ctx = useContext(InternalCollapsibleContext);
   if (!ctx) {
     throw new Error('Component should be wrapped with withCollapsibleContext');

package/src/index.tsx

@@ -1,10 +1,11 @@
-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';