@mustmove/bottom-sheet 1.0.0

package/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx

@@ -0,0 +1,211 @@
+import { PortalProvider } from '@gorhom/portal';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import {
+  INITIAL_CONTAINER_LAYOUT,
+  MODAL_STACK_BEHAVIOR,
+} from '../../constants';
+import {
+  BottomSheetModalInternalProvider,
+  BottomSheetModalProvider,
+} from '../../contexts';
+import type { ContainerLayoutState } from '../../types';
+import { id } from '../../utilities/id';
+import { BottomSheetHostingContainer } from '../bottomSheetHostingContainer';
+import type {
+  BottomSheetModalPrivateMethods,
+  BottomSheetModalStackBehavior,
+} from '../bottomSheetModal';
+import type {
+  BottomSheetModalProviderProps,
+  BottomSheetModalRef,
+} from './types';
+
+const BottomSheetModalProviderWrapper = ({
+  children,
+}: BottomSheetModalProviderProps) => {
+  //#region layout variables
+  const animatedContainerLayoutState = useSharedValue<ContainerLayoutState>(
+    INITIAL_CONTAINER_LAYOUT
+  );
+  //#endregion
+
+  //#region variables
+  const hostName = useMemo(() => `bottom-sheet-portal-${id()}`, []);
+  const sheetsQueueRef = useRef<BottomSheetModalRef[]>([]);
+  //#endregion
+
+  //#region private methods
+  const handleMountSheet = useCallback(
+    (
+      key: string,
+      ref: React.RefObject<BottomSheetModalPrivateMethods>,
+      stackBehavior: BottomSheetModalStackBehavior
+    ) => {
+      const _sheetsQueue = sheetsQueueRef.current.slice();
+      const sheetIndex = _sheetsQueue.findIndex(item => item.key === key);
+      const sheetOnTop = sheetIndex === _sheetsQueue.length - 1;
+
+      /**
+       * Exit the method, if sheet is already presented
+       * and at the top.
+       */
+      if (sheetIndex !== -1 && sheetOnTop) {
+        return;
+      }
+
+      /**
+       * Minimize the current sheet if:
+       * - it exists.
+       * - it is not unmounting.
+       * - stack behavior is 'replace'.
+       */
+
+      /**
+       * Handle switch or replace stack behaviors, if:
+       * - a modal is currently presented.
+       * - it is not unmounting
+       */
+      const currentMountedSheet = _sheetsQueue[_sheetsQueue.length - 1];
+      if (currentMountedSheet && !currentMountedSheet.willUnmount) {
+        if (stackBehavior === MODAL_STACK_BEHAVIOR.replace) {
+          currentMountedSheet.ref?.current?.dismiss();
+        } else if (stackBehavior === MODAL_STACK_BEHAVIOR.switch) {
+          currentMountedSheet.ref?.current?.minimize();
+        }
+      }
+
+      /**
+       * Restore and remove incoming sheet from the queue,
+       * if it was registered.
+       */
+      if (sheetIndex !== -1) {
+        _sheetsQueue.splice(sheetIndex, 1);
+        ref?.current?.restore();
+      }
+
+      _sheetsQueue.push({
+        key,
+        ref,
+        willUnmount: false,
+      });
+      sheetsQueueRef.current = _sheetsQueue;
+    },
+    []
+  );
+  const handleUnmountSheet = useCallback((key: string) => {
+    const _sheetsQueue = sheetsQueueRef.current.slice();
+    const sheetIndex = _sheetsQueue.findIndex(item => item.key === key);
+    const sheetOnTop = sheetIndex === _sheetsQueue.length - 1;
+
+    /**
+     * Here we remove the unmounted sheet and update
+     * the sheets queue.
+     */
+    _sheetsQueue.splice(sheetIndex, 1);
+    sheetsQueueRef.current = _sheetsQueue;
+
+    /**
+     * Here we try to restore previous sheet position if unmounted
+     * sheet was on top. This is needed when user dismiss
+     * the modal by panning down.
+     */
+    const hasMinimizedSheet = sheetsQueueRef.current.length > 0;
+    const minimizedSheet =
+      sheetsQueueRef.current[sheetsQueueRef.current.length - 1];
+    if (
+      sheetOnTop &&
+      hasMinimizedSheet &&
+      minimizedSheet &&
+      !minimizedSheet.willUnmount
+    ) {
+      sheetsQueueRef.current[
+        sheetsQueueRef.current.length - 1
+      ].ref?.current?.restore();
+    }
+  }, []);
+  const handleWillUnmountSheet = useCallback((key: string) => {
+    const _sheetsQueue = sheetsQueueRef.current.slice();
+    const sheetIndex = _sheetsQueue.findIndex(item => item.key === key);
+    const sheetOnTop = sheetIndex === _sheetsQueue.length - 1;
+
+    /**
+     * Here we mark the sheet that will unmount,
+     * so it won't be restored.
+     */
+    if (sheetIndex !== -1) {
+      _sheetsQueue[sheetIndex].willUnmount = true;
+    }
+
+    /**
+     * Here we try to restore previous sheet position,
+     * This is needed when user dismiss the modal by fire the dismiss action.
+     */
+    const hasMinimizedSheet = _sheetsQueue.length > 1;
+    if (sheetOnTop && hasMinimizedSheet) {
+      _sheetsQueue[_sheetsQueue.length - 2].ref?.current?.restore();
+    }
+
+    sheetsQueueRef.current = _sheetsQueue;
+  }, []);
+  //#endregion
+
+  //#region public methods
+  const handleDismiss = useCallback((key?: string) => {
+    const sheetToBeDismissed = key
+      ? sheetsQueueRef.current.find(item => item.key === key)
+      : sheetsQueueRef.current[sheetsQueueRef.current.length - 1];
+    if (sheetToBeDismissed) {
+      sheetToBeDismissed.ref?.current?.dismiss();
+      return true;
+    }
+    return false;
+  }, []);
+  const handleDismissAll = useCallback(() => {
+    sheetsQueueRef.current.map(item => {
+      item.ref?.current?.dismiss();
+    });
+  }, []);
+  //#endregion
+
+  //#region context variables
+  const externalContextVariables = useMemo(
+    () => ({
+      dismiss: handleDismiss,
+      dismissAll: handleDismissAll,
+    }),
+    [handleDismiss, handleDismissAll]
+  );
+  const internalContextVariables = useMemo(
+    () => ({
+      hostName,
+      containerLayoutState: animatedContainerLayoutState,
+      mountSheet: handleMountSheet,
+      unmountSheet: handleUnmountSheet,
+      willUnmountSheet: handleWillUnmountSheet,
+    }),
+    [
+      hostName,
+      animatedContainerLayoutState,
+      handleMountSheet,
+      handleUnmountSheet,
+      handleWillUnmountSheet,
+    ]
+  );
+  //#endregion
+
+  //#region renders
+  return (
+    <BottomSheetModalProvider value={externalContextVariables}>
+      <BottomSheetModalInternalProvider value={internalContextVariables}>
+        <BottomSheetHostingContainer
+          containerLayoutState={animatedContainerLayoutState}
+        />
+        <PortalProvider rootHostName={hostName}>{children}</PortalProvider>
+      </BottomSheetModalInternalProvider>
+    </BottomSheetModalProvider>
+  );
+  //#endregion
+};
+
+export default BottomSheetModalProviderWrapper;

package/src/components/bottomSheetModalProvider/index.ts

@@ -0,0 +1 @@
+export { default } from './BottomSheetModalProvider';

package/src/components/bottomSheetModalProvider/types.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode, RefObject } from 'react';
+import type { BottomSheetModalPrivateMethods } from '../bottomSheetModal';
+
+export interface BottomSheetModalRef {
+  key: string;
+  ref: RefObject<BottomSheetModalPrivateMethods>;
+  willUnmount: boolean;
+}
+
+export interface BottomSheetModalProviderProps {
+  children?: ReactNode;
+}

package/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx

@@ -0,0 +1,84 @@
+import React, { memo, useContext, useMemo } from 'react';
+import { RefreshControl, type RefreshControlProps } from 'react-native';
+import {
+  Gesture,
+  GestureDetector,
+  type SimultaneousGesture,
+} from 'react-native-gesture-handler';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { SCROLLABLE_STATUS } from '../../constants';
+import { BottomSheetDraggableContext } from '../../contexts/gesture';
+import { useBottomSheetInternal } from '../../hooks';
+
+const AnimatedRefreshControl = Animated.createAnimatedComponent(RefreshControl);
+
+interface BottomSheetRefreshControlProps extends RefreshControlProps {
+  scrollableGesture: SimultaneousGesture;
+}
+
+function BottomSheetRefreshControlComponent({
+  onRefresh,
+  scrollableGesture,
+  ...rest
+}: BottomSheetRefreshControlProps) {
+  //#region hooks
+  const draggableGesture = useContext(BottomSheetDraggableContext);
+  const {
+    animatedScrollableStatus: animatedScrollableState,
+    enableContentPanningGesture,
+  } = useBottomSheetInternal();
+  //#endregion
+
+  if (!draggableGesture && enableContentPanningGesture) {
+    throw "'BottomSheetRefreshControl' cannot be used out of the BottomSheet!";
+  }
+
+  //#region variables
+  const animatedProps = useAnimatedProps(
+    () => ({
+      enabled: animatedScrollableState.value === SCROLLABLE_STATUS.UNLOCKED,
+    }),
+    [animatedScrollableState.value]
+  );
+
+  const gesture = useMemo(
+    () =>
+      draggableGesture
+        ? Gesture.Native()
+            // @ts-ignore
+            .simultaneousWithExternalGesture(
+              ...draggableGesture.toGestureArray(),
+              ...scrollableGesture.toGestureArray()
+            )
+            .shouldCancelWhenOutside(true)
+        : undefined,
+    [draggableGesture, scrollableGesture]
+  );
+
+  //#endregion
+
+  // render
+  if (gesture) {
+    return (
+      <GestureDetector gesture={gesture}>
+        <AnimatedRefreshControl
+          {...rest}
+          onRefresh={onRefresh}
+          animatedProps={animatedProps}
+        />
+      </GestureDetector>
+    );
+  }
+  return (
+    <AnimatedRefreshControl
+      {...rest}
+      onRefresh={onRefresh}
+      animatedProps={animatedProps}
+    />
+  );
+}
+
+const BottomSheetRefreshControl = memo(BottomSheetRefreshControlComponent);
+BottomSheetRefreshControl.displayName = 'BottomSheetRefreshControl';
+
+export default BottomSheetRefreshControl;

package/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.tsx

@@ -0,0 +1 @@
+export default () => null;

package/src/components/bottomSheetRefreshControl/index.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import type { RefreshControlProps } from 'react-native';
+import type {
+  NativeViewGestureHandlerProps,
+  SimultaneousGesture,
+} from 'react-native-gesture-handler';
+import BottomSheetRefreshControl from './BottomSheetRefreshControl';
+
+export default BottomSheetRefreshControl as never as React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    RefreshControlProps & {
+      scrollableGesture: SimultaneousGesture;
+      children: React.ReactNode | React.ReactNode[];
+    } & React.RefAttributes<
+        React.ComponentType<
+          NativeViewGestureHandlerProps & React.RefAttributes<never>
+        >
+      >
+  >
+>;

package/src/components/bottomSheetScrollable/BottomSheetDraggableScrollable.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  GestureDetector,
+  type SimultaneousGesture,
+} from 'react-native-gesture-handler';
+
+interface BottomSheetDraggableScrollableProps {
+  scrollableGesture?: SimultaneousGesture;
+  children: React.ReactNode;
+}
+
+export function BottomSheetDraggableScrollable({
+  scrollableGesture,
+  children,
+}: BottomSheetDraggableScrollableProps) {
+  if (scrollableGesture) {
+    return (
+      <GestureDetector gesture={scrollableGesture}>{children}</GestureDetector>
+    );
+  }
+
+  return children;
+}

package/src/components/bottomSheetScrollable/BottomSheetFlashList.tsx

@@ -0,0 +1,88 @@
+// @ts-ignore
+import type { FlashListProps } from '@shopify/flash-list';
+import React, { forwardRef, memo, type Ref, useMemo } from 'react';
+import type { ScrollViewProps } from 'react-native';
+import type Animated from 'react-native-reanimated';
+import BottomSheetScrollView from './BottomSheetScrollView';
+import type {
+  BottomSheetScrollViewMethods,
+  BottomSheetScrollableProps,
+} from './types';
+
+let FlashList: {
+  FlashList: React.FC;
+};
+// since FlashList is not a dependency for the library
+// we try to import it using metro optional import
+try {
+  FlashList = require('@shopify/flash-list') as never;
+} catch (_) {}
+
+export type BottomSheetFlashListProps<T> = Omit<
+  Animated.AnimateProps<FlashListProps<T>>,
+  'decelerationRate' | 'onScroll' | 'scrollEventThrottle'
+> &
+  BottomSheetScrollableProps & {
+    ref?: Ref<React.FC>;
+  };
+
+const BottomSheetFlashListComponent = forwardRef<
+  React.FC,
+  // biome-ignore lint/suspicious/noExplicitAny: to be addressed
+  BottomSheetFlashListProps<any>
+>((props, ref) => {
+  //#region props
+  const {
+    focusHook,
+    scrollEventsHandlersHook,
+    enableFooterMarginAdjustment,
+    ...rest
+    // biome-ignore lint: to be addressed!
+  }: any = props;
+  //#endregion
+
+  useMemo(() => {
+    if (!FlashList) {
+      throw 'You need to install FlashList first, `yarn install @shopify/flash-list`';
+    }
+
+    console.warn(
+      'BottomSheetFlashList is deprecated, please use useBottomSheetScrollableCreator instead.'
+    );
+  }, []);
+
+  //#region render
+  const renderScrollComponent = useMemo(
+    () =>
+      forwardRef<BottomSheetScrollViewMethods, ScrollViewProps>(
+        // @ts-ignore
+        ({ data, ...props }, ref) => {
+          return (
+            // @ts-ignore
+            <BottomSheetScrollView
+              ref={ref}
+              {...props}
+              focusHook={focusHook}
+              scrollEventsHandlersHook={scrollEventsHandlersHook}
+              enableFooterMarginAdjustment={enableFooterMarginAdjustment}
+            />
+          );
+        }
+      ),
+    [focusHook, scrollEventsHandlersHook, enableFooterMarginAdjustment]
+  );
+  return (
+    <FlashList.FlashList
+      ref={ref}
+      renderScrollComponent={renderScrollComponent}
+      {...rest}
+    />
+  );
+  //#endregion
+});
+
+export const BottomSheetFlashList = memo(BottomSheetFlashListComponent);
+
+export default BottomSheetFlashList as <T>(
+  props: BottomSheetFlashListProps<T>
+) => ReturnType<typeof BottomSheetFlashList>;

package/src/components/bottomSheetScrollable/BottomSheetFlashList.web.tsx

@@ -0,0 +1 @@
+export default () => null;

package/src/components/bottomSheetScrollable/BottomSheetFlatList.tsx

@@ -0,0 +1,26 @@
+import { type ComponentProps, memo } from 'react';
+import { FlatList as RNFlatList } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { SCROLLABLE_TYPE } from '../../constants';
+import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
+import type {
+  BottomSheetFlatListMethods,
+  BottomSheetFlatListProps,
+} from './types';
+
+const AnimatedFlatList =
+  Animated.createAnimatedComponent<ComponentProps<typeof RNFlatList>>(
+    RNFlatList
+  );
+
+const BottomSheetFlatListComponent = createBottomSheetScrollableComponent<
+  BottomSheetFlatListMethods,
+  BottomSheetFlatListProps<never>
+>(SCROLLABLE_TYPE.FLATLIST, AnimatedFlatList);
+
+const BottomSheetFlatList = memo(BottomSheetFlatListComponent);
+BottomSheetFlatList.displayName = 'BottomSheetFlatList';
+
+export default BottomSheetFlatList as <T>(
+  props: BottomSheetFlatListProps<T>
+) => ReturnType<typeof BottomSheetFlatList>;

package/src/components/bottomSheetScrollable/BottomSheetScrollView.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import {
+  ScrollView as RNScrollView,
+  type ScrollViewProps as RNScrollViewProps,
+} from 'react-native';
+import Animated from 'react-native-reanimated';
+import { SCROLLABLE_TYPE } from '../../constants';
+import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
+import type {
+  BottomSheetScrollViewMethods,
+  BottomSheetScrollViewProps,
+} from './types';
+
+const AnimatedScrollView =
+  Animated.createAnimatedComponent<RNScrollViewProps>(RNScrollView);
+
+const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
+  BottomSheetScrollViewMethods,
+  BottomSheetScrollViewProps
+>(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
+
+const BottomSheetScrollView = memo(BottomSheetScrollViewComponent);
+BottomSheetScrollView.displayName = 'BottomSheetScrollView';
+
+export default BottomSheetScrollView as (
+  props: BottomSheetScrollViewProps
+) => ReturnType<typeof BottomSheetScrollView>;

package/src/components/bottomSheetScrollable/BottomSheetSectionList.tsx

@@ -0,0 +1,29 @@
+import { type ComponentProps, memo } from 'react';
+import {
+  type DefaultSectionT,
+  SectionList as RNSectionList,
+} from 'react-native';
+import Animated from 'react-native-reanimated';
+import { SCROLLABLE_TYPE } from '../../constants';
+import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
+import type {
+  BottomSheetSectionListMethods,
+  BottomSheetSectionListProps,
+} from './types';
+
+const AnimatedSectionList =
+  Animated.createAnimatedComponent<ComponentProps<typeof RNSectionList>>(
+    RNSectionList
+  );
+
+const BottomSheetSectionListComponent = createBottomSheetScrollableComponent<
+  BottomSheetSectionListMethods,
+  BottomSheetSectionListProps<never, DefaultSectionT>
+>(SCROLLABLE_TYPE.SECTIONLIST, AnimatedSectionList);
+
+const BottomSheetSectionList = memo(BottomSheetSectionListComponent);
+BottomSheetSectionList.displayName = 'BottomSheetSectionList';
+
+export default BottomSheetSectionList as <ItemT, SectionT = DefaultSectionT>(
+  props: BottomSheetSectionListProps<ItemT, SectionT>
+) => ReturnType<typeof BottomSheetSectionList>;

package/src/components/bottomSheetScrollable/BottomSheetVirtualizedList.tsx

@@ -0,0 +1,27 @@
+import { type ComponentProps, memo } from 'react';
+import { VirtualizedList as RNVirtualizedList } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { SCROLLABLE_TYPE } from '../../constants';
+import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
+import type {
+  BottomSheetVirtualizedListMethods,
+  BottomSheetVirtualizedListProps,
+} from './types';
+
+const AnimatedVirtualizedList =
+  Animated.createAnimatedComponent<ComponentProps<typeof RNVirtualizedList>>(
+    RNVirtualizedList
+  );
+
+const BottomSheetVirtualizedListComponent =
+  createBottomSheetScrollableComponent<
+    BottomSheetVirtualizedListMethods,
+    BottomSheetVirtualizedListProps<never>
+  >(SCROLLABLE_TYPE.VIRTUALIZEDLIST, AnimatedVirtualizedList);
+
+const BottomSheetVirtualizedList = memo(BottomSheetVirtualizedListComponent);
+BottomSheetVirtualizedList.displayName = 'BottomSheetVirtualizedList';
+
+export default BottomSheetVirtualizedList as <T>(
+  props: BottomSheetVirtualizedListProps<T>
+) => ReturnType<typeof BottomSheetVirtualizedList>;

package/src/components/bottomSheetScrollable/ScrollableContainer.android.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react';
+import type { SimultaneousGesture } from 'react-native-gesture-handler';
+import BottomSheetRefreshControl from '../bottomSheetRefreshControl';
+import { BottomSheetDraggableScrollable } from './BottomSheetDraggableScrollable';
+import { styles } from './styles';
+
+interface ScrollableContainerProps {
+  nativeGesture: SimultaneousGesture;
+  // biome-ignore lint: to be addressed
+  refreshControl: any;
+  // biome-ignore lint: to be addressed
+  progressViewOffset: any;
+  // biome-ignore lint: to be addressed
+  refreshing: any;
+  // biome-ignore lint: to be addressed
+  onRefresh: any;
+  // biome-ignore lint: to be addressed
+  ScrollableComponent: any;
+}
+
+// biome-ignore lint: to be addressed
+export const ScrollableContainer = forwardRef<any, ScrollableContainerProps>(
+  function ScrollableContainer(
+    {
+      nativeGesture,
+      refreshControl: _refreshControl,
+      refreshing,
+      progressViewOffset,
+      onRefresh,
+      ScrollableComponent,
+      ...rest
+    },
+    ref
+  ) {
+    const Scrollable = (
+      <BottomSheetDraggableScrollable scrollableGesture={nativeGesture}>
+        <ScrollableComponent ref={ref} {...rest} />
+      </BottomSheetDraggableScrollable>
+    );
+
+    return onRefresh ? (
+      <BottomSheetRefreshControl
+        scrollableGesture={nativeGesture}
+        refreshing={refreshing}
+        progressViewOffset={progressViewOffset}
+        onRefresh={onRefresh}
+        style={styles.container}
+      >
+        {Scrollable}
+      </BottomSheetRefreshControl>
+    ) : (
+      Scrollable
+    );
+  }
+);

package/src/components/bottomSheetScrollable/ScrollableContainer.tsx

@@ -0,0 +1,22 @@
+import React, { type FC, forwardRef } from 'react';
+import type { SimultaneousGesture } from 'react-native-gesture-handler';
+import { BottomSheetDraggableScrollable } from './BottomSheetDraggableScrollable';
+
+interface ScrollableContainerProps {
+  nativeGesture?: SimultaneousGesture;
+  // biome-ignore lint/suspicious/noExplicitAny: 🤷‍♂️
+  ScrollableComponent: FC<any>;
+}
+
+export const ScrollableContainer = forwardRef<never, ScrollableContainerProps>(
+  function ScrollableContainer(
+    { nativeGesture, ScrollableComponent, ...rest },
+    ref
+  ) {
+    return (
+      <BottomSheetDraggableScrollable scrollableGesture={nativeGesture}>
+        <ScrollableComponent ref={ref} {...rest} />
+      </BottomSheetDraggableScrollable>
+    );
+  }
+);