@react-native-ama/bottom-sheet 2.0.0-beta.0

package/src/components/BottomSheet.tsx

@@ -0,0 +1,502 @@
+import * as React from "react";
+import type { PropsWithChildren } from "react";
+import {
+  Dimensions,
+  KeyboardAvoidingView,
+  LayoutChangeEvent,
+  Modal,
+  ModalProps,
+  Platform,
+  Pressable,
+  ScrollViewProps,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from "react-native";
+import {
+  GestureDetector,
+  GestureHandlerRootView,
+  ScrollView,
+} from "react-native-gesture-handler";
+import Animated, {
+  runOnJS,
+  SharedValue,
+  useAnimatedStyle,
+  useDerivedValue,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { useBottomSheetGestureHandler } from "../hooks/useBottomSheetGestureHandler";
+import { useKeyboard } from "../hooks/useKeyboard";
+
+const AnimaCore = require("@react-native-ama/core");
+
+export type BottomSheetProps = {
+  animationDuration?: number;
+  autoCloseDelay?: number;
+  avoidKeyboard?: boolean;
+  bottomSheetStyle?: ViewStyle | ViewStyle[];
+  closeActionAccessibilityLabel: string;
+  closeDistance?: number;
+  footerComponent?: React.ReactElement;
+  handleComponent?: React.ReactElement | "none";
+  handleStyle?: ViewStyle | ViewStyle[];
+  headerComponent?: React.ReactElement;
+  maxHeight?: number;
+  minVelocityToClose?: number;
+  onBottomSheetHidden?: () => void;
+  onClose: () => void;
+  overlayOpacity?: number;
+  overlayStyle?: ViewStyle | ViewStyle[];
+  panGestureEnabled?: boolean;
+  persistent?: boolean;
+  hasScrollableContent?: boolean;
+  scrollViewProps?: Omit<
+    ScrollViewWrapperProps,
+    "testID" | "maxScrollViewHeight"
+  >;
+  testID?: string;
+  topInset: number;
+  visible: boolean;
+  ref?: React.RefObject<BottomSheetActions>;
+  shouldHandleKeyboardEvents?: boolean;
+  supportedOrientations?: ModalProps["supportedOrientations"];
+  isOverlayAccessible?: boolean;
+};
+
+export type BottomSheetActions = {
+  close: () => Promise<void>;
+  isVisible: () => boolean;
+};
+
+const isIOS = Platform.OS === "ios";
+const SCREEN_HEIGHT = Dimensions.get("screen").height;
+
+export const BottomSheet = React.forwardRef<
+  BottomSheetActions,
+  React.PropsWithChildren<BottomSheetProps>
+>(
+  (
+    {
+      children,
+      visible,
+      onClose,
+      handleStyle = {},
+      bottomSheetStyle = {},
+      overlayStyle,
+      closeActionAccessibilityLabel,
+      headerComponent,
+      animationDuration = 300,
+      closeDistance = 0.3,
+      handleComponent,
+      scrollViewProps,
+      hasScrollableContent = true,
+      persistent = false,
+      autoCloseDelay,
+      panGestureEnabled = true,
+      testID,
+      overlayOpacity = 1,
+      footerComponent,
+      avoidKeyboard,
+      maxHeight: propMaxHeight,
+      minVelocityToClose = 1000,
+      topInset,
+      onBottomSheetHidden,
+      shouldHandleKeyboardEvents = true,
+      supportedOrientations,
+      isOverlayAccessible = true,
+    },
+    ref
+  ) => {
+    // This is used to let Reanimated animate the view out, before removing it from the tree.
+    const [shouldRenderContent, setShouldRenderContent] =
+      React.useState(visible);
+    const [isModalVisible, setIsModalVisible] = React.useState(false);
+    const translateY = useSharedValue(SCREEN_HEIGHT * 1.5);
+    const contentHeight = useSharedValue(0);
+    const dragOpacity = useSharedValue(0);
+    const onTimeout = AnimaCore?.useTimedAction()?.onTimeout || setTimeout;
+    const isMounted = React.useRef(false);
+    const [headerHeight, setHeaderHeight] = React.useState(-1);
+    const [footerHeight, setFooterHeight] = React.useState(-1);
+    const [handleHeight, setHandleHeight] = React.useState(-1);
+    const promiseResolver = React.useRef<(() => void) | null>(null);
+    const [maxScrollViewHeight, setMaxScrollViewHeight] = React.useState(0);
+    const { keyboardHeight, keyboardFinalHeight } = useKeyboard(
+      shouldHandleKeyboardEvents
+    );
+    const shouldReduceMotion = useReducedMotion();
+    const { height } = useWindowDimensions();
+    const maxHeight = propMaxHeight ?? height * 0.9;
+
+    const duration = shouldReduceMotion ? 0 : animationDuration;
+
+    React.useImperativeHandle(ref, () => ({
+      close: async () => {
+        if (!shouldRenderContent) {
+          return Promise.resolve();
+        }
+
+        return new Promise((resolve) => {
+          promiseResolver.current = resolve;
+
+          onClose();
+        });
+      },
+      isVisible: () => {
+        return shouldRenderContent;
+      },
+    }));
+
+    React.useEffect(() => {
+      if (visible) {
+        dragOpacity.value = withTiming(overlayOpacity, {
+          duration,
+        });
+
+        setIsModalVisible(true);
+        setShouldRenderContent(true);
+
+        if (autoCloseDelay) {
+          onTimeout(() => {
+            if (isMounted.current) {
+              onClose();
+            }
+          }, autoCloseDelay);
+        }
+      } else if (isModalVisible) {
+        const finished = () => {
+          setShouldRenderContent(false);
+          setIsModalVisible(false);
+
+          onBottomSheetHidden?.();
+          promiseResolver.current?.();
+        };
+
+        dragOpacity.value = withTiming(0, {
+          duration,
+        });
+
+        translateY.value = withTiming(
+          contentHeight.value,
+          {
+            duration,
+          },
+          () => {
+            runOnJS(finished)();
+          }
+        );
+      }
+    }, [
+      duration,
+      autoCloseDelay,
+      isModalVisible,
+      onBottomSheetHidden,
+      onClose,
+      onTimeout,
+      translateY,
+      visible,
+      dragOpacity,
+      overlayOpacity,
+      contentHeight.value,
+    ]);
+
+    React.useEffect(() => {
+      isMounted.current = true;
+
+      return () => {
+        isMounted.current = false;
+      };
+    }, []);
+
+    const dragStyle = useAnimatedStyle(() => {
+      return {
+        opacity: dragOpacity.value,
+      };
+    });
+
+    const maxHeightValue = useDerivedValue(() => {
+      return maxHeight - keyboardHeight.value;
+    }, [keyboardHeight, maxHeight]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      const keyboard = isIOS ? keyboardHeight.value : 0;
+
+      return {
+        transform: [{ translateY: translateY.value - keyboard }],
+        maxHeight: maxHeightValue.value,
+      };
+    }, [maxHeightValue, translateY, keyboardHeight]);
+
+    useDerivedValue(() => {
+      const maxScrollHeight = Math.ceil(
+        maxHeight -
+          keyboardFinalHeight.value -
+          footerHeight -
+          headerHeight -
+          handleHeight -
+          topInset
+      );
+
+      if (
+        !Number.isNaN(maxScrollHeight) &&
+        maxScrollHeight !== maxScrollViewHeight
+      ) {
+        runOnJS(setMaxScrollViewHeight)(maxScrollHeight);
+      }
+    }, [
+      footerHeight,
+      headerHeight,
+      handleHeight,
+      keyboardFinalHeight,
+      topInset,
+      maxHeight,
+    ]);
+
+    const handleOnLayout = (event: LayoutChangeEvent) => {
+      contentHeight.value = event.nativeEvent.layout.height;
+
+      if (translateY.value === 0) {
+        return;
+      }
+
+      translateY.value = event.nativeEvent.layout.height;
+      translateY.value = withTiming(0, { duration });
+    };
+
+    const maybeCloseBottomSheet = persistent ? undefined : onClose;
+
+    const Wrapper =
+      avoidKeyboard && !shouldHandleKeyboardEvents
+        ? BottomSheetKeyboardAvoidingView
+        : React.Fragment;
+
+    const opacity = [footerHeight, headerHeight, handleHeight].every(
+      (h) => h >= 0
+    )
+      ? 1
+      : 0;
+
+    const ContentWrapper = hasScrollableContent
+      ? ScrollViewWrapper
+      : FragmentWrapper;
+
+    return (
+      <Modal
+        animationType="none"
+        transparent={true}
+        visible={isModalVisible}
+        onRequestClose={onClose}
+        ref={ref as any}
+        testID={testID}
+        supportedOrientations={supportedOrientations}
+        statusBarTranslucent={true}
+      >
+        <Wrapper>
+          {shouldRenderContent ? (
+            <GestureHandlerRootView style={{ flex: 1, opacity }}>
+              <Animated.View
+                style={[styles.overlay, overlayStyle, dragStyle]}
+                testID={`${testID}-overlay-wrapper`}
+              >
+                <Pressable
+                  style={styles.closeButton}
+                  accessibilityRole="button"
+                  onPress={maybeCloseBottomSheet}
+                  testID={`${testID}-overlay-button`}
+                  accessible={isOverlayAccessible && !persistent}
+                  importantForAccessibility={
+                    persistent ? "no-hide-descendants" : "yes"
+                  }
+                  accessibilityElementsHidden={persistent}
+                  onAccessibilityTap={maybeCloseBottomSheet}
+                  accessibilityLabel={closeActionAccessibilityLabel}
+                />
+              </Animated.View>
+              <Animated.View
+                style={[
+                  styles.contentWrapper,
+                  styles.content,
+                  bottomSheetStyle,
+                  animatedStyle,
+                ]}
+                testID={`${testID}-wrapper`}
+                onLayout={handleOnLayout}
+              >
+                <GestureHandler
+                  translateY={translateY}
+                  closeDistance={closeDistance}
+                  contentHeight={contentHeight}
+                  onClose={onClose}
+                  testID={`${testID}-gesture-handler`}
+                  overlayOpacity={overlayOpacity}
+                  dragOpacity={dragOpacity}
+                  minVelocityToClose={minVelocityToClose}
+                  panGestureEnabled={panGestureEnabled}
+                >
+                  <View
+                    onLayout={(event) => {
+                      setHandleHeight(event.nativeEvent.layout.height);
+                    }}
+                  >
+                    {handleComponent === "none"
+                      ? null
+                      : handleComponent ?? (
+                          <View
+                            style={[styles.line, handleStyle]}
+                            testID={`${testID}-line`}
+                          />
+                        )}
+                  </View>
+                  <View
+                    onLayout={(event) => {
+                      setHeaderHeight(event.nativeEvent.layout.height);
+                    }}
+                  >
+                    {headerComponent}
+                  </View>
+                  <ContentWrapper
+                    {...scrollViewProps}
+                    testID={testID}
+                    maxScrollViewHeight={maxScrollViewHeight}
+                  >
+                    {children}
+                  </ContentWrapper>
+                  <View
+                    onLayout={(event) => {
+                      setFooterHeight(event.nativeEvent.layout.height);
+                    }}
+                  >
+                    {footerComponent}
+                  </View>
+                </GestureHandler>
+              </Animated.View>
+            </GestureHandlerRootView>
+          ) : null}
+        </Wrapper>
+      </Modal>
+    );
+  }
+);
+
+const BottomSheetKeyboardAvoidingView = ({
+  children,
+}: React.PropsWithChildren<{}>) => {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+      pointerEvents="box-none"
+      style={{ flex: 1 }}
+    >
+      {children}
+    </KeyboardAvoidingView>
+  );
+};
+
+type GestureHandlerProps = PropsWithChildren<{
+  translateY: SharedValue<number>;
+  contentHeight: SharedValue<number>;
+  dragOpacity: SharedValue<number>;
+  overlayOpacity: number;
+  closeDistance: number;
+  onClose: () => void;
+  panGestureEnabled: boolean;
+  testID?: string;
+  minVelocityToClose: number;
+}>;
+
+const GestureHandler = ({
+  translateY,
+  closeDistance,
+  contentHeight,
+  children,
+  onClose,
+  panGestureEnabled,
+  testID,
+  dragOpacity,
+  overlayOpacity,
+  minVelocityToClose,
+}: GestureHandlerProps) => {
+  const { gestureHandler } = useBottomSheetGestureHandler({
+    translateY,
+    closeDistance,
+    contentHeight,
+    onClose,
+    dragOpacity,
+    overlayOpacity,
+    minVelocityToClose,
+  });
+
+  return panGestureEnabled ? (
+    <GestureDetector gesture={gestureHandler}>
+      <Animated.View testID={testID}>{children}</Animated.View>
+    </GestureDetector>
+  ) : (
+    <Animated.View testID={testID}>{children}</Animated.View>
+  );
+};
+
+type ScrollViewWrapperProps = {
+  testID?: string;
+  maxScrollViewHeight: number;
+} & ScrollViewProps;
+
+const ScrollViewWrapper: React.FC<ScrollViewWrapperProps> = ({
+  scrollEnabled = true,
+  testID,
+  maxScrollViewHeight,
+  children,
+  style,
+  ...rest
+}) => {
+  return (
+    <ScrollView
+      {...rest}
+      style={[{ maxHeight: maxScrollViewHeight }, style]}
+      scrollEnabled={scrollEnabled}
+      testID={`${testID}-scrollview`}
+    >
+      {children}
+    </ScrollView>
+  );
+};
+
+const FragmentWrapper: React.FC<React.PropsWithChildren<any>> = ({
+  children,
+}) => {
+  return <>{children}</>;
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    flex: 1,
+  },
+  closeButton: {
+    flex: 1,
+  },
+  contentWrapper: {
+    flexDirection: "column",
+    flex: 1,
+    position: "absolute",
+    bottom: 0,
+    alignSelf: "flex-end",
+    width: "100%",
+  },
+  content: {
+    width: "100%",
+    backgroundColor: "#fff",
+    flex: 1,
+  },
+  line: {
+    width: 48,
+    height: 4,
+    backgroundColor: "grey",
+    alignSelf: "center",
+    marginBottom: 24,
+    borderRadius: 2,
+    marginTop: 12,
+  },
+});

package/src/hooks/useBottomSheetGestureHandler.test.ts

@@ -0,0 +1,158 @@
+import { renderHook } from '@testing-library/react-native';
+import { SharedValue } from 'react-native-reanimated';
+import { useBottomSheetGestureHandler } from './useBottomSheetGestureHandler';
+
+var mockWithTiming: jest.Mock;
+var mockRunOnJS: jest.Mock;
+var mockStartY: { value: number };
+
+jest.mock('react-native-reanimated', () => {
+  mockWithTiming = jest.fn(value => value);
+  mockRunOnJS = jest.fn(callback => callback);
+  mockStartY = { value: 0 };
+
+  return {
+    SharedValue: undefined,
+    runOnJS: mockRunOnJS,
+    useReducedMotion: jest.fn(() => false),
+    useAnimatedStyle: jest.fn(),
+    useSharedValue: jest.fn(() => mockStartY),
+    withTiming: mockWithTiming,
+  };
+});
+
+jest.mock('react-native-gesture-handler', () => {
+  return {
+    Gesture: {
+      Pan: jest.fn(() => {
+        const handler: any = {};
+        handler.onStart = (cb: any) => { handler._onStart = cb; return handler; };
+        handler.onUpdate = (cb: any) => { handler._onUpdate = cb; return handler; };
+        handler.onEnd = (cb: any) => { handler._onEnd = cb; return handler; };
+        return handler;
+      }),
+    },
+    GestureDetector: ({ children }: any) => children,
+    GestureHandlerRootView: ({ children }: any) => children,
+    ScrollView: 'ScrollView',
+  };
+});
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockStartY = { value: 0 };
+});
+
+describe('useBottomSheetGestureHandler', () => {
+  it('onStart stores the current translateY position', () => {
+    const translateY = { value: 42 } as SharedValue<number>;
+    const { result } = renderHook(() =>
+      useBottomSheetGestureHandler({
+        translateY,
+        closeDistance: 0.5,
+        contentHeight: { value: 100 } as SharedValue<number>,
+        dragOpacity: { value: 0 } as SharedValue<number>,
+        minVelocityToClose: 0,
+        overlayOpacity: 0,
+        onClose: () => {},
+      }),
+    );
+
+    (result.current.gestureHandler as any)._onStart(null);
+
+    expect(mockStartY.value).toBe(42);
+  });
+
+  it('onUpdate updates the translateY limiting it to be >= 0', () => {
+    const translateY = { value: 42 } as SharedValue<number>;
+    const { result } = renderHook(() =>
+      useBottomSheetGestureHandler({
+        dragOpacity: { value: 0 } as SharedValue<number>,
+        minVelocityToClose: 0,
+        overlayOpacity: 0,
+        translateY,
+        closeDistance: 0.5,
+        contentHeight: { value: 100 } as SharedValue<number>,
+        onClose: () => {},
+      }),
+    );
+
+    (result.current.gestureHandler as any)._onStart(null);
+    (result.current.gestureHandler as any)._onUpdate({ translationY: 100 });
+
+    expect(translateY.value).toBe(142);
+
+    (result.current.gestureHandler as any)._onUpdate({ translationY: -500 });
+
+    expect(translateY.value).toBe(0);
+  });
+
+  describe('onEnd', () => {
+    it('animates back translateY to 0 when the distance is less than the specified one', () => {
+      const translateY = { value: 0 };
+      const { result } = renderHook(() =>
+        useBottomSheetGestureHandler({
+          translateY,
+          closeDistance: 0.5,
+          contentHeight: { value: 500 },
+          onClose: () => {},
+          dragOpacity: { value: 0 },
+          minVelocityToClose: 1000,
+        } as any),
+      );
+
+      (result.current.gestureHandler as any)._onUpdate({ translationY: 249 });
+      (result.current.gestureHandler as any)._onEnd({ velocityY: 100 });
+
+      expect(translateY.value).toBe(0);
+      expect(mockWithTiming).toHaveBeenCalledWith(0, { duration: 300 });
+    });
+
+    it('calls the onClose event when the distance is at least the requested one', () => {
+      const translateY = { value: 0 } as SharedValue<number>;
+      const onClose = jest.fn();
+
+      const { result } = renderHook(() =>
+        useBottomSheetGestureHandler({
+          translateY,
+          closeDistance: 0.5,
+          dragOpacity: { value: 0 } as SharedValue<number>,
+          minVelocityToClose: 0,
+          overlayOpacity: 0,
+          contentHeight: { value: 500 } as SharedValue<number>,
+          onClose,
+        }),
+      );
+
+      (result.current.gestureHandler as any)._onUpdate({ translationY: 250 });
+      (result.current.gestureHandler as any)._onEnd(null);
+
+      expect(mockRunOnJS).toHaveBeenCalledWith(onClose);
+      expect(onClose).toHaveBeenCalledWith();
+      expect(mockWithTiming).not.toHaveBeenCalled();
+    });
+
+    it('calls onClose when the velocity is bigger than minVelocityToClose', () => {
+      const onClose = jest.fn();
+
+      const translateY = { value: 0 };
+      const { result } = renderHook(() =>
+        useBottomSheetGestureHandler({
+          translateY,
+          closeDistance: 0.9,
+          contentHeight: { value: 500 },
+          onClose,
+          dragOpacity: { value: 0 },
+          minVelocityToClose: 1000,
+        } as any),
+      );
+
+      (result.current.gestureHandler as any)._onUpdate({ translationY: 42 });
+      (result.current.gestureHandler as any)._onEnd({ velocityY: 1001 });
+
+      expect(mockRunOnJS).toHaveBeenCalledWith(onClose);
+      expect(onClose).toHaveBeenCalledWith();
+      expect(mockWithTiming).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/hooks/useBottomSheetGestureHandler.ts

@@ -0,0 +1,62 @@
+import { Gesture } from 'react-native-gesture-handler';
+import {
+  runOnJS,
+  SharedValue,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+type UseBottomSheetGestureHandler = {
+  translateY: SharedValue<number>;
+  contentHeight: SharedValue<number>;
+  dragOpacity: SharedValue<number>;
+  closeDistance: number;
+  overlayOpacity: number;
+  onClose: () => void;
+  minVelocityToClose: number;
+};
+
+export const useBottomSheetGestureHandler = ({
+  translateY,
+  closeDistance,
+  contentHeight,
+  onClose,
+  dragOpacity,
+  overlayOpacity,
+  minVelocityToClose,
+}: UseBottomSheetGestureHandler) => {
+const shouldReduceMotion = useReducedMotion();
+  const startY = useSharedValue(0);
+
+  const gestureHandler = Gesture.Pan()
+    .onStart(() => {
+      startY.value = translateY.value;
+    })
+    .onUpdate(event => {
+      translateY.value = Math.max(0, startY.value + event.translationY);
+
+      const distance = contentHeight.value - translateY.value;
+      const opacity = Math.min(distance / contentHeight.value, overlayOpacity);
+
+      dragOpacity.value = opacity;
+    })
+    .onEnd(event => {
+      const minimumDistanceToClose = contentHeight.value * closeDistance;
+      const shouldCloseBottomSheet =
+        translateY.value >= minimumDistanceToClose ||
+        event.velocityY >= minVelocityToClose;
+
+      if (shouldCloseBottomSheet) {
+        runOnJS(onClose)();
+      } else {
+        translateY.value = withTiming(0, {
+          duration: shouldReduceMotion ? 0 : 300,
+        });
+      }
+    });
+
+  return {
+    gestureHandler,
+  };
+};