@mustmove/bottom-sheet 1.0.0

package/src/components/bottomSheet/BottomSheetBody.tsx

@@ -0,0 +1,44 @@
+import React, { memo, useMemo } from 'react';
+import { Platform } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { useBottomSheetInternal } from '../../hooks';
+import type { BottomSheetProps } from '../bottomSheet/types';
+import { styles } from './styles';
+
+type BottomSheetBodyProps = {
+  style?: BottomSheetProps['style'];
+  children?: React.ReactNode;
+};
+
+function BottomSheetBodyComponent({ style, children }: BottomSheetBodyProps) {
+  //#region hooks
+  const { animatedIndex, animatedPosition } = useBottomSheetInternal();
+  //#endregion
+
+  //#region styles
+  const containerAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: Platform.OS === 'android' && animatedIndex.get() === -1 ? 0 : 1,
+      transform: [
+        {
+          translateY: animatedPosition.get(),
+        },
+      ],
+    }),
+    [animatedPosition, animatedIndex]
+  );
+  const containerStyle = useMemo(
+    () => [style, styles.container, containerAnimatedStyle],
+    [style, containerAnimatedStyle]
+  );
+  //#endregion
+
+  return (
+    <Animated.View style={containerStyle} collapsable={true}>
+      {children}
+    </Animated.View>
+  );
+}
+
+export const BottomSheetBody = memo(BottomSheetBodyComponent);
+BottomSheetBody.displayName = 'BottomSheetBody';

package/src/components/bottomSheet/BottomSheetContent.tsx

@@ -0,0 +1,261 @@
+import React, { memo, useMemo } from 'react';
+import type { ViewProps, ViewStyle } from 'react-native';
+import Animated, {
+  type AnimatedStyle,
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated';
+import {
+  INITIAL_LAYOUT_VALUE,
+  KEYBOARD_BEHAVIOR,
+  KEYBOARD_STATUS,
+} from '../../constants';
+import { useBottomSheetInternal } from '../../hooks';
+import type { NullableAccessibilityProps } from '../../types';
+import { animate } from '../../utilities';
+import BottomSheetDraggableView from '../bottomSheetDraggableView';
+import {} from './constants';
+import type { BottomSheetProps } from './types';
+
+type BottomSheetContent = {
+  style?: AnimatedStyle<ViewStyle>;
+} & Pick<
+  BottomSheetProps,
+  | 'children'
+  | 'detached'
+  | 'animationConfigs'
+  | 'overrideReduceMotion'
+  | 'keyboardBehavior'
+> &
+  NullableAccessibilityProps &
+  ViewProps;
+
+function BottomSheetContentComponent({
+  detached,
+  animationConfigs,
+  overrideReduceMotion,
+  keyboardBehavior,
+  accessible,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  children,
+}: BottomSheetContent) {
+  //#region hooks
+  const {
+    enableDynamicSizing,
+    overDragResistanceFactor,
+    enableContentPanningGesture,
+    animatedPosition,
+    animatedLayoutState,
+    animatedDetentsState,
+    animatedSheetHeight,
+    animatedKeyboardState,
+    isInTemporaryPosition,
+  } = useBottomSheetInternal();
+  //#endregion
+
+  //#region variables
+  const animatedContentHeightMax = useDerivedValue(() => {
+    const { containerHeight, handleHeight } = animatedLayoutState.get();
+
+    /**
+     * if container height is not yet calculated, then we exit the method
+     */
+    if (containerHeight === INITIAL_LAYOUT_VALUE) {
+      return 0;
+    }
+
+    const {
+      status: keyboardStatus,
+      heightWithinContainer: keyboardHeightWithinContainer,
+    } = animatedKeyboardState.get();
+
+    let contentHeight = animatedSheetHeight.get() - Math.max(0, handleHeight);
+
+    switch (keyboardBehavior) {
+      case KEYBOARD_BEHAVIOR.extend:
+        if (keyboardStatus === KEYBOARD_STATUS.SHOWN) {
+          contentHeight = contentHeight - keyboardHeightWithinContainer;
+        }
+        break;
+
+      case KEYBOARD_BEHAVIOR.fillParent:
+        if (!isInTemporaryPosition.get()) {
+          break;
+        }
+
+        if (keyboardStatus === KEYBOARD_STATUS.SHOWN) {
+          contentHeight =
+            containerHeight - handleHeight - keyboardHeightWithinContainer;
+        } else {
+          contentHeight = containerHeight - handleHeight;
+        }
+        break;
+
+      case KEYBOARD_BEHAVIOR.interactive: {
+        if (!isInTemporaryPosition.get()) {
+          break;
+        }
+
+        if (keyboardStatus === KEYBOARD_STATUS.SHOWN) {
+          if (
+            keyboardHeightWithinContainer + animatedSheetHeight.get() >
+            containerHeight
+          ) {
+            contentHeight =
+              containerHeight - keyboardHeightWithinContainer - handleHeight;
+          }
+        } else {
+          /**
+           * When keyboard is hidden but sheet is still in temporary position
+           * (e.g. keyboardBlurBehavior="none"), use the actual position-based
+           * height instead of the snap-point based animatedSheetHeight.
+           * This prevents white space at the bottom of the sheet.
+           */
+          contentHeight =
+            containerHeight -
+            animatedPosition.get() -
+            Math.max(0, handleHeight);
+        }
+        break;
+      }
+    }
+
+    /**
+     * before the container is measured, `contentHeight` value will be below zero,
+     * which will lead to freeze the scrollable.
+     *
+     * @link (https://github.com/gorhom/react-native-bottom-sheet/issues/470)
+     */
+    return Math.max(contentHeight, 0);
+  }, [
+    animatedLayoutState,
+    animatedKeyboardState,
+    animatedSheetHeight,
+    animatedPosition,
+    isInTemporaryPosition,
+    keyboardBehavior,
+  ]);
+  const animatedPaddingBottom = useDerivedValue(() => {
+    const containerHeight = animatedLayoutState.get().containerHeight;
+    /**
+     * if container height is not yet calculated, then we exit the method
+     */
+    if (containerHeight === INITIAL_LAYOUT_VALUE) {
+      return 0;
+    }
+
+    const { highestDetentPosition } = animatedDetentsState.get();
+
+    const highestSnapPoint = Math.max(
+      highestDetentPosition ?? 0,
+      animatedPosition.get()
+    );
+    /**
+     * added safe area to prevent the sheet from floating above
+     * the bottom of the screen, when sheet being over dragged or
+     * when the sheet is resized.
+     */
+    const overDragSafePaddingBottom =
+      Math.sqrt(highestSnapPoint - containerHeight * -1) *
+      overDragResistanceFactor;
+
+    let paddingBottom = overDragSafePaddingBottom;
+
+    /**
+     * if keyboard is open, then we try to add padding to prevent content
+     * from being covered by the keyboard.
+     */
+    const {
+      status: keyboardStatus,
+      heightWithinContainer: keyboardHeightWithinContainer,
+    } = animatedKeyboardState.get();
+    if (keyboardStatus === KEYBOARD_STATUS.SHOWN) {
+      paddingBottom = overDragSafePaddingBottom + keyboardHeightWithinContainer;
+    }
+
+    return paddingBottom;
+  }, [
+    overDragResistanceFactor,
+    animatedPosition,
+    animatedLayoutState,
+    animatedDetentsState,
+    animatedKeyboardState,
+  ]);
+  //#endregion
+
+  //#region styles
+  const contentMaskContainerAnimatedStyle = useAnimatedStyle(() => {
+    const { containerHeight, contentHeight } = animatedLayoutState.get();
+    /**
+     * if container height is not yet calculated, then we exit the method
+     */
+    if (containerHeight === INITIAL_LAYOUT_VALUE) {
+      return {};
+    }
+
+    /**
+     * if dynamic sizing is enabled, and content height
+     * is still not set, then we exit method.
+     */
+    if (enableDynamicSizing && contentHeight === INITIAL_LAYOUT_VALUE) {
+      return {};
+    }
+
+    const paddingBottom = detached ? 0 : animatedPaddingBottom.get();
+    const height = animatedContentHeightMax.get() + paddingBottom;
+
+    return {
+      paddingBottom: animate({
+        point: paddingBottom,
+        configs: animationConfigs,
+        overrideReduceMotion,
+      }),
+      height: animate({
+        point: height,
+        configs: animationConfigs,
+        overrideReduceMotion,
+      }),
+    };
+  }, [
+    overDragResistanceFactor,
+    enableDynamicSizing,
+    detached,
+    animationConfigs,
+    overrideReduceMotion,
+    animatedLayoutState,
+    animatedContentHeightMax,
+    animatedLayoutState,
+  ]);
+  const contentContainerStyle = useMemo(
+    () => [
+      detached
+        ? { overflow: 'visible' as const }
+        : { overflow: 'hidden' as const },
+      contentMaskContainerAnimatedStyle,
+    ],
+    [contentMaskContainerAnimatedStyle, detached]
+  );
+  //#endregion
+
+  //#region render
+  const DraggableView = enableContentPanningGesture
+    ? BottomSheetDraggableView
+    : Animated.View;
+  return (
+    <DraggableView
+      accessible={accessible}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={accessibilityRole}
+      style={contentContainerStyle}
+    >
+      {children}
+    </DraggableView>
+  );
+  //#endregion
+}
+
+export const BottomSheetContent = memo(BottomSheetContentComponent);
+BottomSheetContent.displayName = 'BottomSheetContent';

package/src/components/bottomSheet/constants.ts

@@ -0,0 +1,58 @@
+import {
+  KEYBOARD_BEHAVIOR,
+  KEYBOARD_BLUR_BEHAVIOR,
+  KEYBOARD_INPUT_MODE,
+  SCREEN_HEIGHT,
+} from '../../constants';
+
+// default values
+const DEFAULT_HANDLE_HEIGHT = 24;
+const DEFAULT_OVER_DRAG_RESISTANCE_FACTOR = 2.5;
+const DEFAULT_ENABLE_CONTENT_PANNING_GESTURE = true;
+const DEFAULT_ENABLE_HANDLE_PANNING_GESTURE = true;
+const DEFAULT_ENABLE_OVER_DRAG = true;
+const DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = false;
+const DEFAULT_ANIMATE_ON_MOUNT = true;
+const DEFAULT_DYNAMIC_SIZING = true;
+
+// keyboard
+const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.interactive;
+const DEFAULT_KEYBOARD_BLUR_BEHAVIOR = KEYBOARD_BLUR_BEHAVIOR.none;
+const DEFAULT_KEYBOARD_INPUT_MODE = KEYBOARD_INPUT_MODE.adjustPan;
+const DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE = false;
+const DEFAULT_KEYBOARD_INDEX = -998;
+
+// initial values
+const INITIAL_VALUE = Number.NEGATIVE_INFINITY;
+const INITIAL_SNAP_POINT = -999;
+const INITIAL_POSITION = SCREEN_HEIGHT;
+
+// accessibility
+const DEFAULT_ACCESSIBLE = true;
+const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom Sheet';
+const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
+
+export {
+  DEFAULT_HANDLE_HEIGHT,
+  DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
+  DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
+  DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
+  DEFAULT_ENABLE_OVER_DRAG,
+  DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
+  DEFAULT_DYNAMIC_SIZING,
+  DEFAULT_ANIMATE_ON_MOUNT,
+  // keyboard
+  DEFAULT_KEYBOARD_BEHAVIOR,
+  DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
+  DEFAULT_KEYBOARD_INPUT_MODE,
+  DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE,
+  DEFAULT_KEYBOARD_INDEX,
+  // layout
+  INITIAL_POSITION,
+  INITIAL_SNAP_POINT,
+  INITIAL_VALUE,
+  // accessibility
+  DEFAULT_ACCESSIBLE,
+  DEFAULT_ACCESSIBILITY_LABEL,
+  DEFAULT_ACCESSIBILITY_ROLE,
+};

package/src/components/bottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BottomSheet';
+export type { BottomSheetProps } from './types';

package/src/components/bottomSheet/styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column-reverse',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});