@niibase/bottom-sheet-manager 1.1.0

package/src/provider.tsx

@@ -0,0 +1,293 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { StatusBar } from "react-native";
+import React from "react";
+import Animated, {
+  interpolate,
+  interpolateColor,
+  runOnJS,
+  SharedValue,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+
+import { BottomSheetInstance, SheetPayload, Sheets } from "./types";
+import { eventManager } from "./events";
+
+export const providerRegistryStack: string[] = [];
+
+/**
+ * An object that holds all the sheet components against their ids.
+ */
+export const sheetsRegistry: {
+  [context: string]: { [id: string]: React.ElementType };
+} = {
+  global: {},
+};
+
+export interface SheetProps<SheetId extends keyof Sheets = never> {
+  sheetId: SheetId;
+  payload?: Sheets[SheetId]["payload"];
+}
+
+// Registers your Sheet with the SheetProvider.
+export function registerSheet<SheetId extends keyof Sheets = never>(
+  id: SheetId | (string & {}),
+  Sheet: React.ElementType,
+  ...contexts: string[]
+) {
+  if (!id || !Sheet) return;
+  if (!contexts || contexts.length === 0) contexts = ["global"];
+  for (let context of contexts) {
+    const registry = !sheetsRegistry[context]
+      ? (sheetsRegistry[context] = {})
+      : sheetsRegistry[context];
+    registry[id as string] = Sheet;
+    eventManager.publish(`${context}-on-register`);
+  }
+}
+
+/**
+ * The SheetProvider makes available the sheets in a given context. The default context is
+ * `global`. However if you want to render a Sheet within another sheet or if you want to render
+ * Sheets in a modal. You can use a separate Provider with a custom context value.
+ *
+ * For example
+ * ```ts
+ * // Define your SheetProvider in the component/modal where
+ * // you want to show some Sheets.
+ * <SheetProvider context="local-context" />
+ *
+ * // Then register your sheet when for example the
+ * // Modal component renders.
+ *
+ * registerSheet('local-sheet', LocalSheet,'local-context');
+ *
+ * ```
+ */
+export function SheetProvider({
+  iosModalSheetTypeOfAnimation = false,
+  context = "global",
+  duration = 300,
+  children,
+}: React.PropsWithChildren<{
+  context?: string;
+  duration?: number;
+  iosModalSheetTypeOfAnimation?: boolean;
+}>) {
+  const { top } = useSafeAreaInsets();
+  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+  const sheetIds = Object.keys(sheetsRegistry[context] || sheetsRegistry["global"] || {});
+
+  // Rerender when a new sheet is added.
+  const onRegister = React.useCallback(forceUpdate, [forceUpdate]);
+
+  // IOS modal sheet type of animation
+  const isFullScreen = useSharedValue(-1);
+  const colorStyle = useAnimatedStyle(() => ({
+    flex: 1,
+    backgroundColor: interpolateColor(
+      isFullScreen.value,
+      [0, 1],
+      ["transparent", "#000"],
+    ),
+  }));
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      flex: 1,
+      overflow: "hidden",
+      borderRadius: interpolate(isFullScreen.value, [0, 0.8, 1], [0, 20, 24], "clamp"),
+      transform: [
+        {
+          scaleX: withTiming(
+            interpolate(isFullScreen.value, [0, 0.98, 1], [1, 1, 0.92], "clamp"),
+            { duration },
+          ),
+        },
+        {
+          translateY: withSpring(
+            interpolate(isFullScreen.value, [0, 0.99, 1], [0, top, top + 5], "clamp"),
+            { duration, dampingRatio: 1.5 },
+          ),
+        },
+      ],
+    }),
+    [duration],
+  );
+
+  // 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");
+      }
+    },
+    [],
+  );
+
+  React.useEffect(() => {
+    providerRegistryStack.indexOf(context) > -1
+      ? providerRegistryStack.indexOf(context)
+      : providerRegistryStack.push(context) - 1;
+    const unsub = eventManager.subscribe(`${context}-on-register`, onRegister);
+    return () => {
+      providerRegistryStack.splice(providerRegistryStack.indexOf(context), 1);
+      unsub?.unsubscribe();
+    };
+  }, [context, onRegister]);
+
+  return (
+    <SheetAnimationContext.Provider
+      value={{ isFullScreen, iosModalSheetTypeOfAnimation }}
+    >
+      <Animated.View style={colorStyle}>
+        <Animated.View style={animatedStyle}>{children}</Animated.View>
+      </Animated.View>
+      <BottomSheetModalProvider>
+        {sheetIds.map((id) => (
+          <RenderSheet key={id} id={id} context={context} duration={duration} />
+        ))}
+      </BottomSheetModalProvider>
+    </SheetAnimationContext.Provider>
+  );
+}
+const ProviderContext = React.createContext("global");
+const SheetIDContext = React.createContext<string | undefined>(undefined);
+const SheetAnimationContext = React.createContext<{
+  iosModalSheetTypeOfAnimation: boolean;
+  isFullScreen: SharedValue<number>;
+}>({ isFullScreen: { value: 0 } as any, iosModalSheetTypeOfAnimation: false });
+
+export const SheetRefContext = React.createContext<
+  React.RefObject<BottomSheetInstance | null>
+>({} as any);
+
+const SheetPayloadContext = React.createContext<any>(undefined);
+
+/**
+ * Get id of the current context.
+ */
+export const useProviderContext = () => React.useContext(ProviderContext);
+/**
+ * Get id of the current sheet
+ */
+export const useSheetIDContext = () => React.useContext(SheetIDContext);
+/**
+ * Get the current sheet animation context.
+ */
+export const useSheetAnimationContext = () => React.useContext(SheetAnimationContext);
+/**
+ * Get the current Sheet's internal ref.
+ */
+export const useSheetRef = <
+  SheetId extends keyof Sheets = never,
+>(): React.MutableRefObject<BottomSheetInstance<SheetId>> =>
+  React.useContext(SheetRefContext) as React.MutableRefObject<
+    BottomSheetInstance<SheetId>
+  >;
+
+/**
+ * Get the payload this sheet was opened with.
+ */
+export function useSheetPayload<SheetId extends keyof Sheets = never>() {
+  return React.useContext(SheetPayloadContext) as Sheets[SheetId]["payload"];
+}
+
+/**
+ * Listen to sheet events.
+ */
+export function useOnSheet<SheetId extends keyof Sheets = never>(
+  id: SheetId | (string & {}),
+  type: "show" | "hide" | "onclose",
+  listener: (payload: SheetPayload<SheetId>, context: string, ...args: any[]) => void,
+) {
+  React.useEffect(() => {
+    const subscription = eventManager.subscribe(`${type}_${id}`, listener);
+    return () => subscription.unsubscribe();
+  }, [id, listener]);
+}
+
+const RenderSheet = ({
+  id,
+  context,
+  duration,
+}: {
+  id: string;
+  context: string;
+  duration: number;
+}) => {
+  const [payload, setPayload] = React.useState();
+  const [visible, setVisible] = React.useState(false);
+  const ref = React.useRef<BottomSheetInstance | null>(null);
+  const Sheet = context.startsWith("$$-auto-")
+    ? sheetsRegistry?.global?.[id]
+    : sheetsRegistry[context]
+      ? sheetsRegistry[context]?.[id]
+      : undefined;
+
+  const onShow = React.useCallback(
+    (data: any, ctx = "global", reopened?: boolean) => {
+      if (ctx !== context) return;
+      if (!reopened) setPayload(data);
+      setVisible(true);
+    },
+    [context],
+  );
+
+  const onClose = React.useCallback(
+    (_data: any, ctx = "global", reopened?: boolean) => {
+      if (context !== ctx) return;
+      if (!reopened) {
+        setPayload(undefined);
+        setTimeout(() => setVisible(false), Math.max(duration ?? 300, 300));
+      } else {
+        setVisible(false);
+      }
+    },
+    [context],
+  );
+
+  const onHide = React.useCallback(
+    (data: any, ctx = "global") => {
+      eventManager.publish(`hide_${id}`, data, ctx);
+    },
+    [id],
+  );
+
+  React.useEffect(() => {
+    if (visible) {
+      eventManager.publish(`show_${id}`, payload, context);
+    }
+  }, [context, id, payload, visible]);
+
+  React.useEffect(() => {
+    let subs = [
+      eventManager.subscribe(`show_wrap_${id}`, onShow),
+      eventManager.subscribe(`onclose_${id}`, onClose),
+      eventManager.subscribe(`hide_wrap_${id}`, onHide),
+    ];
+    return () => {
+      subs.forEach((s) => s.unsubscribe());
+    };
+  }, [id, context, onShow, onHide, onClose]);
+
+  if (!Sheet) return null;
+
+  return visible ? (
+    <ProviderContext.Provider value={context}>
+      <SheetIDContext.Provider value={id}>
+        <SheetRefContext.Provider value={ref}>
+          <SheetPayloadContext.Provider value={payload}>
+            <Sheet id={id} payload={payload} context={context} />
+          </SheetPayloadContext.Provider>
+        </SheetRefContext.Provider>
+      </SheetIDContext.Provider>
+    </ProviderContext.Provider>
+  ) : null;
+};

package/src/router/index.tsx

@@ -0,0 +1,130 @@
+import {
+  createNavigatorFactory,
+  NavigatorTypeBagBase,
+  ParamListBase,
+  StaticConfig,
+  TypedNavigator,
+  useNavigationBuilder,
+} from "@react-navigation/native";
+import React from "react";
+
+import { BottomSheetRouter, BottomSheetRouterOptions } from "./router";
+import type {
+  BottomSheetActionHelpers,
+  BottomSheetNavigationEventMap,
+  BottomSheetNavigationOptions,
+  BottomSheetNavigationProp,
+  BottomSheetNavigationState,
+  BottomSheetNavigatorProps,
+} from "./types";
+import { BottomSheetView } from "./view";
+
+function BottomSheetNavigator({
+  id,
+  children,
+  screenListeners,
+  screenOptions,
+  ...rest
+}: BottomSheetNavigatorProps) {
+  const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder<
+    BottomSheetNavigationState<ParamListBase>,
+    BottomSheetRouterOptions,
+    BottomSheetActionHelpers<ParamListBase>,
+    BottomSheetNavigationOptions,
+    BottomSheetNavigationEventMap
+  >(BottomSheetRouter, {
+    id,
+    children,
+    screenListeners,
+    screenOptions,
+  });
+
+  return (
+    <NavigationContent>
+      <BottomSheetView
+        {...rest}
+        state={state}
+        navigation={navigation}
+        descriptors={descriptors}
+      />
+    </NavigationContent>
+  );
+}
+
+/**
+ * To use BottomSheetNavigator with expo-router, the first screen should be your app content
+ * and add a border radius of 24px to the root view if want to snap to 100%.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   createBottomSheetNavigator,
+ *   BottomSheetNavigationOptions,
+ *   BottomSheetNavigationEventMap,
+ *   BottomSheetNavigationState,
+ * } from "@repo/bottom-sheet";
+ * import { Slot, withLayoutContext } from "expo-router";
+ *
+ * const { Navigator } = createBottomSheetNavigator();
+ *
+ * const BottomSheet = withLayoutContext<
+ *   BottomSheetNavigationOptions,
+ *   typeof Navigator,
+ *   BottomSheetNavigationState<any>,
+ *   BottomSheetNavigationEventMap
+ * >(Navigator);
+ *
+ * export const unstable_settings = {
+ *   initialRouteName: "index",
+ * };
+ *
+ * export default function Layout() {
+ *   if (typeof window === "undefined") return <Slot />;
+ *   return (
+ *     <BottomSheet
+ *       screenOptions={
+ *         {
+ *           // API Reference: `@repo/design/bottom-sheet/types.ts`
+ *           // And: https://gorhom.github.io/react-native-bottom-sheet/modal/props/
+ *         }
+ *       }
+ *.    />
+ *   );
+ * }
+ * ```
+ */
+export function createBottomSheetNavigator<
+  const ParamList extends ParamListBase,
+  const NavigatorID extends string | undefined = undefined,
+  // We'll define a type bag specialized for bottom sheets:
+  const TypeBag extends NavigatorTypeBagBase = {
+    // The param list from the user
+    ParamList: ParamList;
+    // Optional ID for this navigator
+    NavigatorID: NavigatorID;
+    // The state shape
+    State: BottomSheetNavigationState<ParamList>;
+    // The screen options
+    ScreenOptions: BottomSheetNavigationOptions;
+    // The event map
+    EventMap: BottomSheetNavigationEventMap;
+    // The type of the "navigation" object used by each screen in the navigator
+    NavigationList: {
+      [RouteName in keyof ParamList]: BottomSheetNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    };
+    // The navigator component
+    Navigator: typeof BottomSheetNavigator;
+  },
+  // The static config allows for "static" route config
+  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+  // We call `createNavigatorFactory` with our un-typed navigator
+  // but pass in the config to get the typed container
+  return createNavigatorFactory(BottomSheetNavigator)(config);
+}
+
+export * from "./types";

package/src/router/router.ts

@@ -0,0 +1,94 @@
+import {
+    ParamListBase,
+    Router,
+    StackActions,
+    StackActionType,
+    StackRouter,
+    StackRouterOptions,
+} from "@react-navigation/native";
+import { nanoid } from "nanoid/non-secure";
+
+import type { BottomSheetNavigationState } from "./types";
+
+export type BottomSheetRouterOptions = StackRouterOptions;
+
+export type BottomSheetActionType =
+    | StackActionType
+    | {
+          type: "SNAP_TO";
+          index: number;
+          source?: string;
+          target?: string;
+      };
+
+export const BottomSheetActions = {
+    ...StackActions,
+    snapTo(index: number): BottomSheetActionType {
+        return { type: "SNAP_TO", index };
+    },
+};
+
+export function BottomSheetRouter(
+    routerOptions: StackRouterOptions,
+): Router<BottomSheetNavigationState<ParamListBase>, BottomSheetActionType> {
+    const baseRouter = StackRouter(routerOptions) as unknown as Router<
+        BottomSheetNavigationState<ParamListBase>,
+        BottomSheetActionType
+    >;
+    return {
+        ...baseRouter,
+        type: "bottom-sheet",
+        getInitialState(options) {
+            const state = baseRouter.getInitialState(options);
+
+            return {
+                ...state,
+                stale: false,
+                type: "bottom-sheet",
+                key: `bottom-sheet-${nanoid()}`,
+            };
+        },
+        getStateForAction(state, action, options) {
+            switch (action.type) {
+                case "SNAP_TO": {
+                    const index =
+                        action.target === state.key && action.source
+                            ? state.routes.findIndex((r) => r.key === action.source)
+                            : state.index;
+
+                    return {
+                        ...state,
+                        routes: state.routes.map((route, i) =>
+                            i === index
+                                ? {
+                                      ...route,
+                                      snapToIndex: action.index,
+                                  }
+                                : route,
+                        ),
+                    };
+                }
+                default:
+                    return baseRouter.getStateForAction(state, action, options);
+            }
+        },
+        getRehydratedState(partialState, { routeNames, routeParamList, routeGetIdList }) {
+            if (partialState.stale === false) {
+                return partialState;
+            }
+
+            const state = baseRouter.getRehydratedState(partialState, {
+                routeNames,
+                routeParamList,
+                routeGetIdList,
+            });
+
+            return {
+                ...state,
+                type: "bottom-sheet",
+                key: `bottom-sheet-${nanoid()}`,
+            };
+        },
+        actionCreators: BottomSheetActions,
+    };
+}

package/src/router/types.ts

@@ -0,0 +1,117 @@
+import type { BottomSheetModalProps } from "@gorhom/bottom-sheet";
+import type {
+    DefaultNavigatorOptions,
+    Descriptor,
+    NavigationHelpers,
+    NavigationProp,
+    NavigationState,
+    ParamListBase,
+    RouteProp,
+    StackActionHelpers,
+} from "@react-navigation/native";
+
+// TODO: Sheet open / close / snap / events.
+export type BottomSheetNavigationEventMap = {};
+
+export type BottomSheetNavigationState<ParamList extends ParamListBase> = Omit<
+    NavigationState<ParamList>,
+    "routes"
+> & {
+    type: "bottom-sheet";
+    routes: (NavigationState<ParamList>["routes"][number] & {
+        snapToIndex?: number | null;
+    })[];
+};
+
+export type BottomSheetActionHelpers<ParamList extends ParamListBase> =
+    StackActionHelpers<ParamList> & {
+        /**
+         * Snap the drawer to a point.
+         */
+        snapTo(index?: number): void;
+    };
+
+export type BottomSheetNavigationProp<
+    ParamList extends ParamListBase,
+    RouteName extends keyof ParamList = string,
+    NavigatorID extends string | undefined = undefined,
+> = NavigationProp<
+    ParamList,
+    RouteName,
+    NavigatorID,
+    BottomSheetNavigationState<ParamList>,
+    BottomSheetNavigationOptions,
+    BottomSheetNavigationEventMap
+> &
+    BottomSheetActionHelpers<ParamList>;
+
+export type BottomSheetScreenProps<
+    ParamList extends ParamListBase,
+    RouteName extends keyof ParamList = string,
+    NavigatorID extends string | undefined = undefined,
+> = {
+    navigation: BottomSheetNavigationProp<ParamList, RouteName, NavigatorID>;
+    route: RouteProp<ParamList, RouteName>;
+};
+
+export type BottomSheetNavigationHelpers = NavigationHelpers<
+    ParamListBase,
+    BottomSheetNavigationEventMap
+>;
+
+// We want it to be an empty object because navigator does not have any additional props
+export type BottomSheetNavigationConfig = {};
+
+export type BottomSheetNavigationOptions = Omit<
+    BottomSheetModalProps,
+    // Remove some props that aren't useful as navigation options.
+    | "containerHeight"
+    | "snapPoints"
+    | "gestureEventsHandlersHook"
+    | "animatedPosition"
+    | "animatedIndex"
+    | "topInset"
+    | "onChange"
+    | "onAnimate"
+    | "onClose"
+    | "children"
+    | "$modal"
+    | "waitFor"
+    | "simultaneousHandlers"
+> & {
+    /**
+     * Points for the bottom sheet to snap to. It accepts array of number, string or mix.
+     * String values should be a percentage.
+     * @example
+     * snapPoints={[200, 500]}
+     * snapPoints={[200, '%50']}
+     * snapPoints={['%100']}
+     * @type Array<string | number>
+     */
+    snapPoints?: Array<string | number>;
+    /**
+     * When `true`, tapping on the backdrop will not dismiss the modal.
+     * @default false
+     */
+    clickThrough?: boolean;
+};
+
+export type BottomSheetNavigatorProps = DefaultNavigatorOptions<
+    ParamListBase,
+    undefined, // or your ID if you want a named ID, e.g. 'BottomSheetNavigator'
+    BottomSheetNavigationState<ParamListBase>,
+    BottomSheetNavigationOptions,
+    BottomSheetNavigationEventMap,
+    BottomSheetNavigationHelpers
+> &
+    BottomSheetNavigationConfig;
+
+export type BottomSheetDescriptor = Descriptor<
+    BottomSheetNavigationOptions,
+    BottomSheetNavigationProp<ParamListBase>,
+    RouteProp<ParamListBase>
+>;
+
+export type BottomSheetDescriptorMap = {
+    [key: string]: BottomSheetDescriptor;
+};