@niibase/bottom-sheet-manager 1.1.0

package/src/router/view.tsx

@@ -0,0 +1,265 @@
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetModalProps,
+  BottomSheetModalProvider,
+} from "@gorhom/bottom-sheet";
+import { ParamListBase, useTheme } from "@react-navigation/native";
+import * as React from "react";
+import { StatusBar } from "react-native";
+import Animated, {
+  Easing,
+  interpolate,
+  interpolateColor,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import type {
+  BottomSheetDescriptorMap,
+  BottomSheetNavigationConfig,
+  BottomSheetNavigationHelpers,
+  BottomSheetNavigationProp,
+  BottomSheetNavigationState,
+} from "./types";
+
+type BottomSheetModalScreenProps = BottomSheetModalProps & {
+  navigation: BottomSheetNavigationProp<ParamListBase>;
+  /**
+   * When `true`, tapping on the backdrop will not dismiss the modal.
+   * @default false
+   */
+  clickThrough?: boolean;
+
+  /**
+   * Opacity of the sheet's overlay.
+   * @default 0.45
+   */
+  opacity?: number;
+
+  /**
+   * IOS modal sheet type of animation
+   * @default false
+   */
+  iosModalSheetTypeOfAnimation?: boolean;
+};
+
+function BottomSheetModalScreen({
+  index,
+  navigation,
+  clickThrough,
+  iosModalSheetTypeOfAnimation,
+  opacity,
+  children,
+  ...props
+}: BottomSheetModalScreenProps) {
+  const ref = React.useRef<BottomSheetModal>(null);
+  const lastIndexRef = React.useRef(index);
+
+  // Present on mount.
+  React.useEffect(() => {
+    ref.current?.present();
+  }, []);
+
+  const isMounted = React.useRef(true);
+  React.useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (index != null && lastIndexRef.current !== index) {
+      ref.current?.snapToIndex(index);
+    }
+  }, [index]);
+
+  const onChange = React.useCallback(
+    (newIndex: number) => {
+      const currentIndex = lastIndexRef.current;
+      lastIndexRef.current = newIndex;
+      if (newIndex >= 0 && newIndex !== currentIndex) {
+        navigation.snapTo(newIndex);
+      }
+    },
+    [navigation],
+  );
+
+  const onDismiss = React.useCallback(() => {
+    // BottomSheetModal will call onDismiss on unmount, be we do not want that since
+    // we already popped the screen.
+    if (isMounted.current) {
+      navigation.goBack();
+    }
+  }, [navigation]);
+
+  return (
+    <BottomSheetModal
+      ref={ref}
+      onDismiss={onDismiss}
+      onChange={onChange}
+      index={index}
+      backdropComponent={(props) => (
+        <BottomSheetBackdrop
+          {...props}
+          appearsOnIndex={0}
+          disappearsOnIndex={-1}
+          enableTouchThrough={!!clickThrough}
+          opacity={opacity || 0.45}
+        />
+      )}
+      {...props}
+    >
+      {children}
+    </BottomSheetModal>
+  );
+}
+
+const DEFAULT_SNAP_POINTS = ["66%"];
+
+type Props = BottomSheetNavigationConfig & {
+  state: BottomSheetNavigationState<ParamListBase>;
+  navigation: BottomSheetNavigationHelpers;
+  descriptors: BottomSheetDescriptorMap;
+};
+
+export function BottomSheetView({ state, descriptors }: Props) {
+  const { colors } = useTheme();
+  const { top } = useSafeAreaInsets();
+  const themeBackgroundStyle = React.useMemo(
+    () => ({
+      backgroundColor: colors.card,
+    }),
+    [colors.card],
+  );
+  const themeHandleIndicatorStyle = React.useMemo(
+    () => ({
+      backgroundColor: colors.border,
+      height: 5,
+      width: 50,
+    }),
+    [colors.border],
+  );
+
+  // IOS modal sheet type of animation
+  const isFullScreen = useSharedValue(0);
+  const colorStyle = useAnimatedStyle(() => ({
+    flex: 1,
+    backgroundColor: interpolateColor(
+      isFullScreen.value,
+      [0, 1],
+      ["transparent", "#000"],
+    ),
+  }));
+  const animatedStyle = useAnimatedStyle(() => ({
+    flex: 1,
+    transform: [
+      {
+        scaleX: withSpring(interpolate(isFullScreen.value, [0, 1], [1, 0.92]), {
+          damping: 15,
+          stiffness: 100,
+        }),
+      },
+      {
+        translateY: withSpring(interpolate(isFullScreen.value, [0, 1], [0, top + 5]), {
+          damping: 15,
+          stiffness: 100,
+        }),
+      },
+    ],
+  }));
+
+  // Since background color is white, we need to set status bar to light
+  const setStatusBar = StatusBar.setBarStyle;
+  useAnimatedReaction(
+    () => isFullScreen.value,
+    (currentValue) => {
+      "worklet";
+      if (currentValue > -1) {
+        runOnJS(setStatusBar)(currentValue >= 0.5 ? "light-content" : "default");
+      }
+    },
+    [],
+  );
+
+  // Avoid rendering provider if we only have one screen.
+  const shouldRenderProvider = React.useRef(false);
+  shouldRenderProvider.current = shouldRenderProvider.current || state.routes.length > 1;
+
+  const firstRoute = state.routes[0];
+  if (!firstRoute) {
+    // no routes at all, probably shouldn't happen, but let's be defensive
+    return null;
+  }
+
+  const firstDescriptor = descriptors[firstRoute.key];
+  if (!firstDescriptor) {
+    // if we don't have a descriptor for the first route, bail out
+    return null;
+  }
+
+  return (
+    <>
+      <Animated.View style={colorStyle}>
+        <Animated.View style={animatedStyle}>{firstDescriptor.render?.()}</Animated.View>
+      </Animated.View>
+      {shouldRenderProvider.current && (
+        <BottomSheetModalProvider>
+          {state.routes.slice(1).map((route) => {
+            const descriptor = descriptors[route.key];
+            if (!descriptor) return null;
+
+            const { options, navigation, render } = descriptor;
+            const {
+              index,
+              snapPoints,
+              handleStyle,
+              backgroundStyle,
+              handleIndicatorStyle,
+              enableDynamicSizing,
+              ...sheetProps
+            } = options;
+
+            return (
+              <BottomSheetModalScreen
+                key={route.key}
+                // Make sure index is in range, it could be out if snapToIndex is persisted
+                // and snapPoints is changed.
+                index={Math.min(
+                  route.snapToIndex ?? index ?? 0,
+                  !!snapPoints ? snapPoints.length - 1 : 0,
+                )}
+                snapPoints={
+                  !snapPoints && !enableDynamicSizing ? DEFAULT_SNAP_POINTS : snapPoints
+                }
+                onAnimate={(_, to) => {
+                  // @ts-ignore TODO: Fix types
+                  isFullScreen.value = ["%100", "100%"].includes(snapPoints?.[to])
+                    ? 1
+                    : 0;
+                }}
+                animationConfigs={{
+                  duration: 300,
+                  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+                }}
+                topInset={top + 18}
+                navigation={navigation}
+                enableDynamicSizing={enableDynamicSizing}
+                backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
+                handleIndicatorStyle={[themeHandleIndicatorStyle, handleIndicatorStyle]}
+                handleStyle={[themeBackgroundStyle, { borderRadius: 20 }, handleStyle]}
+                {...sheetProps}
+              >
+                {render?.()}
+              </BottomSheetModalScreen>
+            );
+          })}
+        </BottomSheetModalProvider>
+      )}
+    </>
+  );
+}

package/src/sheet.tsx

@@ -0,0 +1,350 @@
+import RNBottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetFlatList,
+  BottomSheetFooter,
+  BottomSheetFooterContainer,
+  BottomSheetHandle,
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetSectionList,
+  BottomSheetTextInput,
+  BottomSheetView,
+  BottomSheetVirtualizedList,
+} from "@gorhom/bottom-sheet";
+import {
+  BackHandler,
+  Platform,
+  StyleSheet,
+  View,
+  type NativeEventSubscription,
+} from "react-native";
+import {
+  Easing,
+  interpolate,
+  useAnimatedReaction,
+  useSharedValue,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "@react-navigation/native";
+import React from "react";
+
+import {
+  useProviderContext,
+  useSheetAnimationContext,
+  useSheetIDContext,
+  useSheetRef,
+} from "./provider";
+import { BottomSheetInstance, BottomSheetProps, SheetIds } from "./types";
+import { PrivateManager } from "./manager";
+import { eventManager } from "./events";
+
+interface BottomSheetFC
+  extends React.MemoExoticComponent<React.ForwardRefExoticComponent<BottomSheetProps>> {
+  <Id extends SheetIds>(
+    props: BottomSheetProps & React.RefAttributes<BottomSheetInstance<Id>>,
+  ): React.JSX.Element;
+
+  // Components
+  View: typeof BottomSheetView;
+  ScrollView: typeof BottomSheetScrollView;
+  FlatList: typeof BottomSheetFlatList;
+  SectionList: typeof BottomSheetSectionList;
+  VirtualizedList: typeof BottomSheetVirtualizedList;
+  Handle: typeof BottomSheetHandle;
+  Footer: typeof BottomSheetFooter;
+  FooterContainer: typeof BottomSheetFooterContainer;
+  Backdrop: typeof BottomSheetBackdrop;
+  TextInput: typeof BottomSheetTextInput;
+}
+
+const useSheetManager = ({
+  id,
+  onHide,
+  onBeforeShow,
+  onContextUpdate,
+}: {
+  id?: string;
+  onHide: (data?: any, dismiss?: boolean) => void;
+  onBeforeShow?: (data?: any) => void;
+  onContextUpdate: () => void;
+}) => {
+  const [visible, setVisible] = React.useState(false);
+  const currentContext = useProviderContext();
+
+  React.useEffect(() => {
+    if (!id) return undefined;
+
+    const subscriptions = [
+      eventManager.subscribe(`show_${id}`, (data: any, context?: string) => {
+        if (currentContext !== context || visible) return;
+        onContextUpdate?.();
+        onBeforeShow?.(data);
+        setVisible(true);
+      }),
+      eventManager.subscribe(`hide_${id}`, (data: any, context, dismiss?: boolean) => {
+        if (currentContext !== context) return;
+        onHide?.(data, dismiss);
+      }),
+    ];
+    return () => {
+      subscriptions.forEach((s) => s?.unsubscribe?.());
+    };
+  }, [id, onHide, onBeforeShow, onContextUpdate, currentContext]);
+
+  return { visible, setVisible };
+};
+
+const BottomSheetComponent = React.forwardRef<BottomSheetInstance, BottomSheetProps>(
+  (
+    {
+      children,
+      snapPoints,
+      onClose,
+      onBeforeShow,
+      stackBehavior = "switch",
+      hardwareBackPressToClose = true,
+      enableDynamicSizing = false,
+      handleIndicatorStyle,
+      iosModalSheetTypeOfAnimation: pageAnimation,
+      backgroundStyle,
+      handleStyle,
+      clickThrough,
+      fullScreen,
+      opacity,
+
+      ...props
+    },
+    ref,
+  ) => {
+    const currentSheetRef = useSheetRef();
+    const currentCtx = useProviderContext();
+
+    const { isFullScreen, iosModalSheetTypeOfAnimation } = useSheetAnimationContext();
+    const animatedIndex = useSharedValue(0);
+
+    const { colors } = useTheme();
+    const { top } = useSafeAreaInsets();
+    const themeBackgroundStyle = React.useMemo(
+      () => ({ backgroundColor: colors.card }),
+      [colors.card],
+    );
+    const themeHandleIndicatorStyle = React.useMemo(
+      () => ({
+        backgroundColor: colors.border,
+        height: 5,
+        width: 50,
+      }),
+      [colors.border],
+    );
+
+    const valueRef = React.useRef<unknown>(null);
+    const bottomSheetRef = React.useRef<BottomSheetModal>(null);
+    const hardwareBackPressEvent = React.useRef<NativeEventSubscription>(
+      null,
+    ) as React.MutableRefObject<NativeEventSubscription>;
+
+    const id = useSheetIDContext();
+    const sheetId = props.id || id;
+    useSheetManager({
+      id: sheetId,
+      onHide: (data, dismiss) => hideSheet(data, true, dismiss),
+      onBeforeShow: (data) => {
+        onBeforeShow?.(data);
+        valueRef.current = undefined;
+        currentSheetRef.current = getInstance();
+      },
+      onContextUpdate: () => {
+        if (sheetId) {
+          PrivateManager.add(sheetId, currentCtx);
+          PrivateManager.registerRef(sheetId, currentCtx, {
+            current: getInstance(),
+          } as React.RefObject<BottomSheetInstance>);
+        }
+      },
+    });
+
+    useAnimatedReaction(
+      () => {
+        if (!!iosModalSheetTypeOfAnimation || !!pageAnimation) {
+          isFullScreen.value = 0;
+        }
+        return animatedIndex.value;
+      },
+      (index) => {
+        "worklet";
+        const points: (string | number)[] = ["%100", "100%"];
+        const checkFullScreen = fullScreen
+          ? -1
+          : snapPoints instanceof Array
+            ? snapPoints.findIndex((p) => points.includes(p))
+            : snapPoints?.value?.findIndex((p) => points.includes(p)) || -1;
+
+        if (
+          -1 !== checkFullScreen &&
+          (!!iosModalSheetTypeOfAnimation || !!pageAnimation)
+        ) {
+          isFullScreen.value = interpolate(
+            index,
+            [checkFullScreen - 1, checkFullScreen],
+            [0, 1],
+          );
+        }
+      },
+      [snapPoints],
+    );
+
+    const hideSheet = React.useCallback(
+      (data?: any, isSheetManagerOrRef?: boolean, dismiss?: boolean) => {
+        const value = data ?? valueRef.current;
+
+        if (!dismiss || stackBehavior !== "push") {
+          hardwareBackPressEvent.current?.remove();
+          bottomSheetRef.current?.close();
+          onClose?.(value);
+        }
+
+        if (sheetId) {
+          PrivateManager.remove(sheetId, currentCtx);
+          if (dismiss && stackBehavior === "push") return;
+
+          const history = PrivateManager.history.length >= 1;
+          eventManager.publish(
+            `onclose_${sheetId}`,
+            value,
+            currentCtx,
+            history || dismiss,
+          );
+
+          if (stackBehavior === "replace") return;
+          if (dismiss) {
+            PrivateManager.history.push({ id: sheetId, context: currentCtx });
+          } else if (history) {
+            const { id, context } = PrivateManager.history.pop()!;
+            eventManager.publish(`show_wrap_${id}`, undefined, context, true);
+          }
+        }
+        if (isSheetManagerOrRef) valueRef.current = data;
+      },
+      [sheetId, currentCtx, onClose],
+    );
+    const getInstance = React.useCallback(
+      (): BottomSheetInstance => ({
+        close(options = {}): void {
+          valueRef.current = (options as Record<string, unknown>).value;
+          bottomSheetRef.current?.close(options?.animationConfigs);
+        },
+        expand(animationConfigs): void {
+          bottomSheetRef.current?.expand(animationConfigs);
+        },
+        collapse(animationConfigs): void {
+          bottomSheetRef.current?.collapse(animationConfigs);
+        },
+        snapToIndex(index: number, animationConfigs): void {
+          bottomSheetRef.current?.snapToIndex(index, animationConfigs);
+        },
+        snapToPosition(position, animationConfigs): void {
+          bottomSheetRef.current?.snapToPosition(position, animationConfigs);
+        },
+      }),
+      [],
+    );
+
+    React.useEffect(() => {
+      if (sheetId) {
+        PrivateManager.registerRef(sheetId, currentCtx, {
+          current: getInstance(),
+        } as React.RefObject<BottomSheetInstance>);
+      }
+      currentSheetRef.current = getInstance();
+    }, [currentCtx, getInstance, sheetId, currentSheetRef]);
+
+    React.useEffect(() => {
+      if (Platform.OS === "android" && hardwareBackPressToClose) {
+        hardwareBackPressEvent.current = BackHandler.addEventListener(
+          "hardwareBackPress",
+          () => {
+            bottomSheetRef.current?.close();
+            return true;
+          },
+        );
+      }
+
+      return () => hardwareBackPressEvent.current?.remove();
+    }, [hardwareBackPressToClose]);
+
+    React.useImperativeHandle(ref, getInstance, [getInstance]);
+
+    return (
+      <View
+        pointerEvents="box-none"
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            zIndex:
+              sheetId && stackBehavior === "push"
+                ? PrivateManager.zIndex(sheetId, currentCtx)
+                : 0,
+          },
+        ]}
+      >
+        <RNBottomSheet
+          enableDynamicSizing={enableDynamicSizing}
+          animationConfigs={{ duration: 400, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }}
+          backdropComponent={(props) => (
+            <BottomSheetBackdrop
+              enableTouchThrough={!!clickThrough}
+              opacity={opacity || 0.45}
+              disappearsOnIndex={-1}
+              appearsOnIndex={0}
+              {...props}
+            />
+          )}
+          {...props}
+          ref={bottomSheetRef}
+          onClose={hideSheet}
+          animatedIndex={animatedIndex}
+          topInset={
+            fullScreen
+              ? 0
+              : top + (iosModalSheetTypeOfAnimation || pageAnimation ? 20 : 5)
+          }
+          snapPoints={enableDynamicSizing ? undefined : (snapPoints ?? ["66%"])}
+          handleIndicatorStyle={[themeHandleIndicatorStyle, handleIndicatorStyle]}
+          backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
+          handleStyle={[themeBackgroundStyle, handleStyle]}
+        >
+          {children}
+        </RNBottomSheet>
+      </View>
+    );
+  },
+);
+
+const BottomSheet = React.memo(BottomSheetComponent) as BottomSheetFC;
+BottomSheet.displayName = "BottomSheet";
+
+BottomSheet.View = BottomSheetView;
+BottomSheet.ScrollView = BottomSheetScrollView;
+BottomSheet.FlatList = BottomSheetFlatList;
+BottomSheet.SectionList = BottomSheetSectionList;
+BottomSheet.VirtualizedList = BottomSheetVirtualizedList;
+BottomSheet.Handle = BottomSheetHandle;
+BottomSheet.Footer = BottomSheetFooter;
+BottomSheet.FooterContainer = BottomSheetFooterContainer;
+BottomSheet.Backdrop = BottomSheetBackdrop;
+BottomSheet.TextInput = BottomSheetTextInput;
+
+try {
+  const { cssInterop } = require("nativewind");
+  cssInterop(BottomSheet, {
+    handleIndicatorClassName: "handleIndicatorStyle",
+    backgroundClassName: "backgroundStyle",
+    containerClassName: "containerStyle",
+    handleClassName: "handleStyle",
+    className: "style",
+  });
+} catch (e) {
+  // Ignore error
+}
+
+export default BottomSheet;