@shaquillehinds/react-native-bottom-sheet 0.0.1

package/lib/typescript/module/src/BottomSheet/controller/keyboardAnimation.controller.d.ts

@@ -0,0 +1,15 @@
+import { type SharedValue } from 'react-native-reanimated';
+import { type TextInput } from 'react-native';
+type UseKeyboardAnimationProps = {
+    avoidKeyboard?: boolean;
+    screenHeight: number;
+    inputsForKeyboardToAvoid?: React.RefObject<TextInput>[];
+    keyboardHeight: SharedValue<number>;
+    translationY: SharedValue<number>;
+    prevTranslationY: SharedValue<number>;
+    modalContentTranslateY: SharedValue<number>;
+    setDisableLayoutAnimation: (bool: boolean) => void;
+};
+export declare function keyboardAnimationController(props: UseKeyboardAnimationProps): void;
+export {};
+//# sourceMappingURL=keyboardAnimation.controller.d.ts.map

package/lib/typescript/module/src/BottomSheet/controller/keyboardAnimation.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardAnimation.controller.d.ts","sourceRoot":"","sources":["../../../../../../src/BottomSheet/controller/keyboardAnimation.controller.ts"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,WAAW,EAAc,MAAM,yBAAyB,CAAC;AAKhF,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQlE,KAAK,yBAAyB,GAAG;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,wBAAwB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC;IACxD,cAAc,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACpC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,sBAAsB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5C,yBAAyB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,yBAAyB,QA0H3E"}

package/lib/typescript/module/src/BottomSheet/controller/scrollContent.controller.d.ts

@@ -0,0 +1,20 @@
+import { type SharedValue } from 'react-native-reanimated';
+import type { GestureStateChangeEvent, GestureUpdateEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';
+import type { ScrollComponentRef } from '../config/bottomSheet.types';
+type ScrollContentControllerType = {
+    scrollY: SharedValue<number>;
+    maxScrollOffset: SharedValue<number>;
+    inverted: SharedValue<boolean>;
+    scrollActive: SharedValue<boolean>;
+    onDragStartGesture: (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
+    onDragEndGesture: (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
+    onDragGesture: (e: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
+    scrollableComponentRef?: ScrollComponentRef;
+};
+export declare function scrollContentController({ scrollActive, scrollY, onDragStartGesture, onDragEndGesture, onDragGesture, maxScrollOffset, inverted, scrollableComponentRef, }: ScrollContentControllerType): {
+    onBeginScroll: (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
+    onUpdateScroll: (e: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
+    onEndScroll: (e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
+};
+export {};
+//# sourceMappingURL=scrollContent.controller.d.ts.map

package/lib/typescript/module/src/BottomSheet/controller/scrollContent.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollContent.controller.d.ts","sourceRoot":"","sources":["../../../../../../src/BottomSheet/controller/scrollContent.controller.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EACV,uBAAuB,EACvB,kBAAkB,EAClB,6BAA6B,EAC9B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAGtE,KAAK,2BAA2B,GAAG;IACjC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC/B,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACnC,kBAAkB,EAAE,CAClB,CAAC,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,KACtD,IAAI,CAAC;IACV,gBAAgB,EAAE,CAChB,CAAC,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,KACtD,IAAI,CAAC;IACV,aAAa,EAAE,CAAC,CAAC,EAAE,kBAAkB,CAAC,6BAA6B,CAAC,KAAK,IAAI,CAAC;IAC9E,sBAAsB,CAAC,EAAE,kBAAkB,CAAC;CAC7C,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,QAAQ,EACR,sBAAsB,GACvB,EAAE,2BAA2B;;;;EAgF7B"}

package/lib/typescript/module/src/BottomSheet/index.d.ts

@@ -0,0 +1,23 @@
+import { type BottomSheetProps, type BottomModalContextProps } from './config/bottomSheet.types';
+import { BottomSheetFlatlist } from './components/BottomSheetFlatlist';
+import { BottomSheetScrollView } from './components/BottomSheetScrollView';
+export declare const BottomModalContext: import("react").Context<BottomModalContextProps | null>;
+declare const BottomSheetModal: import("react").ForwardRefExoticComponent<{
+    BackdropComponent?: React.ReactNode;
+    onBackDropPress?: () => void;
+    disableCloseOnBackdropPress?: boolean;
+} & BottomSheetProps & import("@shaquillehinds/react-native-essentials").ModalWrapperProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<import("./config/bottomSheet.types").BottomModalRef>>;
+declare const BottomSheet: import("react").ForwardRefExoticComponent<{
+    BackdropComponent?: React.ReactNode;
+    onBackDropPress?: () => void;
+    disableCloseOnBackdropPress?: boolean;
+} & BottomSheetProps & import("@shaquillehinds/react-native-essentials").ModalWrapperProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<import("./config/bottomSheet.types").BottomModalRef>>;
+declare const useBottomSheetRef: () => {
+    modalRef: import("./config/bottomSheet.types").BottomModalRef | undefined;
+};
+export { BottomSheet, BottomSheetModal, BottomSheetFlatlist, BottomSheetScrollView, useBottomSheetRef, };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/BottomSheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/BottomSheet/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,KAAK,gBAAgB,EAIrB,KAAK,uBAAuB,EAC7B,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAU3E,eAAO,MAAM,kBAAkB,yDAE9B,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;uFAyCrB,CAAC;AAaF,QAAA,MAAM,WAAW;;;;;;uFAyChB,CAAC;AAEF,QAAA,MAAM,iBAAiB;;CAGtB,CAAC;AAEF,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,GAClB,CAAC"}

package/lib/typescript/module/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BottomSheet';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/package.json

@@ -0,0 +1,203 @@
+{
+  "name": "@shaquillehinds/react-native-bottom-sheet",
+  "version": "0.0.1",
+  "description": "A simple bottom sheet for react native that just works.",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "react-native": "./src/index.tsx",
+  "types": "lib/typescript/commonjs/src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "react-native": "./src/index.tsx",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
+  "files": [
+    "lib",
+    "src",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-bottom-sheet-example",
+    "dev:mkdir": "mkdir -p ../../expo-dev-playground-2/node_modules/@shaquillehinds/react-native-bottom-sheet/src",
+    "dev:copy": "cp -r src/* ../../expo-dev-playground-2/node_modules/@shaquillehinds/react-native-bottom-sheet/src",
+    "dev:sync": "npm run dev:copy && chokidar \"src/**/*\" -c \"rsync -a src/ ../../expo-dev-playground-2/node_modules/@shaquillehinds/react-native-bottom-sheet/src\"",
+    "test": "jest",
+    "tarball": "npm pack @shaquillehinds/react-native-bottom-sheet",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "modal",
+    "sheet",
+    "bottomsheet",
+    "bottommodal",
+    "bottom-sheet",
+    "bottom-modal"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shaquillehinds/react-native-bottom-sheet.git"
+  },
+  "author": "Shaquille Hinds <shaqdulove@gmail.com> (https://github.com/shaquillehinds)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/shaquillehinds/react-native-bottom-sheet/issues"
+  },
+  "homepage": "https://github.com/shaquillehinds/react-native-bottom-sheet#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "@shaquillehinds/react-native-essentials": "^1.8.0"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "chokidar-cli": "^3.0.0",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.3.1",
+    "react-native": "0.76.7",
+    "react-native-builder-bob": "^0.38.0",
+    "react-native-gesture-handler": "^2.24.0",
+    "react-native-reanimated": "^3.17.1",
+    "react-native-svg": "^15.11.2",
+    "release-it": "^17.10.0",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true,
+      "access": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "react-hooks/rules-of-hooks": "off",
+      "react-hooks/exhaustive-deps": "off",
+      "prettier/prettier": "off"
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json",
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.48.5"
+  }
+}

package/src/BottomSheet/animations/drag.animation.ts

@@ -0,0 +1,86 @@
+//$lf-ignore
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { useCallback } from 'react';
+
+// function clamp(val: number, min: number, max: number) {
+//   'worklet';
+//   return Math.min(Math.max(val, min), max);
+// }
+
+//prettier-ignore
+// function stretch(val: number,min: number,max: number,maxStretch: number,stretchOn: 'min' | 'max') {
+//   'worklet';
+//   const isMax = stretchOn === 'max';
+//   const limit = isMax ? max : min;
+//   const direction = isMax ? 1 : -1;
+//   const inBounds = isMax ? val <= max : val >= min;
+//   if (inBounds) return val;
+//   const overshoot = Math.abs(val - limit);
+//   const resistance = maxStretch * (1 - 1 / (overshoot / maxStretch + 1));
+//   return limit + resistance * direction;
+// }
+
+// function maxStretch(val:number, max: number, stretch: number){
+//   'worklet';
+//   return val <= max ? val : max - stretch + stretch / ((val - max) / stretch + 1);
+// }
+function minStretch(val: number, min: number, stretch: number) {
+  'worklet';
+  //prettier-ignore
+  return val >= min ? val : min - stretch + stretch / ((min - val) / stretch + 1);
+}
+
+export type OnMoveAnimationProps = {
+  posX: number;
+  posY: number;
+  minPosY: number;
+  maxPosY: number;
+};
+
+export type OnDragAnimationProps = {
+  translationX?: SharedValue<number>;
+  translationY?: SharedValue<number>;
+  prevTranslationX?: SharedValue<number>;
+  prevTranslationY?: SharedValue<number>;
+};
+
+export function useDragAnimation(props?: OnDragAnimationProps) {
+  const translationX = props?.translationX || useSharedValue(0);
+  const translationY = props?.translationY || useSharedValue(0);
+  const prevTranslationX = props?.prevTranslationX || useSharedValue(0);
+  const prevTranslationY = props?.prevTranslationY || useSharedValue(0);
+
+  const dragAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translationX.value },
+      { translateY: translationY.value },
+    ],
+  }));
+
+  const onDragStart = useCallback(() => {
+    'worklet';
+    prevTranslationX.value = translationX.value;
+    prevTranslationY.value = translationY.value;
+  }, []);
+  const onDrag = useCallback((dragProps: OnMoveAnimationProps) => {
+    'worklet';
+    translationY.value = minStretch(
+      prevTranslationY.value + dragProps.posY,
+      dragProps.minPosY,
+      100
+    );
+  }, []);
+  return {
+    onDrag,
+    onDragStart,
+    dragAnimatedStyle,
+    translationX,
+    translationY,
+    prevTranslationX,
+    prevTranslationY,
+  };
+}

package/src/BottomSheet/components/BottomSheet.tsx

@@ -0,0 +1,157 @@
+import Animated, { FadeIn, runOnUI } from 'react-native-reanimated';
+import { View } from 'react-native';
+import {
+  forwardRef,
+  createContext,
+  useImperativeHandle,
+  type PropsWithChildren,
+} from 'react';
+import { bottomModalStyle as styles } from '../config/bottomSheet.styles';
+import { type BottomSheetControllerReturn } from '../controller/bottomSheet.controller';
+import {
+  type BottomSheetContextProps,
+  type BottomSheetProps,
+  type BottomSheetRefObject,
+} from '../config/bottomSheet.types';
+import {
+  ModalForegroundWrapper,
+  ComponentMounter,
+  DragGesture,
+} from '@shaquillehinds/react-native-essentials';
+
+export const BottomSheetContext = createContext<BottomSheetContextProps | null>(
+  null
+);
+
+export const BottomSheet = forwardRef(
+  (
+    props: PropsWithChildren<BottomSheetProps> & {
+      controller: BottomSheetControllerReturn;
+    },
+    ref: BottomSheetRefObject
+  ) => {
+    const controller = props.controller;
+    useImperativeHandle(
+      ref,
+      () => ({
+        animateCloseModal: (prop) => {
+          controller.disableLayoutAnimation.current = true;
+          runOnUI(controller.animateModalClose)(prop);
+        },
+        snapToIndex: (snapPointIndex) => {
+          runOnUI(controller.animateToSnapPointIndex)(snapPointIndex);
+        },
+        snapToPercentage: (percentage) => {
+          runOnUI(controller.animateToPercentage)(
+            percentage,
+            controller.screenHeight
+          );
+        },
+        getModalState: () => controller.modalState.current,
+      }),
+      [controller.screenHeight, controller.modalState.current]
+    );
+    return (
+      <ModalForegroundWrapper>
+        <DragGesture
+          minDistance={15}
+          disable={props.dragArea !== 'full'}
+          onDrag={controller.onDragGesture}
+          onDragStart={controller.onDragStartGesture}
+          onDragEnd={controller.onDragEndGesture}
+        >
+          <Animated.View
+            style={[
+              styles.bottomSheet,
+              props.style,
+              controller.modalDimensionsStyle,
+              controller.dragAnimatedStyle,
+              {
+                backgroundColor: props.backgroundColor,
+                bottom:
+                  controller.modalDimensionsStyle.bottom +
+                  (props.bottomOffset || 0),
+              },
+            ]}
+          >
+            {props.hideBumper ? (
+              <></>
+            ) : props.dragArea === 'bumper' || !props.dragArea ? (
+              <DragGesture
+                onDrag={controller.onDragGesture}
+                onDragStart={controller.onDragStartGesture}
+                onDragEnd={controller.onDragEndGesture}
+              >
+                {props.BumperComponent ? (
+                  <props.BumperComponent />
+                ) : (
+                  <Bumper {...props} />
+                )}
+              </DragGesture>
+            ) : props.BumperComponent ? (
+              <props.BumperComponent />
+            ) : (
+              <Bumper {...props} />
+            )}
+            <Animated.View
+              onLayout={controller.onModalContentLayout}
+              style={[
+                styles.contentContainer,
+                controller.modalContentAnimatedStyle,
+                props.contentContainerStyle,
+              ]}
+            >
+              <BottomSheetContext.Provider
+                value={{
+                  scrollY: controller.scrollY,
+                  onBeginScroll: controller.onBeginScroll,
+                  onUpdateScroll: controller.onUpdateScroll,
+                  onEndScroll: controller.onEndScroll,
+                  scrollableComponentRef: controller.scrollableComponentRef,
+                  maxScrollOffset: controller.maxScrollOffset,
+                  inverted: controller.inverted,
+                }}
+              >
+                {!props.showContentDelay ? (
+                  props.children
+                ) : !props.showContentDelay.type ||
+                  props.showContentDelay.type === 'opacity' ? (
+                  <Animated.View style={[controller.contentOpacityStyle]}>
+                    {props.children}
+                  </Animated.View>
+                ) : (
+                  <ComponentMounter
+                    component={
+                      <Animated.View entering={FadeIn.delay(50).duration(200)}>
+                        {props.children}
+                      </Animated.View>
+                    }
+                    mountDelayInMilliSeconds={
+                      props.showContentDelay.timeInMilliSecs
+                    }
+                    showComponent={true}
+                    setShowComponent={() => true}
+                  />
+                )}
+              </BottomSheetContext.Provider>
+            </Animated.View>
+          </Animated.View>
+        </DragGesture>
+      </ModalForegroundWrapper>
+    );
+  }
+);
+
+function Bumper(props: PropsWithChildren<BottomSheetProps>) {
+  return (
+    <View
+      style={[
+        styles.bumperContainer,
+        { backgroundColor: props.backgroundColor },
+        props.bumperContainerStyle,
+      ]}
+    >
+      <View style={[styles.bumper, props.bumperStyle]} />
+    </View>
+  );
+}

package/src/BottomSheet/components/BottomSheetFlatlist.tsx

@@ -0,0 +1,46 @@
+//$lf-ignore
+import Animated from 'react-native-reanimated';
+import type {
+  BottomSheetFlatlistProps,
+  DefaultOnScroll,
+} from '../config/bottomSheet.types';
+import type { FlatList } from 'react-native';
+import { bottomFlatlistController } from '../controller/bottomFlatlist.controller';
+import { DragGesture } from '@shaquillehinds/react-native-essentials';
+
+export function BottomSheetFlatlist<T>(props: BottomSheetFlatlistProps<T>) {
+  const controller = bottomFlatlistController(props);
+
+  if (!controller.context)
+    return (
+      <Animated.FlatList
+        {...controller.flatlistProps}
+        ref={controller.refFlatlist}
+        onScroll={controller.onScroll as DefaultOnScroll}
+      />
+    );
+
+  return (
+    <DragGesture
+      minDistance={15}
+      enableContentScroll
+      onDragStart={controller.context.onBeginScroll}
+      onDrag={controller.context.onUpdateScroll}
+      onDragEnd={controller.context.onEndScroll}
+    >
+      <Animated.FlatList
+        {...controller.flatlistProps}
+        onScrollBeginDrag={controller.onScrollBegin}
+        onLayout={controller.onLayout}
+        onContentSizeChange={controller.onContentSizeChange}
+        ref={
+          controller.refFlatlist ||
+          (controller.context
+            .scrollableComponentRef as React.RefObject<FlatList>)
+        }
+        bounces={false}
+        onScroll={controller.animatedScrollHandler}
+      />
+    </DragGesture>
+  );
+}

package/src/BottomSheet/components/BottomSheetModal.tsx

@@ -0,0 +1,47 @@
+import {
+  ModalBackgroundAnimated,
+  ModalWrapper,
+} from '@shaquillehinds/react-native-essentials';
+import { forwardRef, type PropsWithChildren } from 'react';
+import { bottomModalStyle as styles } from '../config/bottomSheet.styles';
+import { BottomSheet } from '../components/BottomSheet';
+import {
+  type BottomSheetModalProps,
+  type BottomSheetRefObject,
+} from '../config/bottomSheet.types';
+import { bottomSheetController } from '../controller';
+
+export const BottomSheetModal = forwardRef(
+  (
+    props: PropsWithChildren<BottomSheetModalProps>,
+    ref: BottomSheetRefObject
+  ) => {
+    const controller = bottomSheetController(props);
+    return (
+      <ModalWrapper
+        useNativeModal={props.useNativeModal}
+        enableBackgroundContentPress={props.enableBackgroundContentPress}
+        onRequestClose={controller.onRequestClose}
+        disableAndroidBackButton={props.disableAndroidBackButton}
+      >
+        {!props.enableBackgroundContentPress ? (
+          <ModalBackgroundAnimated
+            onPress={
+              props.disableCloseOnBackdropPress
+                ? undefined
+                : controller.onModalBackdropPress
+            }
+            style={styles.background}
+            animatedStyle={controller.backdropOpacityStyle}
+            avoidStatusBar={props.useNativeModal}
+          >
+            {props.BackdropComponent}
+          </ModalBackgroundAnimated>
+        ) : undefined}
+        <BottomSheet {...props} controller={controller} ref={ref}>
+          {props.children}
+        </BottomSheet>
+      </ModalWrapper>
+    );
+  }
+);

package/src/BottomSheet/components/BottomSheetScrollView.tsx

@@ -0,0 +1,46 @@
+//$lf-ignore
+import Animated from 'react-native-reanimated';
+import type {
+  BottomSheetScrollViewProps,
+  DefaultOnScroll,
+} from '../config/bottomSheet.types';
+import { AnimatedScrollView } from 'react-native-reanimated/lib/typescript/component/ScrollView';
+import { bottomScrollViewController } from '../controller/bottomScrollView.controller';
+import { DragGesture } from '@shaquillehinds/react-native-essentials';
+
+export function BottomSheetScrollView(props: BottomSheetScrollViewProps) {
+  const controller = bottomScrollViewController(props);
+
+  if (!controller.context)
+    return (
+      <Animated.ScrollView
+        {...controller.scrollViewProps}
+        ref={controller.refScrollView}
+        onScroll={controller.onScroll as DefaultOnScroll}
+      />
+    );
+
+  return (
+    <DragGesture
+      minDistance={15}
+      enableContentScroll
+      onDragStart={controller.context.onBeginScroll}
+      onDrag={controller.context.onUpdateScroll}
+      onDragEnd={controller.context.onEndScroll}
+    >
+      <Animated.ScrollView
+        {...controller.scrollViewProps}
+        ref={
+          controller.refScrollView ||
+          (controller.context
+            .scrollableComponentRef as React.RefObject<AnimatedScrollView>)
+        }
+        onScrollBeginDrag={controller.assignRef}
+        bounces={false}
+        onScroll={controller.animatedScrollHandler}
+      >
+        {controller.scrollViewProps.children}
+      </Animated.ScrollView>
+    </DragGesture>
+  );
+}