react-native-bottom-sheet-modal-lite 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+## 1.0.0
+
+- Initial public release.
+- Spring animations powered by React Native Reanimated.
+- Pan gesture powered by React Native Gesture Handler.
+- Backdrop press and pan-down dismissal.
+- Keyboard avoidance props for replacing project-specific keyboard hooks.
+- TypeScript declarations included.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nattawat Virunsuntornkul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,168 @@
+# react-native-bottom-sheet-modal-lite
+
+A spring-animated bottom sheet modal for React Native, powered by `react-native-reanimated` and `react-native-gesture-handler`.
+
+The default layout matches the original component:
+
+- 300px visible height
+- 30px draggable top area
+- 30px top corner radius
+- Transparent sheet background
+- Dark 50% backdrop
+- 200px hidden section below the screen
+- Spring open, close, and snap-back animation
+- Tap backdrop or drag down to dismiss
+- Keyboard avoidance support
+
+## Installation
+
+```sh
+npm install react-native-bottom-sheet-modal-lite react-native-reanimated react-native-gesture-handler
+```
+
+For iOS, install CocoaPods after adding native dependencies:
+
+```sh
+cd ios && pod install && cd ..
+```
+
+Follow the Reanimated installation instructions for the version used by your app. Reanimated 4 also requires a compatible `react-native-worklets` version.
+
+Wrap the app root with `GestureHandlerRootView`:
+
+```tsx
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+export default function App() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <RootNavigator />
+    </GestureHandlerRootView>
+  );
+}
+```
+
+The component also places a `GestureHandlerRootView` inside the native modal so gestures continue to work in modal content.
+
+## Basic usage
+
+```tsx
+import React, { useState } from 'react';
+import { Button, Text, View } from 'react-native';
+import { BottomSheetModal } from 'react-native-bottom-sheet-modal-lite';
+
+export default function ExampleScreen() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <Button title="Open" onPress={() => setVisible(true)} />
+
+      <BottomSheetModal
+        visible={visible}
+        height={300}
+        backgroundColor="transparent"
+        onDismiss={() => setVisible(false)}
+      >
+        <View
+          style={{
+            flex: 1,
+            padding: 20,
+            backgroundColor: '#FFFFFF',
+          }}
+        >
+          <Text>Bottom sheet content</Text>
+        </View>
+      </BottomSheetModal>
+    </View>
+  );
+}
+```
+
+A default export is also available:
+
+```tsx
+import BottomSheetModal from 'react-native-bottom-sheet-modal-lite';
+```
+
+## Replacing a project-specific keyboard hook
+
+The original component used a local hook such as:
+
+```tsx
+const { behavior, offset } = useKeyboardAvoidConfig({ hasHeader: true });
+```
+
+An npm package cannot import a hook from the consumer's project. Pass its values through props instead:
+
+```tsx
+const { behavior, offset } = useKeyboardAvoidConfig({ hasHeader: true });
+
+<BottomSheetModal
+  visible={visible}
+  onDismiss={() => setVisible(false)}
+  keyboardBehavior={behavior}
+  keyboardVerticalOffset={offset}
+>
+  {children}
+</BottomSheetModal>
+```
+
+Without these props, the package defaults to `padding` on iOS, `height` on Android, and an offset of `0`.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `visible` | `boolean` | required | Controls modal visibility. |
+| `onDismiss` | `() => void` | required | Called after a user dismisses the sheet. |
+| `children` | `ReactNode` | required | Sheet content. |
+| `height` | `number` | `300` | Visible sheet height. |
+| `backgroundColor` | `string` | `transparent` | Sheet background color. |
+| `backdropColor` | `string` | `rgba(0, 0, 0, 0.5)` | Backdrop color. |
+| `closeOnBackdropPress` | `boolean` | `true` | Allows backdrop press to dismiss. |
+| `enablePanDownToClose` | `boolean` | `true` | Allows dragging the handle down to dismiss. |
+| `dragHandleHeight` | `number` | `30` | Height of the draggable top area. |
+| `extraHeight` | `number` | `200` | Hidden height rendered below the screen. |
+| `borderRadius` | `number` | `30` | Top corner radius. |
+| `dismissThreshold` | `number` | `0.5` | Drag-distance ratio required to dismiss. |
+| `dismissVelocity` | `number` | `900` | Downward velocity required to dismiss. |
+| `keyboardBehavior` | `height \| position \| padding` | platform default | `KeyboardAvoidingView` behavior. |
+| `keyboardVerticalOffset` | `number` | `0` | Keyboard offset. |
+| `keyboardAvoidingEnabled` | `boolean` | `true` | Enables keyboard avoidance. |
+| `containerStyle` | `StyleProp<ViewStyle>` | — | Sheet container style. |
+| `backdropStyle` | `StyleProp<ViewStyle>` | — | Backdrop style. |
+| `dragHandleStyle` | `StyleProp<ViewStyle>` | — | Draggable area style. |
+| `contentContainerStyle` | `StyleProp<ViewStyle>` | — | Children wrapper style. |
+
+## Local verification
+
+```sh
+npm install
+npm run typecheck
+npm run build
+npm run pack:check
+```
+
+Create a tarball:
+
+```sh
+npm pack
+```
+
+Install it in a React Native app:
+
+```sh
+npm install /absolute/path/react-native-bottom-sheet-modal-lite-1.0.0.tgz
+```
+
+## Publishing
+
+```sh
+npm login
+npm publish
+```
+
+## License
+
+MIT

package/lib/module/BottomSheetModal.js

@@ -0,0 +1,197 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Modal, Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_HEIGHT = 300;
+const DEFAULT_DRAG_HANDLE_HEIGHT = 30;
+const DEFAULT_EXTRA_HEIGHT = 200;
+const DEFAULT_BORDER_RADIUS = 30;
+const DEFAULT_DISMISS_VELOCITY = 900;
+const SPRING_CONFIG = {
+  damping: 28,
+  stiffness: 300,
+  mass: 0.4,
+  overshootClamping: true
+};
+/**
+ * A spring-animated React Native bottom sheet modal powered by Reanimated and
+ * React Native Gesture Handler.
+ *
+ * The default layout intentionally matches the original component: a 30px
+ * draggable top area, 30px top radius, transparent sheet background, and an
+ * extra 200px section rendered below the screen.
+ */
+export function BottomSheetModal({
+  visible,
+  onDismiss,
+  children,
+  backgroundColor = 'transparent',
+  height = DEFAULT_HEIGHT,
+  backdropColor = 'rgba(0, 0, 0, 0.5)',
+  closeOnBackdropPress = true,
+  enablePanDownToClose = true,
+  dragHandleHeight = DEFAULT_DRAG_HANDLE_HEIGHT,
+  extraHeight = DEFAULT_EXTRA_HEIGHT,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  dismissThreshold = 0.5,
+  dismissVelocity = DEFAULT_DISMISS_VELOCITY,
+  keyboardBehavior = Platform.OS === 'ios' ? 'padding' : 'height',
+  keyboardVerticalOffset = 0,
+  keyboardAvoidingEnabled = true,
+  containerStyle,
+  backdropStyle,
+  dragHandleStyle,
+  contentContainerStyle,
+  testID,
+  backdropAccessibilityLabel = 'Close bottom sheet'
+}) {
+  const {
+    height: screenHeight
+  } = useWindowDimensions();
+  const translateY = useSharedValue(screenHeight);
+  const [isDragging, setIsDragging] = useState(false);
+  const isClosingRef = useRef(false);
+  const resolvedHeight = useMemo(() => Math.max(Number.isFinite(height) ? height : DEFAULT_HEIGHT, 0), [height]);
+  const resolvedHandleHeight = useMemo(() => Math.max(Number.isFinite(dragHandleHeight) ? dragHandleHeight : 0, 0), [dragHandleHeight]);
+  const resolvedExtraHeight = useMemo(() => Math.max(Number.isFinite(extraHeight) ? extraHeight : 0, 0), [extraHeight]);
+  const resolvedThreshold = useMemo(() => Math.min(Math.max(dismissThreshold, 0), 1), [dismissThreshold]);
+  const finishDismiss = useCallback(() => {
+    isClosingRef.current = false;
+    setIsDragging(false);
+    onDismiss();
+  }, [onDismiss]);
+  const restoreOpenPosition = useCallback(() => {
+    translateY.value = withSpring(0, SPRING_CONFIG);
+    setIsDragging(false);
+  }, [translateY]);
+  const animateDismiss = useCallback(() => {
+    if (isClosingRef.current) {
+      return;
+    }
+    isClosingRef.current = true;
+    translateY.value = withSpring(screenHeight, SPRING_CONFIG, finished => {
+      if (finished) {
+        runOnJS(finishDismiss)();
+      }
+    });
+  }, [finishDismiss, screenHeight, translateY]);
+  useEffect(() => {
+    if (visible) {
+      isClosingRef.current = false;
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      return;
+    }
+    translateY.value = withSpring(screenHeight, SPRING_CONFIG);
+    setIsDragging(false);
+  }, [screenHeight, translateY, visible]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: resolvedHeight + resolvedExtraHeight,
+    transform: [{
+      translateY: translateY.value + resolvedExtraHeight
+    }]
+  }));
+  const panGesture = useMemo(() => Gesture.Pan().enabled(enablePanDownToClose).onBegin(() => {
+    runOnJS(setIsDragging)(true);
+  }).onUpdate(event => {
+    translateY.value = Math.max(0, Math.min(resolvedHeight, event.translationY));
+  }).onEnd(event => {
+    const shouldDismiss = event.translationY > resolvedHeight * resolvedThreshold || event.velocityY > dismissVelocity;
+    if (shouldDismiss) {
+      translateY.value = withSpring(screenHeight, SPRING_CONFIG, finished => {
+        if (finished) {
+          runOnJS(finishDismiss)();
+        }
+      });
+    } else {
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      runOnJS(setIsDragging)(false);
+    }
+  }).onFinalize((_event, success) => {
+    if (!success) {
+      runOnJS(restoreOpenPosition)();
+    }
+  }), [dismissVelocity, enablePanDownToClose, finishDismiss, resolvedHeight, resolvedThreshold, restoreOpenPosition, screenHeight, translateY]);
+  const handleBackdropPress = useCallback(() => {
+    if (!closeOnBackdropPress || isDragging) {
+      return;
+    }
+    animateDismiss();
+  }, [animateDismiss, closeOnBackdropPress, isDragging]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    transparent: true,
+    animationType: "fade",
+    statusBarTranslucent: true,
+    onRequestClose: animateDismiss,
+    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      style: styles.flex,
+      enabled: keyboardAvoidingEnabled,
+      behavior: keyboardBehavior,
+      keyboardVerticalOffset: keyboardVerticalOffset,
+      children: /*#__PURE__*/_jsxs(GestureHandlerRootView, {
+        style: styles.modalBackdrop,
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: backdropAccessibilityLabel,
+          style: [styles.backdrop, {
+            backgroundColor: backdropColor
+          }, backdropStyle],
+          onPress: handleBackdropPress,
+          pointerEvents: isDragging ? 'none' : 'auto'
+        }), /*#__PURE__*/_jsxs(Animated.View, {
+          testID: testID,
+          style: [styles.content, {
+            backgroundColor,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius
+          }, animatedStyle, containerStyle],
+          children: [/*#__PURE__*/_jsx(GestureDetector, {
+            gesture: panGesture,
+            children: /*#__PURE__*/_jsx(View, {
+              style: [styles.dragHandle, {
+                height: resolvedHandleHeight,
+                borderTopLeftRadius: borderRadius,
+                borderTopRightRadius: borderRadius
+              }, dragHandleStyle]
+            })
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.childrenContainer, {
+              height: Math.max(resolvedHeight - resolvedHandleHeight, 0),
+              transform: [{
+                translateY: -resolvedHandleHeight
+              }]
+            }, contentContainerStyle],
+            children: children
+          })]
+        })]
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  modalBackdrop: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill
+  },
+  content: {
+    elevation: 5,
+    overflow: 'hidden'
+  },
+  dragHandle: {
+    zIndex: 100
+  },
+  childrenContainer: {
+    width: '100%'
+  }
+});
+export default BottomSheetModal;
+//# sourceMappingURL=BottomSheetModal.js.map

package/lib/module/BottomSheetModal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","KeyboardAvoidingView","Modal","Platform","Pressable","StyleSheet","useWindowDimensions","View","Animated","runOnJS","useAnimatedStyle","useSharedValue","withSpring","Gesture","GestureDetector","GestureHandlerRootView","jsx","_jsx","jsxs","_jsxs","DEFAULT_HEIGHT","DEFAULT_DRAG_HANDLE_HEIGHT","DEFAULT_EXTRA_HEIGHT","DEFAULT_BORDER_RADIUS","DEFAULT_DISMISS_VELOCITY","SPRING_CONFIG","damping","stiffness","mass","overshootClamping","BottomSheetModal","visible","onDismiss","children","backgroundColor","height","backdropColor","closeOnBackdropPress","enablePanDownToClose","dragHandleHeight","extraHeight","borderRadius","dismissThreshold","dismissVelocity","keyboardBehavior","OS","keyboardVerticalOffset","keyboardAvoidingEnabled","containerStyle","backdropStyle","dragHandleStyle","contentContainerStyle","testID","backdropAccessibilityLabel","screenHeight","translateY","isDragging","setIsDragging","isClosingRef","resolvedHeight","Math","max","Number","isFinite","resolvedHandleHeight","resolvedExtraHeight","resolvedThreshold","min","finishDismiss","current","restoreOpenPosition","value","animateDismiss","finished","animatedStyle","transform","panGesture","Pan","enabled","onBegin","onUpdate","event","translationY","onEnd","shouldDismiss","velocityY","onFinalize","_event","success","handleBackdropPress","transparent","animationType","statusBarTranslucent","onRequestClose","style","styles","flex","behavior","modalBackdrop","accessibilityRole","accessibilityLabel","backdrop","onPress","pointerEvents","content","borderTopLeftRadius","borderTopRightRadius","gesture","dragHandle","childrenContainer","create","justifyContent","absoluteFill","elevation","overflow","zIndex","width"],"sourceRoot":"../../src","sources":["BottomSheetModal.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { BottomSheetModal } from "./BottomSheetModal.js";
+export { default } from "./BottomSheetModal.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BottomSheetModal","default"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,uBAAoB;AACrD,SAASC,OAAO,QAAQ,uBAAoB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/BottomSheetModal.d.ts

@@ -0,0 +1,59 @@
+import React, { type ReactNode } from 'react';
+import { type KeyboardAvoidingViewProps, type StyleProp, type ViewStyle } from 'react-native';
+export type BottomSheetModalProps = {
+    /** Controls whether the modal is visible. */
+    visible: boolean;
+    /** Called after a user dismisses the sheet. Set visible to false here. */
+    onDismiss: () => void;
+    /** Content rendered inside the sheet. */
+    children: ReactNode;
+    /** Visible sheet height in logical pixels. */
+    height?: number;
+    /** Sheet background color. Defaults to transparent to match the original component. */
+    backgroundColor?: string;
+    /** Backdrop color. */
+    backdropColor?: string;
+    /** Allows tapping the backdrop to dismiss the sheet. */
+    closeOnBackdropPress?: boolean;
+    /** Allows dragging the top area downward to dismiss the sheet. */
+    enablePanDownToClose?: boolean;
+    /** Height of the draggable top area. */
+    dragHandleHeight?: number;
+    /** Extra hidden height rendered below the screen. */
+    extraHeight?: number;
+    /** Top-left and top-right corner radius. */
+    borderRadius?: number;
+    /** Drag distance ratio required to dismiss. */
+    dismissThreshold?: number;
+    /** Downward gesture velocity required to dismiss. */
+    dismissVelocity?: number;
+    /** KeyboardAvoidingView behavior. */
+    keyboardBehavior?: KeyboardAvoidingViewProps['behavior'];
+    /** KeyboardAvoidingView vertical offset. */
+    keyboardVerticalOffset?: number;
+    /** Enables KeyboardAvoidingView. */
+    keyboardAvoidingEnabled?: boolean;
+    /** Style applied to the bottom sheet container. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the backdrop. */
+    backdropStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the draggable top area. */
+    dragHandleStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the children container. */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Optional test id applied to the sheet. */
+    testID?: string;
+    /** Accessibility label for the backdrop close button. */
+    backdropAccessibilityLabel?: string;
+};
+/**
+ * A spring-animated React Native bottom sheet modal powered by Reanimated and
+ * React Native Gesture Handler.
+ *
+ * The default layout intentionally matches the original component: a 30px
+ * draggable top area, 30px top radius, transparent sheet background, and an
+ * extra 200px section rendered below the screen.
+ */
+export declare function BottomSheetModal({ visible, onDismiss, children, backgroundColor, height, backdropColor, closeOnBackdropPress, enablePanDownToClose, dragHandleHeight, extraHeight, borderRadius, dismissThreshold, dismissVelocity, keyboardBehavior, keyboardVerticalOffset, keyboardAvoidingEnabled, containerStyle, backdropStyle, dragHandleStyle, contentContainerStyle, testID, backdropAccessibilityLabel, }: BottomSheetModalProps): React.JSX.Element;
+export default BottomSheetModal;
+//# sourceMappingURL=BottomSheetModal.d.ts.map

package/lib/typescript/BottomSheetModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetModal.d.ts","sourceRoot":"","sources":["../../src/BottomSheetModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,yBAAyB,EAI9B,KAAK,SAAS,EAId,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AA0BtB,MAAM,MAAM,qBAAqB,GAAG;IAClC,6CAA6C;IAC7C,OAAO,EAAE,OAAO,CAAC;IAEjB,0EAA0E;IAC1E,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IAEpB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,uFAAuF;IACvF,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,sBAAsB;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,wDAAwD;IACxD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,qDAAqD;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IAEzD,4CAA4C;IAC5C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC,oCAAoC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,mDAAmD;IACnD,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEtC,qCAAqC;IACrC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAErC,+CAA+C;IAC/C,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEvC,+CAA+C;IAC/C,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,yDAAyD;IACzD,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,eAA+B,EAC/B,MAAuB,EACvB,aAAoC,EACpC,oBAA2B,EAC3B,oBAA2B,EAC3B,gBAA6C,EAC7C,WAAkC,EAClC,YAAoC,EACpC,gBAAsB,EACtB,eAA0C,EAC1C,gBAA+D,EAC/D,sBAA0B,EAC1B,uBAA8B,EAC9B,cAAc,EACd,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,MAAM,EACN,0BAAiD,GAClD,EAAE,qBAAqB,qBAuMvB;AAyBD,eAAe,gBAAgB,CAAC"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,4 @@
+export { BottomSheetModal } from './BottomSheetModal.js';
+export { default } from './BottomSheetModal.js';
+export type { BottomSheetModalProps } from './BottomSheetModal.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAoB,CAAC;AAC7C,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAoB,CAAC"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "react-native-bottom-sheet-modal-lite",
+  "version": "1.0.0",
+  "description": "A spring-animated bottom sheet modal for React Native using Reanimated and Gesture Handler.",
+  "keywords": [
+    "react-native",
+    "bottom-sheet",
+    "modal",
+    "gesture",
+    "reanimated",
+    "gesture-handler",
+    "typescript",
+    "ios",
+    "android"
+  ],
+  "author": "Nattawat Virunsuntornkul",
+  "license": "MIT",
+  "main": "./lib/module/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "react-native": "./src/index.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "node -e \"require('node:fs').rmSync('lib',{recursive:true,force:true})\"",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "build": "bob build",
+    "prepare": "npm run clean && npm run build",
+    "pack:check": "npm pack --dry-run"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.72.0",
+    "react-native-reanimated": ">=3.0.0 <5.0.0",
+    "react-native-gesture-handler": ">=2.9.0 <4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "react": "19.2.7",
+    "react-native": "0.86.0",
+    "react-native-builder-bob": "^0.42.1",
+    "typescript": "^6.0.3",
+    "react-native-reanimated": "^4.4.1",
+    "react-native-gesture-handler": "^3.0.1",
+    "react-native-worklets": "^0.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/BottomSheetModal.tsx

@@ -0,0 +1,369 @@
+import React, {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  KeyboardAvoidingView,
+  type KeyboardAvoidingViewProps,
+  Modal,
+  Platform,
+  Pressable,
+  type StyleProp,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+
+const DEFAULT_HEIGHT = 300;
+const DEFAULT_DRAG_HANDLE_HEIGHT = 30;
+const DEFAULT_EXTRA_HEIGHT = 200;
+const DEFAULT_BORDER_RADIUS = 30;
+const DEFAULT_DISMISS_VELOCITY = 900;
+
+const SPRING_CONFIG = {
+  damping: 28,
+  stiffness: 300,
+  mass: 0.4,
+  overshootClamping: true,
+} as const;
+
+export type BottomSheetModalProps = {
+  /** Controls whether the modal is visible. */
+  visible: boolean;
+
+  /** Called after a user dismisses the sheet. Set visible to false here. */
+  onDismiss: () => void;
+
+  /** Content rendered inside the sheet. */
+  children: ReactNode;
+
+  /** Visible sheet height in logical pixels. */
+  height?: number;
+
+  /** Sheet background color. Defaults to transparent to match the original component. */
+  backgroundColor?: string;
+
+  /** Backdrop color. */
+  backdropColor?: string;
+
+  /** Allows tapping the backdrop to dismiss the sheet. */
+  closeOnBackdropPress?: boolean;
+
+  /** Allows dragging the top area downward to dismiss the sheet. */
+  enablePanDownToClose?: boolean;
+
+  /** Height of the draggable top area. */
+  dragHandleHeight?: number;
+
+  /** Extra hidden height rendered below the screen. */
+  extraHeight?: number;
+
+  /** Top-left and top-right corner radius. */
+  borderRadius?: number;
+
+  /** Drag distance ratio required to dismiss. */
+  dismissThreshold?: number;
+
+  /** Downward gesture velocity required to dismiss. */
+  dismissVelocity?: number;
+
+  /** KeyboardAvoidingView behavior. */
+  keyboardBehavior?: KeyboardAvoidingViewProps['behavior'];
+
+  /** KeyboardAvoidingView vertical offset. */
+  keyboardVerticalOffset?: number;
+
+  /** Enables KeyboardAvoidingView. */
+  keyboardAvoidingEnabled?: boolean;
+
+  /** Style applied to the bottom sheet container. */
+  containerStyle?: StyleProp<ViewStyle>;
+
+  /** Style applied to the backdrop. */
+  backdropStyle?: StyleProp<ViewStyle>;
+
+  /** Style applied to the draggable top area. */
+  dragHandleStyle?: StyleProp<ViewStyle>;
+
+  /** Style applied to the children container. */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+
+  /** Optional test id applied to the sheet. */
+  testID?: string;
+
+  /** Accessibility label for the backdrop close button. */
+  backdropAccessibilityLabel?: string;
+};
+
+/**
+ * A spring-animated React Native bottom sheet modal powered by Reanimated and
+ * React Native Gesture Handler.
+ *
+ * The default layout intentionally matches the original component: a 30px
+ * draggable top area, 30px top radius, transparent sheet background, and an
+ * extra 200px section rendered below the screen.
+ */
+export function BottomSheetModal({
+  visible,
+  onDismiss,
+  children,
+  backgroundColor = 'transparent',
+  height = DEFAULT_HEIGHT,
+  backdropColor = 'rgba(0, 0, 0, 0.5)',
+  closeOnBackdropPress = true,
+  enablePanDownToClose = true,
+  dragHandleHeight = DEFAULT_DRAG_HANDLE_HEIGHT,
+  extraHeight = DEFAULT_EXTRA_HEIGHT,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  dismissThreshold = 0.5,
+  dismissVelocity = DEFAULT_DISMISS_VELOCITY,
+  keyboardBehavior = Platform.OS === 'ios' ? 'padding' : 'height',
+  keyboardVerticalOffset = 0,
+  keyboardAvoidingEnabled = true,
+  containerStyle,
+  backdropStyle,
+  dragHandleStyle,
+  contentContainerStyle,
+  testID,
+  backdropAccessibilityLabel = 'Close bottom sheet',
+}: BottomSheetModalProps) {
+  const { height: screenHeight } = useWindowDimensions();
+  const translateY = useSharedValue(screenHeight);
+  const [isDragging, setIsDragging] = useState(false);
+  const isClosingRef = useRef(false);
+
+  const resolvedHeight = useMemo(
+    () => Math.max(Number.isFinite(height) ? height : DEFAULT_HEIGHT, 0),
+    [height]
+  );
+  const resolvedHandleHeight = useMemo(
+    () => Math.max(Number.isFinite(dragHandleHeight) ? dragHandleHeight : 0, 0),
+    [dragHandleHeight]
+  );
+  const resolvedExtraHeight = useMemo(
+    () => Math.max(Number.isFinite(extraHeight) ? extraHeight : 0, 0),
+    [extraHeight]
+  );
+  const resolvedThreshold = useMemo(
+    () => Math.min(Math.max(dismissThreshold, 0), 1),
+    [dismissThreshold]
+  );
+
+  const finishDismiss = useCallback(() => {
+    isClosingRef.current = false;
+    setIsDragging(false);
+    onDismiss();
+  }, [onDismiss]);
+
+  const restoreOpenPosition = useCallback(() => {
+    translateY.value = withSpring(0, SPRING_CONFIG);
+    setIsDragging(false);
+  }, [translateY]);
+
+  const animateDismiss = useCallback(() => {
+    if (isClosingRef.current) {
+      return;
+    }
+
+    isClosingRef.current = true;
+    translateY.value = withSpring(screenHeight, SPRING_CONFIG, (finished) => {
+      if (finished) {
+        runOnJS(finishDismiss)();
+      }
+    });
+  }, [finishDismiss, screenHeight, translateY]);
+
+  useEffect(() => {
+    if (visible) {
+      isClosingRef.current = false;
+      translateY.value = withSpring(0, SPRING_CONFIG);
+      return;
+    }
+
+    translateY.value = withSpring(screenHeight, SPRING_CONFIG);
+    setIsDragging(false);
+  }, [screenHeight, translateY, visible]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: resolvedHeight + resolvedExtraHeight,
+    transform: [
+      {
+        translateY: translateY.value + resolvedExtraHeight,
+      },
+    ],
+  }));
+
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(enablePanDownToClose)
+        .onBegin(() => {
+          runOnJS(setIsDragging)(true);
+        })
+        .onUpdate((event) => {
+          translateY.value = Math.max(
+            0,
+            Math.min(resolvedHeight, event.translationY)
+          );
+        })
+        .onEnd((event) => {
+          const shouldDismiss =
+            event.translationY > resolvedHeight * resolvedThreshold ||
+            event.velocityY > dismissVelocity;
+
+          if (shouldDismiss) {
+            translateY.value = withSpring(
+              screenHeight,
+              SPRING_CONFIG,
+              (finished) => {
+                if (finished) {
+                  runOnJS(finishDismiss)();
+                }
+              }
+            );
+          } else {
+            translateY.value = withSpring(0, SPRING_CONFIG);
+            runOnJS(setIsDragging)(false);
+          }
+        })
+        .onFinalize((_event, success) => {
+          if (!success) {
+            runOnJS(restoreOpenPosition)();
+          }
+        }),
+    [
+      dismissVelocity,
+      enablePanDownToClose,
+      finishDismiss,
+      resolvedHeight,
+      resolvedThreshold,
+      restoreOpenPosition,
+      screenHeight,
+      translateY,
+    ]
+  );
+
+  const handleBackdropPress = useCallback(() => {
+    if (!closeOnBackdropPress || isDragging) {
+      return;
+    }
+
+    animateDismiss();
+  }, [animateDismiss, closeOnBackdropPress, isDragging]);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={animateDismiss}
+    >
+      <KeyboardAvoidingView
+        style={styles.flex}
+        enabled={keyboardAvoidingEnabled}
+        behavior={keyboardBehavior}
+        keyboardVerticalOffset={keyboardVerticalOffset}
+      >
+        <GestureHandlerRootView style={styles.modalBackdrop}>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={backdropAccessibilityLabel}
+            style={[
+              styles.backdrop,
+              { backgroundColor: backdropColor },
+              backdropStyle,
+            ]}
+            onPress={handleBackdropPress}
+            pointerEvents={isDragging ? 'none' : 'auto'}
+          />
+
+          <Animated.View
+            testID={testID}
+            style={[
+              styles.content,
+              {
+                backgroundColor,
+                borderTopLeftRadius: borderRadius,
+                borderTopRightRadius: borderRadius,
+              },
+              animatedStyle,
+              containerStyle,
+            ]}
+          >
+            <GestureDetector gesture={panGesture}>
+              <View
+                style={[
+                  styles.dragHandle,
+                  {
+                    height: resolvedHandleHeight,
+                    borderTopLeftRadius: borderRadius,
+                    borderTopRightRadius: borderRadius,
+                  },
+                  dragHandleStyle,
+                ]}
+              />
+            </GestureDetector>
+
+            <View
+              style={[
+                styles.childrenContainer,
+                {
+                  height: Math.max(
+                    resolvedHeight - resolvedHandleHeight,
+                    0
+                  ),
+                  transform: [{ translateY: -resolvedHandleHeight }],
+                },
+                contentContainerStyle,
+              ]}
+            >
+              {children}
+            </View>
+          </Animated.View>
+        </GestureHandlerRootView>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  modalBackdrop: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+  },
+  content: {
+    elevation: 5,
+    overflow: 'hidden',
+  },
+  dragHandle: {
+    zIndex: 100,
+  },
+  childrenContainer: {
+    width: '100%',
+  },
+});
+
+export default BottomSheetModal;

package/src/index.ts

@@ -0,0 +1,3 @@
+export { BottomSheetModal } from './BottomSheetModal';
+export { default } from './BottomSheetModal';
+export type { BottomSheetModalProps } from './BottomSheetModal';