@sdcx/bottom-sheet 0.15.0 → 0.17.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 http://www.sdcx.tech
+Copyright (c) 2025 listenzz@163.com
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/android/src/main/java/com/reactnative/bottomsheet/BottomSheet.java

@@ -163,7 +163,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
     }
 
     public void setState(BottomSheetState state) {
-        if (state == this.state) {
+        if (this.state == state) {
             return;
         }
 
@@ -182,7 +182,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
     View findScrollingChild(View view) {
         if (ViewCompat.isNestedScrollingEnabled(view)) {
             if (!view.canScrollHorizontally(1) && !view.canScrollHorizontally(-1) &&
-                    (view.canScrollVertically(-1) || view.canScrollVertically(1))) {
+                (view.canScrollVertically(-1) || view.canScrollVertically(1))) {
                 return view;
             }
         }
@@ -255,7 +255,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
                 }
 
                 ignoreEvents = activePointerId == MotionEvent.INVALID_POINTER_ID
-                        && !isPointInChildBounds(contentView, initialX, initialY);
+                    && !isPointInChildBounds(contentView, initialX, initialY);
                 break;
             default: // fall out
         }
@@ -269,12 +269,12 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         // happening over the scrolling content as nested scrolling logic handles that case.
         View scroll = nestedScrollingChildRef != null ? nestedScrollingChildRef.get() : null;
         return action == MotionEvent.ACTION_MOVE
-                && scroll != null
-                && !ignoreEvents
-                && state != DRAGGING
-                && !isPointInChildBounds(scroll, (int) event.getX(), (int) event.getY())
-                && viewDragHelper != null
-                && Math.abs(initialY - event.getY()) > viewDragHelper.getTouchSlop();
+            && scroll != null
+            && !ignoreEvents
+            && state != DRAGGING
+            && !isPointInChildBounds(scroll, (int) event.getX(), (int) event.getY())
+            && viewDragHelper != null
+            && Math.abs(initialY - event.getY()) > viewDragHelper.getTouchSlop();
     }
 
     @Override
@@ -282,7 +282,7 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         if (!draggable) {
             return false;
         }
-        
+
         int action = event.getActionMasked();
         if (state == DRAGGING && action == MotionEvent.ACTION_DOWN) {
             return true;
@@ -547,10 +547,10 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
     void startSettlingAnimation(View child, BottomSheetState state, int top, boolean settleFromViewDragHelper) {
         boolean startedSettling =
-                viewDragHelper != null
-                        && (settleFromViewDragHelper
-                        ? viewDragHelper.settleCapturedViewAt(child.getLeft(), top)
-                        : viewDragHelper.smoothSlideViewTo(child, child.getLeft(), top));
+            viewDragHelper != null
+                && (settleFromViewDragHelper
+                ? viewDragHelper.settleCapturedViewAt(child.getLeft(), top)
+                : viewDragHelper.smoothSlideViewTo(child, child.getLeft(), top));
         if (startedSettling) {
             setStateInternal(SETTLING);
             // STATE_SETTLING won't animate the material shape, so do that here with the target state.

package/{lib → dist}/index.d.ts

@@ -20,5 +20,5 @@ interface NativeBottomSheetProps extends ViewProps {
 }
 declare const BottomSheet: React.ForwardRefExoticComponent<NativeBottomSheetProps & {
     fitToContents?: boolean | undefined;
-} & React.RefAttributes<React.Component<NativeBottomSheetProps, {}, any> & Readonly<import("react-native").NativeMethods>>>;
+} & React.RefAttributes<React.Component<NativeBottomSheetProps, {}, any> & import("react-native").NativeMethods>>;
 export default BottomSheet;

package/{lib → dist}/index.js

@@ -1,12 +1,16 @@
 import React from 'react';
-import { requireNativeComponent, StyleSheet, View } from 'react-native';
+import { requireNativeComponent, StyleSheet, View, } from 'react-native';
 import splitLayoutProps from './splitLayoutProps';
 const NativeBottomSheet = requireNativeComponent('BottomSheet');
 const BottomSheet = React.forwardRef((props, ref) => {
     const { style, contentContainerStyle, children, peekHeight = 200, draggable = true, state = 'collapsed', fitToContents, ...rest } = props;
     const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style));
     return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} draggable={draggable} state={state} {...rest} ref={ref}>
-      <View style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner, contentContainerStyle]} collapsable={false}>
+      <View style={[
+            fitToContents ? styles.fitToContents : StyleSheet.absoluteFill,
+            inner,
+            contentContainerStyle,
+        ]} collapsable={false}>
         {children}
       </View>
     </NativeBottomSheet>);

package/dist/splitLayoutProps.d.ts

@@ -0,0 +1,405 @@
+import { ViewStyle } from 'react-native';
+export default function splitLayoutProps(props?: ViewStyle): {
+    outer: {
+        [key: string]: string | number | import("react-native").OpaqueColorValue | import("react-native").Animated.AnimatedNode | readonly import("react-native").BoxShadowValue[] | readonly import("react-native").FilterFunction[] | readonly import("react-native").GradientValue[] | Readonly<{
+            width: number;
+            height: number;
+        }> | readonly (({
+            scaleX: import("react-native").AnimatableNumericValue;
+        } & {
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            scaleY: import("react-native").AnimatableNumericValue;
+        } & {
+            scaleX?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            translateX: import("react-native").AnimatableNumericValue | `${number}%`;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            translateY: import("react-native").AnimatableNumericValue | `${number}%`;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            perspective: import("react-native").AnimatableNumericValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotate: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotateX: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotateY: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotateZ: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            scale: import("react-native").AnimatableNumericValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            skewX: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            skewY: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            matrix?: undefined;
+        }) | ({
+            matrix: import("react-native").AnimatableNumericValue[];
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+        }))[] | (string | number)[] | number[] | null | undefined;
+    };
+    inner: {
+        [key: string]: string | number | import("react-native").OpaqueColorValue | import("react-native").Animated.AnimatedNode | readonly import("react-native").BoxShadowValue[] | readonly import("react-native").FilterFunction[] | readonly import("react-native").GradientValue[] | Readonly<{
+            width: number;
+            height: number;
+        }> | readonly (({
+            scaleX: import("react-native").AnimatableNumericValue;
+        } & {
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            scaleY: import("react-native").AnimatableNumericValue;
+        } & {
+            scaleX?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            translateX: import("react-native").AnimatableNumericValue | `${number}%`;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            translateY: import("react-native").AnimatableNumericValue | `${number}%`;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            perspective: import("react-native").AnimatableNumericValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotate: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotateX: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotateY: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotateZ: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            scale: import("react-native").AnimatableNumericValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            skewX: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            skewY: import("react-native").AnimatableStringValue;
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            matrix?: undefined;
+        }) | ({
+            matrix: import("react-native").AnimatableNumericValue[];
+        } & {
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+        }))[] | (string | number)[] | number[] | null | undefined;
+    };
+};

package/ios/BottomSheet/RNBottomSheet.m

@@ -24,10 +24,12 @@
 
 @property(nonatomic, assign) RNBottomSheetState finalState;
 
+@property(nonatomic, strong) UIViewPropertyAnimator *animator;
+
 @end
 
 @implementation RNBottomSheet {
-    __weak RCTRootContentView *_rootView;
+    __weak UIView *_rootView;
     BOOL _isInitialRender;
 }
 
@@ -315,7 +317,7 @@
     }
     
     self.finalState = state;
-
+    
     [self settleToState:state withFling:YES];
 }
 
@@ -333,14 +335,22 @@
     self.target.pagingEnabled = YES;
     [self setStateInternal:RNBottomSheetStateSettling];
     [self startWatchBottomSheetTransition];
-    [self.layer removeAllAnimations];
-//    CGFloat duration = fmin(fabs(self.contentView.frame.origin.y - top) / (self.maxY - self.minY) * 0.3, 0.3);
-    [UIView animateWithDuration:fling ? 0.5 : 0.25 delay:0 usingSpringWithDamping:1 initialSpringVelocity:1 options:UIViewAnimationOptionTransitionNone animations:^{
+    
+    if (self.animator) {
+        [self.animator stopAnimation:YES];
+    }
+    
+    UIViewAnimationOptions options = UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionCurveEaseOut;
+    
+    self.animator = [UIViewPropertyAnimator runningPropertyAnimatorWithDuration:0.3 delay:0 options:options animations:^{
         self.contentView.frame = CGRectOffset(self.contentView.frame, 0, top - self.contentView.frame.origin.y);
-    } completion:^(BOOL finished) {
+    } completion:^(UIViewAnimatingPosition finalPosition) {
         self.target.pagingEnabled = NO;
+        self.animator = nil;
         [self stopWatchBottomSheetTransition];
-        [self setStateInternal:state];
+        if (self.finalState == state) {
+            [self setStateInternal:state];
+        }
     }];
 }
 

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@sdcx/bottom-sheet",
   "description": "A react-native BottomSheet component.",
-  "version": "0.15.0",
-  "main": "./lib/index.js",
-  "typings": "./lib/index.d.ts",
+  "version": "0.17.0",
+  "main": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
   "react-native": "src/index",
   "nativePackage": true,
   "files": [
     "src",
-    "lib",
+    "dist",
     "android",
     "ios",
     "docs",
@@ -26,7 +26,7 @@
     "bottom-sheet"
   ],
   "scripts": {
-    "build": "rm -rf ./lib && tsc -p tsconfig.build.json",
+    "build": "rm -rf ./dist && tsc -p tsconfig.json",
     "prepare": "npm run build",
     "tsc": "tsc",
     "test": "jest",
@@ -36,32 +36,5 @@
     "react": ">=16.8",
     "react-native": ">=0.60"
   },
-  "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/runtime": "^7.13.10",
-    "@react-native-community/eslint-config": "^3.0.0",
-    "@types/jest": "^27.0.1",
-    "@types/react": "^17.0.2",
-    "@types/react-native": "^0.67.0",
-    "@types/react-test-renderer": "17.0.2",
-    "babel-jest": "^27.0.6",
-    "jest": "^27.0.6",
-    "metro-react-native-babel-preset": "^0.66.2",
-    "react": "17.0.2",
-    "react-native": "^0.67.4",
-    "react-test-renderer": "17.0.2",
-    "eslint": "^7.32.0",
-    "typescript": "^4.6.4"
-  },
-  "jest": {
-    "preset": "react-native",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
-  }
+  "devDependencies": {}
 }

package/src/index.tsx

@@ -1,36 +1,42 @@
-import React from 'react'
-import { NativeSyntheticEvent, requireNativeComponent, StyleSheet, View, ViewProps } from 'react-native'
-import splitLayoutProps from './splitLayoutProps'
+import React from 'react';
+import {
+  NativeSyntheticEvent,
+  requireNativeComponent,
+  StyleSheet,
+  View,
+  ViewProps,
+} from 'react-native';
+import splitLayoutProps from './splitLayoutProps';
 
 export interface OffsetChangedEventData {
-  progress: number
-  offset: number
-  expandedOffset: number
-  collapsedOffset: number
+  progress: number;
+  offset: number;
+  expandedOffset: number;
+  collapsedOffset: number;
 }
 
-export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden'
+export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden';
 
 export interface StateChangedEventData {
-  state: BottomSheetState
+  state: BottomSheetState;
 }
 
 interface NativeBottomSheetProps extends ViewProps {
-  onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void
-  onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void
-  peekHeight?: number
-  draggable?: boolean
-  state?: BottomSheetState
-  contentContainerStyle?: ViewProps['style']
+  onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
+  onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
+  peekHeight?: number;
+  draggable?: boolean;
+  state?: BottomSheetState;
+  contentContainerStyle?: ViewProps['style'];
 }
 
 type BottomSheetProps = NativeBottomSheetProps & {
-  fitToContents?: boolean
-}
+  fitToContents?: boolean;
+};
 
-const NativeBottomSheet = requireNativeComponent<NativeBottomSheetProps>('BottomSheet')
+const NativeBottomSheet = requireNativeComponent<NativeBottomSheetProps>('BottomSheet');
 
-type NativeBottomSheetInstance = InstanceType<typeof NativeBottomSheet>
+type NativeBottomSheetInstance = InstanceType<typeof NativeBottomSheet>;
 
 const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps>((props, ref) => {
   const {
@@ -42,8 +48,8 @@ const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps
     state = 'collapsed',
     fitToContents,
     ...rest
-  } = props
-  const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style))
+  } = props;
+  const {outer, inner} = splitLayoutProps(StyleSheet.flatten(style));
   return (
     <NativeBottomSheet
       style={[StyleSheet.absoluteFill, outer]}
@@ -53,13 +59,17 @@ const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps
       {...rest}
       ref={ref}>
       <View
-        style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner, contentContainerStyle]}
+        style={[
+          fitToContents ? styles.fitToContents : StyleSheet.absoluteFill,
+          inner,
+          contentContainerStyle,
+        ]}
         collapsable={false}>
         {children}
       </View>
     </NativeBottomSheet>
-  )
-})
+  );
+});
 
 const styles = StyleSheet.create({
   fitToContents: {
@@ -68,6 +78,6 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
   },
-})
+});
 
-export default BottomSheet
+export default BottomSheet;

package/src/splitLayoutProps.ts

@@ -1,10 +1,10 @@
-import { ViewStyle } from 'react-native'
+import {ViewStyle} from 'react-native';
 
-type StyleKey = keyof ViewStyle
+type StyleKey = keyof ViewStyle;
 
 export default function splitLayoutProps(props?: ViewStyle) {
-  let outer: { [key: string]: ViewStyle[StyleKey] } = {}
-  let inner: { [key: string]: ViewStyle[StyleKey] } = {}
+  let outer: {[key: string]: ViewStyle[StyleKey]} = {};
+  let inner: {[key: string]: ViewStyle[StyleKey]} = {};
 
   if (props != null) {
     for (const prop of Object.keys(props) as StyleKey[]) {
@@ -34,14 +34,14 @@ export default function splitLayoutProps(props?: ViewStyle) {
         case 'top':
         case 'transform':
         case 'zIndex':
-          outer[prop] = props[prop]
-          break
+          outer[prop] = props[prop];
+          break;
         default:
-          inner[prop] = props[prop]
-          break
+          inner[prop] = props[prop];
+          break;
       }
     }
   }
 
-  return { outer, inner }
+  return {outer, inner};
 }

package/lib/splitLayoutProps.d.ts

@@ -1,15 +0,0 @@
-import { ViewStyle } from 'react-native';
-export default function splitLayoutProps(props?: ViewStyle): {
-    outer: {
-        [key: string]: string | number | import("react-native").OpaqueColorValue | {
-            width: number;
-            height: number;
-        } | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | number[] | undefined;
-    };
-    inner: {
-        [key: string]: string | number | import("react-native").OpaqueColorValue | {
-            width: number;
-            height: number;
-        } | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | number[] | undefined;
-    };
-};