@mustmove/bottom-sheet 1.0.0

package/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx

@@ -0,0 +1,127 @@
+import React, {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import type {
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
+} from 'react-native';
+import { TextInput as RNTextInput } from 'react-native';
+import { TextInput } from 'react-native-gesture-handler';
+import { useBottomSheetInternal } from '../../hooks';
+import { findNodeHandle } from '../../utilities';
+import type { BottomSheetTextInputProps } from './types';
+
+const BottomSheetTextInputComponent = forwardRef<
+  TextInput | undefined,
+  BottomSheetTextInputProps
+>(({ onFocus, onBlur, ...rest }, providedRef) => {
+  //#region refs
+  const ref = useRef<TextInput>(null);
+  //#endregion
+
+  //#region hooks
+  const { animatedKeyboardState, textInputNodesRef } = useBottomSheetInternal();
+  //#endregion
+
+  //#region callbacks
+  const handleOnFocus = useCallback(
+    (args: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      animatedKeyboardState.set(state => ({
+        ...state,
+        target: args.nativeEvent.target,
+      }));
+      if (onFocus) {
+        onFocus(args);
+      }
+    },
+    [onFocus, animatedKeyboardState]
+  );
+  const handleOnBlur = useCallback(
+    (args: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      const keyboardState = animatedKeyboardState.get();
+      const currentFocusedInput = findNodeHandle(
+        RNTextInput.State.currentlyFocusedInput()
+      );
+
+      /**
+       * we need to make sure that we only remove the target
+       * if the target belong to the current component and
+       * if the currently focused input is not in the targets set.
+       */
+      const shouldRemoveCurrentTarget =
+        keyboardState.target === args.nativeEvent.target;
+      const shouldIgnoreBlurEvent =
+        currentFocusedInput &&
+        textInputNodesRef.current.has(currentFocusedInput);
+
+      if (shouldRemoveCurrentTarget && !shouldIgnoreBlurEvent) {
+        animatedKeyboardState.set(state => ({
+          ...state,
+          target: undefined,
+        }));
+      }
+
+      if (onBlur) {
+        onBlur(args);
+      }
+    },
+    [onBlur, animatedKeyboardState, textInputNodesRef]
+  );
+  //#endregion
+
+  //#region effects
+  useEffect(() => {
+    const componentNode = findNodeHandle(ref.current);
+    if (!componentNode) {
+      return;
+    }
+
+    if (!textInputNodesRef.current.has(componentNode)) {
+      textInputNodesRef.current.add(componentNode);
+    }
+
+    return () => {
+      const componentNode = findNodeHandle(ref.current);
+      if (!componentNode) {
+        return;
+      }
+
+      const keyboardState = animatedKeyboardState.get();
+      /**
+       * remove the keyboard state target if it belong
+       * to the current component.
+       */
+      if (keyboardState.target === componentNode) {
+        animatedKeyboardState.set(state => ({
+          ...state,
+          target: undefined,
+        }));
+      }
+
+      if (textInputNodesRef.current.has(componentNode)) {
+        textInputNodesRef.current.delete(componentNode);
+      }
+    };
+  }, [textInputNodesRef, animatedKeyboardState]);
+  useImperativeHandle(providedRef, () => ref.current ?? undefined, []);
+  //#endregion
+
+  return (
+    <TextInput
+      ref={ref}
+      onFocus={handleOnFocus}
+      onBlur={handleOnBlur}
+      {...rest}
+    />
+  );
+});
+
+const BottomSheetTextInput = memo(BottomSheetTextInputComponent);
+BottomSheetTextInput.displayName = 'BottomSheetTextInput';
+
+export default BottomSheetTextInput;

package/src/components/bottomSheetTextInput/index.ts

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

package/src/components/bottomSheetTextInput/types.ts

@@ -0,0 +1,3 @@
+import type { TextInputProps } from 'react-native';
+
+export interface BottomSheetTextInputProps extends TextInputProps {}

package/src/components/bottomSheetView/BottomSheetView.tsx

@@ -0,0 +1,93 @@
+import React, { memo, useEffect, useCallback, useMemo } from 'react';
+import { type LayoutChangeEvent, View } from 'react-native';
+import { SCROLLABLE_TYPE } from '../../constants';
+import {
+  useBottomSheetContentContainerStyle,
+  useBottomSheetInternal,
+} from '../../hooks';
+import { print } from '../../utilities';
+import { styles } from './styles';
+import type { BottomSheetViewProps } from './types';
+
+function BottomSheetViewComponent({
+  focusHook: useFocusHook = useEffect,
+  enableFooterMarginAdjustment = false,
+  onLayout,
+  style: _providedStyle,
+  children,
+  ...rest
+}: BottomSheetViewProps) {
+  //#region hooks
+  const { animatedScrollableState, enableDynamicSizing, animatedLayoutState } =
+    useBottomSheetInternal();
+  //#endregion
+
+  //#region styles
+  const containerStyle = useBottomSheetContentContainerStyle(
+    enableFooterMarginAdjustment,
+    _providedStyle
+  );
+  const style = useMemo(
+    () => [containerStyle, styles.container],
+    [containerStyle]
+  );
+  //#endregion
+
+  //#region callbacks
+  const handleSettingScrollable = useCallback(() => {
+    animatedScrollableState.set(state => ({
+      ...state,
+      contentOffsetY: 0,
+      type: SCROLLABLE_TYPE.VIEW,
+    }));
+  }, [animatedScrollableState]);
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (enableDynamicSizing) {
+        const {
+          nativeEvent: {
+            layout: { height },
+          },
+        } = event;
+        animatedLayoutState.modify(state => {
+          'worklet';
+          state.contentHeight = height;
+          return state;
+        });
+      }
+
+      if (onLayout) {
+        onLayout(event);
+      }
+
+      if (__DEV__) {
+        print({
+          component: 'BottomSheetView',
+          method: 'handleLayout',
+          category: 'layout',
+          params: {
+            height: event.nativeEvent.layout.height,
+          },
+        });
+      }
+    },
+    [onLayout, animatedLayoutState, enableDynamicSizing]
+  );
+  //#endregion
+
+  //#region effects
+  useFocusHook(handleSettingScrollable);
+  //#endregion
+
+  //render
+  return (
+    <View {...rest} onLayout={handleLayout} style={style}>
+      {children}
+    </View>
+  );
+}
+
+const BottomSheetView = memo(BottomSheetViewComponent);
+BottomSheetView.displayName = 'BottomSheetView';
+
+export default BottomSheetView;

package/src/components/bottomSheetView/index.ts

@@ -0,0 +1 @@
+export { default } from './BottomSheetView';

package/src/components/bottomSheetView/styles.ts

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

package/src/components/bottomSheetView/types.d.ts

@@ -0,0 +1,24 @@
+import type { DependencyList, EffectCallback, ReactNode } from 'react';
+import type { ViewProps as RNViewProps } from 'react-native';
+
+export interface BottomSheetViewProps extends RNViewProps {
+  /**
+   * Adjust the scrollable bottom margin to avoid the animated footer.
+   *
+   * @type boolean
+   * @default false
+   */
+  enableFooterMarginAdjustment?: boolean;
+
+  /**
+   * This needed when bottom sheet used with multiple scrollables to allow bottom sheet
+   * detect the current scrollable ref, especially when used with `React Navigation`.
+   * You will need to provide `useFocusEffect` from `@react-navigation/native`.
+   *
+   * @type (effect: EffectCallback, deps?: DependencyList) => void
+   * @default useEffect
+   */
+  focusHook?: (effect: EffectCallback, deps?: DependencyList) => void;
+
+  children: ReactNode[] | ReactNode;
+}

package/src/components/touchables/Touchables.ios.tsx

@@ -0,0 +1,5 @@
+export {
+  TouchableOpacity,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+} from 'react-native';

package/src/components/touchables/Touchables.tsx

@@ -0,0 +1,5 @@
+export {
+  TouchableOpacity,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+} from 'react-native-gesture-handler';

package/src/components/touchables/index.ts

@@ -0,0 +1,20 @@
+import type {
+  TouchableHighlight as RNTouchableHighlight,
+  TouchableOpacity as RNTouchableOpacity,
+  TouchableWithoutFeedback as RNTouchableWithoutFeedback,
+} from 'react-native';
+
+import {
+  TouchableHighlight,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  // @ts-ignore
+} from './Touchables';
+
+export default {
+  TouchableOpacity: TouchableOpacity as never as typeof RNTouchableOpacity,
+  TouchableHighlight:
+    TouchableHighlight as never as typeof RNTouchableHighlight,
+  TouchableWithoutFeedback:
+    TouchableWithoutFeedback as never as typeof RNTouchableWithoutFeedback,
+};

package/src/constants.ts

@@ -0,0 +1,159 @@
+import { Dimensions, Platform } from 'react-native';
+import { Easing } from 'react-native-reanimated';
+import type { SpringConfig, TimingConfig } from './types';
+
+const { height: WINDOW_HEIGHT, width: WINDOW_WIDTH } = Dimensions.get('window');
+const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('screen');
+
+enum GESTURE_SOURCE {
+  UNDETERMINED = 0,
+  SCROLLABLE = 1,
+  HANDLE = 2,
+  CONTENT = 3,
+}
+
+enum SHEET_STATE {
+  CLOSED = 0,
+  OPENED = 1,
+  EXTENDED = 2,
+  OVER_EXTENDED = 3,
+  FILL_PARENT = 4,
+}
+
+enum SCROLLABLE_STATUS {
+  LOCKED = 0,
+  UNLOCKED = 1,
+  UNDETERMINED = 2,
+}
+
+enum SCROLLABLE_TYPE {
+  UNDETERMINED = 0,
+  VIEW = 1,
+  FLATLIST = 2,
+  SCROLLVIEW = 3,
+  SECTIONLIST = 4,
+  VIRTUALIZEDLIST = 5,
+}
+
+enum ANIMATION_STATUS {
+  UNDETERMINED = 0,
+  RUNNING = 1,
+  STOPPED = 2,
+  INTERRUPTED = 3,
+}
+
+enum ANIMATION_SOURCE {
+  NONE = 0,
+  MOUNT = 1,
+  GESTURE = 2,
+  USER = 3,
+  CONTAINER_RESIZE = 4,
+  SNAP_POINT_CHANGE = 5,
+  KEYBOARD = 6,
+}
+
+enum ANIMATION_METHOD {
+  TIMING = 0,
+  SPRING = 1,
+}
+
+enum KEYBOARD_STATUS {
+  UNDETERMINED = 0,
+  SHOWN = 1,
+  HIDDEN = 2,
+}
+
+enum SNAP_POINT_TYPE {
+  PROVIDED = 0,
+  DYNAMIC = 1,
+}
+
+const ANIMATION_EASING = Easing.out(Easing.exp);
+const ANIMATION_DURATION = 250;
+
+const ANIMATION_CONFIGS = Platform.select<TimingConfig | SpringConfig>({
+  android: {
+    duration: ANIMATION_DURATION,
+    easing: ANIMATION_EASING,
+  },
+  default: {
+    damping: 500,
+    stiffness: 1000,
+    mass: 3,
+    overshootClamping: true,
+    restDisplacementThreshold: 10,
+    restSpeedThreshold: 10,
+  },
+});
+
+const SCROLLABLE_DECELERATION_RATE_MAPPER = {
+  [SCROLLABLE_STATUS.UNDETERMINED]: 0,
+  [SCROLLABLE_STATUS.LOCKED]: 0,
+  [SCROLLABLE_STATUS.UNLOCKED]: Platform.select({
+    ios: 0.998,
+    android: 0.985,
+    default: 1,
+  }),
+};
+
+const MODAL_STACK_BEHAVIOR = {
+  replace: 'replace',
+  push: 'push',
+  switch: 'switch',
+};
+
+const KEYBOARD_BEHAVIOR = {
+  interactive: 'interactive',
+  extend: 'extend',
+  fillParent: 'fillParent',
+} as const;
+
+const KEYBOARD_BLUR_BEHAVIOR = {
+  none: 'none',
+  restore: 'restore',
+} as const;
+
+const KEYBOARD_INPUT_MODE = {
+  adjustPan: 'adjustPan',
+  adjustResize: 'adjustResize',
+} as const;
+
+const KEYBOARD_DISMISS_THRESHOLD = 12.5;
+
+const INITIAL_LAYOUT_VALUE = -999;
+const INITIAL_CONTAINER_LAYOUT = {
+  height: INITIAL_LAYOUT_VALUE,
+  offset: {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0,
+  },
+};
+
+export {
+  GESTURE_SOURCE,
+  SHEET_STATE,
+  ANIMATION_STATUS,
+  ANIMATION_METHOD,
+  ANIMATION_SOURCE,
+  SCROLLABLE_TYPE,
+  SCROLLABLE_STATUS,
+  KEYBOARD_STATUS,
+  SNAP_POINT_TYPE,
+  WINDOW_HEIGHT,
+  WINDOW_WIDTH,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  SCROLLABLE_DECELERATION_RATE_MAPPER,
+  MODAL_STACK_BEHAVIOR,
+  KEYBOARD_BEHAVIOR,
+  KEYBOARD_BLUR_BEHAVIOR,
+  KEYBOARD_INPUT_MODE,
+  KEYBOARD_DISMISS_THRESHOLD,
+  ANIMATION_CONFIGS,
+  ANIMATION_EASING,
+  ANIMATION_DURATION,
+  INITIAL_LAYOUT_VALUE,
+  INITIAL_CONTAINER_LAYOUT,
+};

package/src/contexts/external.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import type { BottomSheetMethods, BottomSheetVariables } from '../types';
+
+export const BottomSheetContext = createContext<
+  (BottomSheetMethods & BottomSheetVariables) | null
+>(null);
+
+export const BottomSheetProvider = BottomSheetContext.Provider;

package/src/contexts/gesture.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { Gesture } from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gesture';
+import type { GestureHandlersHookType } from '../types';
+
+export interface BottomSheetGestureHandlersContextType {
+  contentPanGestureHandler: ReturnType<GestureHandlersHookType>;
+  handlePanGestureHandler: ReturnType<GestureHandlersHookType>;
+}
+
+export const BottomSheetGestureHandlersContext =
+  createContext<BottomSheetGestureHandlersContextType | null>(null);
+
+export const BottomSheetDraggableContext = createContext<Gesture | null>(null);

package/src/contexts/index.ts

@@ -0,0 +1,15 @@
+export { BottomSheetContext, BottomSheetProvider } from './external';
+export {
+  BottomSheetInternalContext,
+  BottomSheetInternalProvider,
+} from './internal';
+export { BottomSheetGestureHandlersContext } from './gesture';
+export {
+  BottomSheetModalContext,
+  BottomSheetModalProvider,
+} from './modal/external';
+export {
+  BottomSheetModalInternalContext,
+  BottomSheetModalInternalProvider,
+} from './modal/internal';
+export type { BottomSheetModalInternalContextType } from './modal/internal';

package/src/contexts/internal.ts

@@ -0,0 +1,65 @@
+import { createContext, type RefObject } from 'react';
+import type { State } from 'react-native-gesture-handler';
+import type { SharedValue } from 'react-native-reanimated';
+import type {
+  AnimateToPositionType,
+  BottomSheetGestureProps,
+  BottomSheetProps,
+} from '../components/bottomSheet/types';
+import type { SCROLLABLE_STATUS, SHEET_STATE } from '../constants';
+import type {
+  AnimationState,
+  DetentsState,
+  KeyboardState,
+  LayoutState,
+  Scrollable,
+  ScrollableRef,
+  ScrollableState,
+} from '../types';
+
+export interface BottomSheetInternalContextType
+  extends Partial<BottomSheetGestureProps>,
+    Required<
+      Pick<
+        BottomSheetProps,
+        | 'enableContentPanningGesture'
+        | 'enableOverDrag'
+        | 'enablePanDownToClose'
+        | 'enableDynamicSizing'
+        | 'enableBlurKeyboardOnGesture'
+        | 'overDragResistanceFactor'
+      >
+    > {
+  // animated states
+  animatedDetentsState: SharedValue<DetentsState>;
+  animatedAnimationState: SharedValue<AnimationState>;
+  animatedSheetState: SharedValue<SHEET_STATE>;
+  animatedKeyboardState: SharedValue<KeyboardState>;
+  animatedContentGestureState: SharedValue<State>;
+  animatedHandleGestureState: SharedValue<State>;
+  animatedLayoutState: SharedValue<LayoutState>;
+
+  // scrollable
+  animatedScrollableState: SharedValue<ScrollableState>;
+  animatedScrollableStatus: SharedValue<SCROLLABLE_STATUS>;
+
+  // animated values
+  animatedPosition: SharedValue<number>;
+  animatedIndex: SharedValue<number>;
+  animatedSheetHeight: SharedValue<number>;
+  isInTemporaryPosition: SharedValue<boolean>;
+
+  // methods
+  stopAnimation: () => void;
+  animateToPosition: AnimateToPositionType;
+  setScrollableRef: (ref: ScrollableRef) => void;
+  removeScrollableRef: (ref: RefObject<Scrollable>) => void;
+
+  // refs
+  textInputNodesRef: React.MutableRefObject<Set<number>>;
+}
+
+export const BottomSheetInternalContext =
+  createContext<BottomSheetInternalContextType | null>(null);
+
+export const BottomSheetInternalProvider = BottomSheetInternalContext.Provider;

package/src/contexts/modal/external.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export interface BottomSheetModalContextType {
+  dismiss: (key?: string) => boolean;
+  dismissAll: () => void;
+}
+
+export const BottomSheetModalContext =
+  createContext<BottomSheetModalContextType | null>(null);
+
+export const BottomSheetModalProvider = BottomSheetModalContext.Provider;

package/src/contexts/modal/internal.ts

@@ -0,0 +1,25 @@
+import { type RefObject, createContext } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type {
+  BottomSheetModalPrivateMethods,
+  BottomSheetModalStackBehavior,
+} from '../../components/bottomSheetModal';
+import type { ContainerLayoutState } from '../../types';
+
+export interface BottomSheetModalInternalContextType {
+  hostName: string;
+  containerLayoutState: SharedValue<ContainerLayoutState>;
+  mountSheet: (
+    key: string,
+    ref: RefObject<BottomSheetModalPrivateMethods>,
+    stackBehavior: BottomSheetModalStackBehavior
+  ) => void;
+  unmountSheet: (key: string) => void;
+  willUnmountSheet: (key: string) => void;
+}
+
+export const BottomSheetModalInternalContext =
+  createContext<BottomSheetModalInternalContextType | null>(null);
+
+export const BottomSheetModalInternalProvider =
+  BottomSheetModalInternalContext.Provider;

package/src/hooks/index.ts

@@ -0,0 +1,29 @@
+export { useBottomSheet } from './useBottomSheet';
+export { useBottomSheetInternal } from './useBottomSheetInternal';
+
+// modal
+export { useBottomSheetModal } from './useBottomSheetModal';
+export { useBottomSheetModalInternal } from './useBottomSheetModalInternal';
+
+// scrollable
+export { useScrollable } from './useScrollable';
+export { useScrollableSetter } from './useScrollableSetter';
+export { useScrollHandler } from './useScrollHandler';
+
+// gestures
+export { useGestureHandler } from './useGestureHandler';
+export { useGestureEventsHandlersDefault } from './useGestureEventsHandlersDefault';
+export { useBottomSheetGestureHandlers } from './useBottomSheetGestureHandlers';
+
+// utilities
+export { useAnimatedLayout } from './useAnimatedLayout';
+export { useAnimatedKeyboard } from './useAnimatedKeyboard';
+export { useStableCallback } from './useStableCallback';
+export { usePropsValidator } from './usePropsValidator';
+export { useAnimatedDetents } from './useAnimatedDetents';
+export { useReactiveSharedValue } from './useReactiveSharedValue';
+export {
+  useBoundingClientRect,
+  type BoundingClientRect,
+} from './useBoundingClientRect';
+export { useBottomSheetContentContainerStyle } from './useBottomSheetContentContainerStyle';