@sdcx/bottom-sheet 0.14.0 → 0.16.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,11 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
     }
 
     public void setState(BottomSheetState state) {
-        if (state == this.state) {
+        if (this.state == state) {
+            return;
+        }
+
+        if (this.state == SETTLING) {
             return;
         }
 
@@ -282,7 +286,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;

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

@@ -22,10 +22,13 @@
 @property(nonatomic, strong) CADisplayLink *displayLink;
 @property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
 
+@property(nonatomic, assign) RNBottomSheetState finalState;
+
 @end
 
 @implementation RNBottomSheet {
     __weak RCTRootContentView *_rootView;
+    BOOL _isInitialRender;
 }
 
 - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher {
@@ -33,7 +36,9 @@
         _panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
         _panGestureRecognizer.delegate = self;
         _state = RNBottomSheetStateCollapsed;
+        _finalState = RNBottomSheetStateCollapsed;
         _eventDispatcher = eventDispatcher;
+        _isInitialRender = YES;
     }
     return self;
 }
@@ -75,14 +80,14 @@
     if (gestureRecognizer != self.panGestureRecognizer) {
         return YES;
     }
-    
+
     if (self.target) {
         [self.target removeObserver:self forKeyPath:@"contentOffset"];
     }
     self.target = nil;
-    
+
     UIView *touchView = touch.view;
-   
+
     while (touchView != nil && [touchView isDescendantOfView:self]) {
         if ([touchView isKindOfClass:[UIScrollView class]]) {
             UIScrollView *scrollView = (UIScrollView *)touchView;
@@ -150,7 +155,7 @@
     if (!self.contentView) {
         return;
     }
-    
+
     if (!CGRectEqualToRect(self.contentView.frame, CGRectZero)) {
         [self calculateOffset];
         if (self.state == RNBottomSheetStateCollapsed) {
@@ -162,6 +167,14 @@
         }
         [self dispatchOnSlide:self.contentView.frame.origin.y];
     }
+
+    dispatch_async(dispatch_get_main_queue(), ^{
+        if (self.finalState == RNBottomSheetStateExpanded && self->_isInitialRender) {
+            [self settleToState:self.finalState withFling:YES];
+        }
+
+        self->_isInitialRender = NO;
+    });
 }
 
 - (void)calculateOffset {
@@ -171,19 +184,19 @@
 }
 
 - (void)handlePan:(UIPanGestureRecognizer *)pan {
-    if (!self.draggable) {
+    if (!self.draggable || self.state == RNBottomSheetStateSettling) {
         return;
     }
-    
+
     CGFloat translationY = [pan translationInView:self.contentView].y;
     [pan setTranslation:CGPointZero inView:self.contentView];
-    
+
     CGFloat top = self.contentView.frame.origin.y;
-    
+
     if (pan.state == UIGestureRecognizerStateChanged) {
         [self setStateInternal:RNBottomSheetStateDragging];
     }
-    
+
     // 如果有嵌套滚动
     if (self.target) {
         if(translationY > 0 && top < self.maxY && self.target.contentOffset.y <= 0) {
@@ -192,7 +205,7 @@
             self.contentView.frame = CGRectOffset(self.contentView.frame, 0, y - top);
             [self dispatchOnSlide:self.contentView.frame.origin.y];
         }
-        
+
         if (translationY < 0 && top > self.minY) {
             //向上拖
             CGFloat y = fmax(top + translationY, self.minY);
@@ -200,7 +213,7 @@
             [self dispatchOnSlide:self.contentView.frame.origin.y];
         }
     }
-    
+
     // 没有嵌套滚动
     if (!self.target) {
         if(translationY > 0 && top < self.maxY) {
@@ -209,7 +222,7 @@
             self.contentView.frame = CGRectOffset(self.contentView.frame, 0, y - top);
             [self dispatchOnSlide:self.contentView.frame.origin.y];
         }
-        
+
         if (translationY < 0 && top > self.minY) {
             //向上拖
             CGFloat y = fmax(top + translationY, self.minY);
@@ -217,7 +230,7 @@
             [self dispatchOnSlide:self.contentView.frame.origin.y];
         }
     }
-    
+
     if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateCancelled) {
         // RCTLogInfo(@"velocity:%f", [pan velocityInView:self.contentView].y);
         CGFloat velocity = [pan velocityInView:self.contentView].y;
@@ -226,7 +239,7 @@
                 //如果是类似轻扫的那种
                 [self settleToState:RNBottomSheetStateCollapsed withFling:YES];
             }
-            
+
             if (!self.target) {
                 //如果是类似轻扫的那种
                 [self settleToState:RNBottomSheetStateCollapsed withFling:YES];
@@ -250,18 +263,18 @@
         _nextReturn = false;
         return;
     }
-    
+
     if (![keyPath isEqualToString:@"contentOffset"]) {
         return;
     }
-    
+
     CGFloat new = [change[@"new"] CGPointValue].y;
     CGFloat old = [change[@"old"] CGPointValue].y;
 
     if (new == old) {
         return;
     }
-    
+
     CGFloat dy = old - new;
 
     if (dy > 0) {
@@ -271,7 +284,7 @@
             target.contentOffset = CGPointMake(0, 0);
         }
     }
-    
+
     if (dy < 0) {
         //向上
         if (self.contentView.frame.origin.y > self.minY) {
@@ -292,20 +305,21 @@
 }
 
 - (void)setState:(RNBottomSheetState)state {
-    if (_state == state) {
+    if (_isInitialRender) {
+        self.finalState = state;
         return;
     }
 
-    if (self.state == RNBottomSheetStateSettling) {
-        [self.layer removeAllAnimations];
+    if (self.finalState == state) {
         return;
     }
-    
-    if (CGRectEqualToRect(self.contentView.frame, CGRectZero)) {
-        [self setStateInternal:state];
+
+    if (_state == RNBottomSheetStateSettling) {
         return;
     }
-    
+
+    self.finalState = state;
+
     [self settleToState:state withFling:YES];
 }
 
@@ -339,19 +353,19 @@
         return;
     }
     _state = state;
-    
+
     if (state == RNBottomSheetStateExpanded) {
         [self dispatchOnSlide:self.minY];
     }
-    
+
     if (state == RNBottomSheetStateHidden) {
         [self dispatchOnSlide:self.frame.size.height];
     }
-    
+
     if (state == RNBottomSheetStateCollapsed) {
         [self dispatchOnSlide:self.maxY];
     }
-    
+
     if (state == RNBottomSheetStateCollapsed || state == RNBottomSheetStateExpanded || state == RNBottomSheetStateHidden) {
         [self.eventDispatcher sendEvent:[[RNBottomSheetStateChangedEvent alloc] initWithViewTag:self.reactTag state:state]];
     }
@@ -383,5 +397,5 @@
     CGFloat top = [self.contentView.layer presentationLayer].frame.origin.y;
     [self dispatchOnSlide:top];
 }
-    
+
 @end

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@sdcx/bottom-sheet",
   "description": "A react-native BottomSheet component.",
-  "version": "0.14.0",
-  "main": "./lib/index.js",
-  "typings": "./lib/index.d.ts",
+  "version": "0.16.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;
-    };
-};