@swmansion/react-native-bottom-sheet 0.1.0

package/src/BottomSheetFlatList.tsx

@@ -0,0 +1,24 @@
+import { GestureDetector } from 'react-native-gesture-handler';
+import type { FlatListPropsWithLayout } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+
+import { useBottomSheetScrollable } from './useBottomSheetScrollable';
+
+export const BottomSheetFlatList = <T,>(
+  props: Omit<FlatListPropsWithLayout<T>, 'onScroll'>
+) => {
+  const { scrollEnabled, ...rest } = props;
+  const { scrollHandler, scrollableRef, nativeGesture, animatedProps } =
+    useBottomSheetScrollable(scrollEnabled);
+  return (
+    <GestureDetector gesture={nativeGesture}>
+      <Animated.FlatList
+        {...rest}
+        animatedProps={animatedProps}
+        ref={scrollableRef}
+        onScroll={scrollHandler}
+        scrollEventThrottle={16}
+      />
+    </GestureDetector>
+  );
+};

package/src/BottomSheetProvider.tsx

@@ -0,0 +1,83 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useReducer,
+  useState,
+} from 'react';
+import type { ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+interface PortalContextType {
+  addPortal: (key: string, element: ReactNode) => void;
+  removePortal: (key: string) => void;
+  subscribe: (callback: () => void) => () => void;
+  getPortals: () => Map<string, ReactNode>;
+}
+
+const PortalContext = createContext<PortalContextType | null>(null);
+
+const PortalHost = () => {
+  const context = useContext(PortalContext)!;
+  const [, forceRender] = useReducer((x: number) => x + 1, 0);
+  useEffect(() => {
+    return context.subscribe(forceRender);
+  }, [context]);
+  return Array.from(context.getPortals().entries()).map(([key, element]) => (
+    <View key={key} style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      {element}
+    </View>
+  ));
+};
+
+export const BottomSheetProvider = ({ children }: { children: ReactNode }) => {
+  const [context] = useState<PortalContextType>(() => {
+    const portals = new Map<string, ReactNode>();
+    const subscribers = new Set<() => void>();
+    const notify = () => {
+      subscribers.forEach((subscriber) => subscriber());
+    };
+    return {
+      addPortal: (key, element) => {
+        portals.set(key, element);
+        notify();
+      },
+      removePortal: (key) => {
+        portals.delete(key);
+        notify();
+      },
+      subscribe: (callback) => {
+        subscribers.add(callback);
+        return () => {
+          subscribers.delete(callback);
+        };
+      },
+      getPortals: () => portals,
+    };
+  });
+  return (
+    <PortalContext.Provider value={context}>
+      {children}
+      <PortalHost />
+    </PortalContext.Provider>
+  );
+};
+
+export const Portal = ({ children }: { children: ReactNode }) => {
+  const context = useContext(PortalContext);
+  if (context === null) {
+    throw new Error('`Portal` must be used within `BottomSheetProvider`.');
+  }
+  const { addPortal, removePortal } = context;
+  const id = useId();
+  useEffect(() => {
+    addPortal(id, children);
+  }, [id, children, addPortal]);
+  useEffect(() => {
+    return () => {
+      removePortal(id);
+    };
+  }, [id, removePortal]);
+  return null;
+};

package/src/BottomSheetScrollView.tsx

@@ -0,0 +1,24 @@
+import type { ScrollViewProps } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+
+import { useBottomSheetScrollable } from './useBottomSheetScrollable';
+
+export const BottomSheetScrollView = (
+  props: Omit<ScrollViewProps, 'onScroll'>
+) => {
+  const { scrollEnabled, ...rest } = props;
+  const { scrollHandler, scrollableRef, nativeGesture, animatedProps } =
+    useBottomSheetScrollable(scrollEnabled);
+  return (
+    <GestureDetector gesture={nativeGesture}>
+      <Animated.ScrollView
+        {...rest}
+        animatedProps={animatedProps}
+        ref={scrollableRef}
+        onScroll={scrollHandler}
+        scrollEventThrottle={16}
+      />
+    </GestureDetector>
+  );
+};

package/src/ModalBottomSheet.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+
+import type { BottomSheetCommonProps } from './BottomSheetBase';
+import { BottomSheetBase } from './BottomSheetBase';
+
+export interface ModalBottomSheetProps extends BottomSheetCommonProps {
+  scrim?: (progress: SharedValue<number>) => ReactNode;
+}
+
+export const ModalBottomSheet = ({
+  scrim,
+  ...props
+}: ModalBottomSheetProps) => (
+  <BottomSheetBase {...props} modal renderScrim={scrim} />
+);

package/src/index.tsx

@@ -0,0 +1,8 @@
+export { BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';
+export { ModalBottomSheet } from './ModalBottomSheet';
+export type { ModalBottomSheetProps } from './ModalBottomSheet';
+export { BottomSheetProvider } from './BottomSheetProvider';
+export { BottomSheetFlatList } from './BottomSheetFlatList';
+export { BottomSheetScrollView } from './BottomSheetScrollView';
+export type { Detent } from './BottomSheetBase';

package/src/useBottomSheetScrollable.ts

@@ -0,0 +1,62 @@
+import { useEffect } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import {
+  type SharedValue,
+  useAnimatedProps,
+  useAnimatedScrollHandler,
+} from 'react-native-reanimated';
+
+import { useBottomSheetContext } from './BottomSheetContext';
+
+export const useBottomSheetScrollable = (
+  baseScrollEnabled: boolean | SharedValue<boolean | undefined> = true
+) => {
+  const {
+    scrollOffset,
+    scrollableRef,
+    hasScrollable,
+    isScrollableGestureActive,
+    isScrollableLocked,
+    panGesture,
+  } = useBottomSheetContext();
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      'worklet';
+      scrollOffset.set(Math.max(0, event.contentOffset.y));
+    },
+  });
+  const nativeGesture = Gesture.Native()
+    .simultaneousWithExternalGesture(panGesture)
+    .onStart(() => {
+      'worklet';
+      isScrollableGestureActive.set(true);
+    })
+    .onFinalize(() => {
+      'worklet';
+      isScrollableGestureActive.set(false);
+    });
+  const animatedProps = useAnimatedProps(() => {
+    const resolvedScrollEnabled =
+      typeof baseScrollEnabled === 'object' && baseScrollEnabled !== null
+        ? baseScrollEnabled.value ?? true
+        : baseScrollEnabled ?? true;
+    return {
+      scrollEnabled: resolvedScrollEnabled && !isScrollableLocked.value,
+    };
+  });
+  useEffect(() => {
+    if (__DEV__ && hasScrollable.value) {
+      console.warn(
+        'Multiple scrollables within a single bottom sheet. Only one `BottomSheetScrollView` ' +
+          'or `BottomSheetFlatList` is supported per bottom sheet.'
+      );
+    }
+    hasScrollable.set(true);
+    return () => {
+      hasScrollable.set(false);
+      isScrollableGestureActive.set(false);
+      isScrollableLocked.set(false);
+    };
+  }, [hasScrollable, isScrollableGestureActive, isScrollableLocked]);
+  return { scrollHandler, scrollableRef, nativeGesture, animatedProps };
+};