@swmansion/react-native-bottom-sheet 0.6.3 → 0.7.0-next.2

package/lib/typescript/src/BottomSheetNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAC7C,QAAQ,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAA;KAAE,CAAC,CACxC,CAAC;IACF,gBAAgB,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAChD,QAAQ,CAAC;QAAE,QAAQ,EAAE,YAAY,CAAC,MAAM,CAAA;KAAE,CAAC,CAC5C,CAAC;CACH;;AAED,wBAAsE"}

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

@@ -7,7 +7,7 @@ export { BottomSheetFlatList } from './BottomSheetFlatList';
 export type { BottomSheetFlatListProps } from './BottomSheetFlatList';
 export { BottomSheetScrollView } from './BottomSheetScrollView';
 export type { BottomSheetScrollViewProps } from './BottomSheetScrollView';
-export type { Detent, DetentValue } from './BottomSheetBase';
-export { programmatic } from './BottomSheetBase';
+export type { Detent, DetentValue } from './bottomSheetUtils';
+export { programmatic } from './bottomSheetUtils';
 export { bottomSheetScrollable } from './bottomSheetScrollable';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.6.3",
+  "version": "0.7.0-next.2",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -108,6 +108,19 @@
       ]
     ]
   },
+  "codegenConfig": {
+    "name": "ReactNativeBottomSheetSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "ios": {
+      "componentProvider": {
+        "BottomSheetView": "BottomSheetComponentView"
+      }
+    },
+    "android": {
+      "javaPackageName": "com.swmansion.reactnativebottomsheet"
+    }
+  },
   "prettier": {
     "quoteProps": "consistent",
     "singleQuote": true,

package/react-native.config.js

@@ -0,0 +1 @@
+module.exports = {};

package/src/BottomSheet.tsx

@@ -1,8 +1,102 @@
-import type { BottomSheetCommonProps } from './BottomSheetBase';
-import { BottomSheetBase } from './BottomSheetBase';
+import { useState, type ReactNode } from 'react';
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import { runOnUI, type SharedValue } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-export type BottomSheetProps = BottomSheetCommonProps;
+import BottomSheetNativeComponent from './BottomSheetNativeComponent';
+import { type Detent, resolveDetent } from './bottomSheetUtils';
+export type { Detent, DetentValue } from './bottomSheetUtils';
+export { programmatic } from './bottomSheetUtils';
 
-export const BottomSheet = (props: BottomSheetProps) => (
-  <BottomSheetBase {...props} />
-);
+export interface BottomSheetProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  detents?: Detent[];
+  index: number;
+  animateIn?: boolean;
+  onIndexChange?: (index: number) => void;
+  position?: SharedValue<number>;
+}
+
+export const BottomSheet = ({
+  children,
+  style,
+  detents = [0, 'max'],
+  index,
+  animateIn = true,
+  onIndexChange,
+  position,
+}: BottomSheetProps) => {
+  const { height: screenHeight } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const maxHeight = screenHeight - insets.top;
+  const [contentHeight, setContentHeight] = useState(0);
+
+  const resolvedDetents = detents.map((detent) => {
+    const value = resolveDetent(detent, contentHeight, maxHeight);
+    return {
+      height: Math.max(0, Math.min(value, maxHeight)),
+      programmatic: isDetentProgrammatic(detent),
+    };
+  });
+
+  const handleSentinelLayout = (event: LayoutChangeEvent) => {
+    setContentHeight(event.nativeEvent.layout.y);
+  };
+
+  const clampedIndex = Math.max(0, Math.min(index, resolvedDetents.length - 1));
+  const isCollapsed = (resolvedDetents[clampedIndex]?.height ?? 0) === 0;
+  const sheetPointerEvents = isCollapsed ? 'none' : 'box-none';
+
+  const handleIndexChange = (event: { nativeEvent: { index: number } }) => {
+    onIndexChange?.(event.nativeEvent.index);
+  };
+
+  const handlePositionChange = (event: {
+    nativeEvent: { position: number };
+  }) => {
+    if (position !== undefined) {
+      const height = event.nativeEvent.position;
+      runOnUI(() => {
+        'worklet';
+        position.set(height);
+      })();
+    }
+  };
+
+  return (
+    <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+      <BottomSheetNativeComponent
+        pointerEvents={sheetPointerEvents}
+        style={[
+          {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: maxHeight,
+          },
+          style,
+        ]}
+        detents={resolvedDetents}
+        index={index}
+        animateIn={animateIn}
+        onIndexChange={handleIndexChange}
+        onPositionChange={handlePositionChange}
+      >
+        <View collapsable={false} style={{ flex: 1 }} pointerEvents="box-none">
+          {children}
+          <View onLayout={handleSentinelLayout} pointerEvents="none" />
+        </View>
+      </BottomSheetNativeComponent>
+    </View>
+  );
+};
+
+function isDetentProgrammatic(detent: Detent): boolean {
+  if (typeof detent === 'object' && detent !== null) {
+    return detent.programmatic === true;
+  }
+  return false;
+}

package/src/BottomSheetNativeComponent.ts

@@ -0,0 +1,24 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ViewProps,
+} from 'react-native';
+
+type NativeDetent = Readonly<{
+  height: CodegenTypes.Double;
+  programmatic: boolean;
+}>;
+
+export interface NativeProps extends ViewProps {
+  detents: ReadonlyArray<NativeDetent>;
+  index: CodegenTypes.Int32;
+  animateIn: boolean;
+  onIndexChange?: CodegenTypes.DirectEventHandler<
+    Readonly<{ index: CodegenTypes.Int32 }>
+  >;
+  onPositionChange?: CodegenTypes.DirectEventHandler<
+    Readonly<{ position: CodegenTypes.Double }>
+  >;
+}
+
+export default codegenNativeComponent<NativeProps>('BottomSheetView');

package/src/index.tsx

@@ -7,6 +7,6 @@ export { BottomSheetFlatList } from './BottomSheetFlatList';
 export type { BottomSheetFlatListProps } from './BottomSheetFlatList';
 export { BottomSheetScrollView } from './BottomSheetScrollView';
 export type { BottomSheetScrollViewProps } from './BottomSheetScrollView';
-export type { Detent, DetentValue } from './BottomSheetBase';
-export { programmatic } from './BottomSheetBase';
+export type { Detent, DetentValue } from './bottomSheetUtils';
+export { programmatic } from './bottomSheetUtils';
 export { bottomSheetScrollable } from './bottomSheetScrollable';