@sdcx/bottom-sheet 0.8.0 → 0.10.0

package/README.md

@@ -1,6 +1,6 @@
 # BottomSheet
 
-`BottomSheet` 是一个 React Native 原生 UI 组件。
+[BottomSheet](https://github.com/sdcxtech/react-native-troika/blob/master/packages/bottom-sheet/README.md) 是一个类似于 Android 原生的 [BottomSheetBehavior](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetBehavior) 组件，我们在 API 设计上也尽量和 Android 原生保持一致。
 
 它位于屏幕底部，可拖拽，支持嵌套滚动，可以和可滚动视图（`FlatList`, `FlashList`, `WebView` 等等）一起使用。
 
@@ -43,7 +43,12 @@ const App = () => {
 }
 ```
 
-> :white_check_mark: 当和可滚动视图一起使用时，需要设置 `nestedScrollEnabled` 属性。
+> :exclamation: :exclamation: :exclamation:
+> Android 是基于 [NestedScrolling API](https://developer.android.com/reference/androidx/core/view/NestedScrollingChild) 实现的。
+>
+> <h3>请记得为你的列表开启 `nestedScrollEnabled` 属性。</h3>
+>
+> :exclamation: :exclamation: :exclamation:
 
 ## 基本概念和 API
 
@@ -67,6 +72,8 @@ const App = () => {
 
 - `fitToContents`，是指 BottomSheet 在展开时，是否适应内容的高度，默认是 `false`。当和可滚动列表，譬如 ScrollView 一起使用时，请保持默认值。
 
+- `contentContainerStyle`，用来设置内层视图的样式。
+
 ### 回调
 
 - `onStateChanged`, 是指 BottomSheet 状态变化时的回调，它和 `state` 属性是一对，用来实现受控模式。

package/ios/BottomSheet/RNBottomSheet.h

@@ -1,14 +1,19 @@
 #import <UIKit/UIKit.h>
-#import <React/RCTComponent.h>
+#import <React/RCTView.h>
+#import <React/RCTEventDispatcher.h>
+
+#import "RNBottomSheetState.h"
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface RNBottomSheet : UIView
+@interface RNBottomSheet : RCTView
 
 @property(nonatomic, copy) RCTDirectEventBlock onSlide;
 @property(nonatomic, copy) RCTDirectEventBlock onStateChanged;
 @property(nonatomic, assign) CGFloat peekHeight;
-@property(nonatomic, copy) NSString *state;
+@property(nonatomic, assign) RNBottomSheetState state;
+
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher;
 
 @end
 

package/ios/BottomSheet/RNBottomSheet.m

@@ -1,10 +1,16 @@
 #import "RNBottomSheet.h"
+#import "RNBottomSheetStateChangedEvent.h"
+#import "RNBottomSheetOffsetChangedEvent.h"
 
 #import <React/UIView+React.h>
+#import <React/RCTRootContentView.h>
+#import <React/RCTTouchHandler.h>
 #import <React/RCTLog.h>
 
 @interface RNBottomSheet () <UIGestureRecognizerDelegate>
 
+@property(nonatomic, strong) UIView *contentView;
+
 @property(nonatomic, strong) UIScrollView *target;
 @property(nonatomic, strong) UIPanGestureRecognizer *panGestureRecognizer;
 
@@ -12,24 +18,41 @@
 @property(nonatomic, assign) CGFloat maxY;
 
 @property(nonatomic, assign) BOOL nextReturn;
-@property(nonatomic, assign) CGFloat lastDragDistance;
 
 @property(nonatomic, strong) CADisplayLink *displayLink;
+@property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
 
 @end
 
-@implementation RNBottomSheet
+@implementation RNBottomSheet {
+    __weak RCTRootContentView *_rootView;
+}
 
-- (instancetype)init {
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher {
     if (self = [super init]) {
         _panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
         _panGestureRecognizer.delegate = self;
-        _state = @"collapsed";
-        [self addGestureRecognizer:_panGestureRecognizer];
+        _state = RNBottomSheetStateCollapsed;
+        _eventDispatcher = eventDispatcher;
     }
     return self;
 }
 
+- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex {
+    [super insertReactSubview:subview atIndex:atIndex];
+    if (atIndex == 0) {
+        self.contentView = subview;
+        [subview addGestureRecognizer:_panGestureRecognizer];
+    }
+}
+
+- (void)removeReactSubview:(UIView *)subview {
+    [super removeReactSubview:subview];
+    if (self.contentView == subview) {
+        [subview removeGestureRecognizer:_panGestureRecognizer];
+    }
+}
+
 - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
     if (gestureRecognizer == self.panGestureRecognizer && otherGestureRecognizer == self.target.panGestureRecognizer) {
         return YES;
@@ -37,6 +60,17 @@
     return NO;
 }
 
+- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
+    if (gestureRecognizer == self.panGestureRecognizer) {
+        if ([super gestureRecognizerShouldBegin:gestureRecognizer]) {
+            [self cancelRootViewTouches];
+            return YES;
+        }
+        return NO;
+    }
+    return [super gestureRecognizerShouldBegin:gestureRecognizer];
+}
+
 - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
     if (gestureRecognizer != self.panGestureRecognizer) {
         return YES;
@@ -82,6 +116,26 @@
     }
 }
 
+- (void)didMoveToWindow {
+    [super didMoveToWindow];
+    if (self.window) {
+        [self cacheRootView];
+    }
+}
+
+- (void)cacheRootView {
+  UIView *rootView = self;
+  while (rootView.superview && ![rootView isReactRootView]) {
+    rootView = rootView.superview;
+  }
+  _rootView = rootView;
+}
+
+- (void)cancelRootViewTouches {
+    RCTRootContentView *rootView = (RCTRootContentView *)_rootView;
+    [rootView.touchHandler cancel];
+}
+
 - (BOOL)isHorizontal:(UIScrollView *)scrollView {
     return scrollView.contentSize.width > self.frame.size.width;
 }
@@ -89,39 +143,42 @@
 
 - (void)reactSetFrame:(CGRect)frame {
     [super reactSetFrame:frame];
-    if (!CGRectEqualToRect(self.frame, CGRectZero)) {
-        [self calculateOffset];
-        if ([self.state isEqualToString:@"collapsed"]) {
-            self.frame = CGRectOffset(self.frame, 0, self.frame.size.height - self.peekHeight);
-            [self dispatchOnSlide:self.frame.origin.y];
-        } else if ([self.state isEqualToString:@"hidden"]) {
-            self.frame = CGRectOffset(self.frame, 0, self.frame.size.height);
-            [self dispatchOnSlide:self.frame.origin.y];
-        }
-    }
+    
 }
 
 - (void)layoutSubviews {
     [super layoutSubviews];
-    [self calculateOffset];
-    [self dispatchOnSlide:self.frame.origin.y];
+    if (!self.contentView) {
+        return;
+    }
+    
+    if (!CGRectEqualToRect(self.contentView.frame, CGRectZero)) {
+        [self calculateOffset];
+        if (self.state == RNBottomSheetStateCollapsed) {
+            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, self.maxY - self.contentView.frame.origin.y);
+        } else if (self.state == RNBottomSheetStateExpanded) {
+            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, self.minY - self.contentView.frame.origin.y);
+        } else if (self.state == RNBottomSheetStateHidden) {
+            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, self.frame.size.height - self.contentView.frame.origin.y);
+        }
+        [self dispatchOnSlide:self.contentView.frame.origin.y];
+    }
 }
 
 - (void)calculateOffset {
-    CGFloat parentHeight = self.superview.frame.size.height;
-    self.minY = fmax(0, parentHeight - self.frame.size.height);
+    CGFloat parentHeight = self.frame.size.height;
+    self.minY = fmax(0, parentHeight - self.contentView.frame.size.height);
     self.maxY = fmax(self.minY, parentHeight - self.peekHeight);
 }
 
 - (void)handlePan:(UIPanGestureRecognizer *)pan {
+    CGFloat translationY = [pan translationInView:self.contentView].y;
+    [pan setTranslation:CGPointZero inView:self.contentView];
     
-    CGFloat translationY = [pan translationInView:self].y;
-    [pan setTranslation:CGPointZero inView:self];
-    
-    CGFloat top = self.frame.origin.y;
+    CGFloat top = self.contentView.frame.origin.y;
     
     if (pan.state == UIGestureRecognizerStateChanged) {
-        [self setStateInternal:@"dragging"];
+        [self setStateInternal:RNBottomSheetStateDragging];
     }
     
     // 如果有嵌套滚动
@@ -129,15 +186,15 @@
         if(translationY > 0 && top < self.maxY && self.target.contentOffset.y <= 0) {
             //向下拖
             CGFloat y = fmin(top + translationY, self.maxY);
-            self.frame = CGRectOffset(self.frame, 0, y - top);
-            [self dispatchOnSlide:self.frame.origin.y];
+            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);
-            self.frame = CGRectOffset(self.frame, 0, y - top);
-            [self dispatchOnSlide:self.frame.origin.y];
+            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, y - top);
+            [self dispatchOnSlide:self.contentView.frame.origin.y];
         }
     }
     
@@ -146,43 +203,43 @@
         if(translationY > 0 && top < self.maxY) {
             //向下拖
             CGFloat y = fmin(top + translationY, self.maxY);
-            self.frame = CGRectOffset(self.frame, 0, y - top);
-            [self dispatchOnSlide:self.frame.origin.y];
+            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);
-            self.frame = CGRectOffset(self.frame, 0, y - top);
-            [self dispatchOnSlide:self.frame.origin.y];
+            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, y - top);
+            [self dispatchOnSlide:self.contentView.frame.origin.y];
         }
     }
     
     if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateCancelled) {
-        if (self.lastDragDistance > 0) {
+        // RCTLogInfo(@"velocity:%f", [pan velocityInView:self.contentView].y);
+        CGFloat velocity = [pan velocityInView:self.contentView].y;
+        if (velocity > 400) {
             if (self.target && self.target.contentOffset.y <= 0) {
                 //如果是类似轻扫的那种
-                [self settleToState:@"collapsed"];
+                [self settleToState:RNBottomSheetStateCollapsed];
             }
             
             if (!self.target) {
                 //如果是类似轻扫的那种
-                [self settleToState:@"collapsed"];
+                [self settleToState:RNBottomSheetStateCollapsed];
             }
-        } else if (self.lastDragDistance < 0) {
+        } else if (velocity < -400) {
             //如果是类似轻扫的那种
-            [self settleToState:@"expanded"];
+            [self settleToState:RNBottomSheetStateExpanded];
         } else {
             //如果是普通拖拽
-            if(fabs(self.frame.origin.y - self.minY) > fabs(self.frame.origin.y - self.maxY)) {
-                [self settleToState:@"collapsed"];
+            if(fabs(self.contentView.frame.origin.y - self.minY) > fabs(self.contentView.frame.origin.y - self.maxY)) {
+                [self settleToState:RNBottomSheetStateCollapsed];
             } else {
-                [self settleToState:@"expanded"];
+                [self settleToState:RNBottomSheetStateExpanded];
             }
         }
     }
-    
-    self.lastDragDistance = translationY;
 }
 
 - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(UIScrollView *)target change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
@@ -214,7 +271,7 @@
     
     if (dy < 0) {
         //向上
-        if (self.frame.origin.y > self.minY) {
+        if (self.contentView.frame.origin.y > self.minY) {
             _nextReturn = true;
             target.contentOffset = CGPointMake(0, old);
         }
@@ -223,20 +280,20 @@
 
 - (void)setPeekHeight:(CGFloat)peekHeight {
     _peekHeight = peekHeight;
-    if (!CGRectEqualToRect(self.frame, CGRectZero)) {
+    if (!CGRectEqualToRect(self.contentView.frame, CGRectZero)) {
         [self calculateOffset];
-        if ([self.state isEqualToString:@"collapsed"]) {
-            [self settleToState:@"collapsed"];
+        if (self.state == RNBottomSheetStateCollapsed) {
+            [self settleToState:RNBottomSheetStateCollapsed];
         }
     }
 }
 
-- (void)setState:(NSString *)state {
-    if ([_state isEqualToString:state]) {
+- (void)setState:(RNBottomSheetState)state {
+    if (_state == state) {
         return;
     }
 
-    if (CGRectEqualToRect(self.frame, CGRectZero)) {
+    if (CGRectEqualToRect(self.contentView.frame, CGRectZero)) {
         [self setStateInternal:state];
         return;
     }
@@ -244,24 +301,24 @@
     [self settleToState:state];
 }
 
-- (void)settleToState:(NSString *)state {
-    if ([state isEqualToString:@"collapsed"]) {
+- (void)settleToState:(RNBottomSheetState)state {
+    if (state == RNBottomSheetStateCollapsed) {
         [self startSettlingToState:state top:self.maxY];
-    } else if ([state isEqualToString:@"expanded"]) {
+    } else if (state == RNBottomSheetStateExpanded) {
         [self startSettlingToState:state top:self.minY];
-    } else if ([state isEqualToString:@"hidden"]) {
-        [self startSettlingToState:@"hidden" top:self.superview.frame.size.height];
+    } else if (state == RNBottomSheetStateHidden) {
+        [self startSettlingToState:state top:self.frame.size.height];
     }
 }
 
-- (void)startSettlingToState:(NSString *)state top:(CGFloat)top {
+- (void)startSettlingToState:(RNBottomSheetState)state top:(CGFloat)top {
     self.target.pagingEnabled = YES;
-    [self setStateInternal:@"settling"];
+    [self setStateInternal:RNBottomSheetStateSettling];
     [self startWatchBottomSheetTransition];
     [self.layer removeAllAnimations];
-    CGFloat duration = fmin(fabs(self.frame.origin.y - top) / (self.maxY - self.minY) * 0.3, 0.3);
-    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionBeginFromCurrentState animations:^{
-        self.frame = CGRectOffset(self.frame, 0, top - self.frame.origin.y);
+//    CGFloat duration = fmin(fabs(self.contentView.frame.origin.y - top) / (self.maxY - self.minY) * 0.3, 0.3);
+    [UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:1 initialSpringVelocity:0.5 options:NULL animations:^{
+        self.contentView.frame = CGRectOffset(self.contentView.frame, 0, top - self.contentView.frame.origin.y);
     } completion:^(BOOL finished) {
         self.target.pagingEnabled = NO;
         [self stopWatchBottomSheetTransition];
@@ -269,18 +326,14 @@
     }];
 }
 
-- (void)setStateInternal:(NSString *)state {
-    if ([_state isEqualToString:state]) {
+- (void)setStateInternal:(RNBottomSheetState)state {
+    if (_state == state) {
         return;
     }
     _state = state;
     
-    if (self.onStateChanged) {
-        if ([state isEqualToString:@"collapsed"] || [state isEqualToString:@"expanded"] || [state isEqualToString:@"hidden"]) {
-            self.onStateChanged(@{
-                @"state": state,
-            });
-        }
+    if (state == RNBottomSheetStateCollapsed || state == RNBottomSheetStateExpanded || state == RNBottomSheetStateHidden) {
+        [self.eventDispatcher sendEvent:[[RNBottomSheetStateChangedEvent alloc] initWithViewTag:self.reactTag state:state]];
     }
 }
 
@@ -288,15 +341,8 @@
     if (top < 0 || self.maxY == 0) {
         return;
     }
-    if (self.onSlide) {
-        CGFloat progress = fmin((top - self.minY) * 1.0f / (self.maxY - self.minY), 1);
-        self.onSlide(@{
-            @"progress": @(progress),
-            @"offset": @(top),
-            @"collapsedOffset": @(self.maxY),
-            @"expandedOffset": @(self.minY)
-        });
-    }
+    CGFloat progress = fmin((top - self.minY) * 1.0f / (self.maxY - self.minY), 1);
+    [self.eventDispatcher sendEvent:[[RNBottomSheetOffsetChangedEvent alloc] initWithViewTag:self.reactTag progress:progress offset:top minY:self.minY maxY:self.maxY]];
 }
 
 - (void)startWatchBottomSheetTransition {
@@ -307,9 +353,9 @@
 }
 
 - (void)stopWatchBottomSheetTransition {
-    if ([self.state isEqualToString:@"collapsed"]) {
+    if (self.state == RNBottomSheetStateCollapsed) {
         [self dispatchOnSlide:self.maxY];
-    } else if ([self.state isEqualToString:@"expanded"]) {
+    } else if (self.state == RNBottomSheetStateExpanded) {
         [self dispatchOnSlide:self.minY];
     }
     if(_displayLink){
@@ -319,7 +365,7 @@
 }
 
 - (void)watchBottomSheetTransition {
-    CGFloat top = [self.layer presentationLayer].frame.origin.y;
+    CGFloat top = [self.contentView.layer presentationLayer].frame.origin.y;
     [self dispatchOnSlide:top];
 }
     

package/ios/BottomSheet/RNBottomSheetManager.m

@@ -1,18 +1,23 @@
 #import "RNBottomSheetManager.h"
 #import "RNBottomSheet.h"
+#import "RNBottomSheetState.h"
 
 @implementation RNBottomSheetManager
 
 RCT_EXPORT_MODULE(BottomSheet)
 
 - (UIView *)view {
-    return [RNBottomSheet new];
+    RNBottomSheet *bottomSheet = [[RNBottomSheet alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
+    bottomSheet.pointerEvents = RCTPointerEventsBoxNone;
+    return bottomSheet;
 }
 
 RCT_EXPORT_VIEW_PROPERTY(onSlide, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onStateChanged, RCTDirectEventBlock)
-
 RCT_EXPORT_VIEW_PROPERTY(peekHeight, CGFloat)
-RCT_EXPORT_VIEW_PROPERTY(state, NSString)
+
+RCT_CUSTOM_VIEW_PROPERTY(state, NSString, RNBottomSheet) {
+    view.state = RNBottomSheetStateFromString([RCTConvert NSString:json]);
+}
 
 @end

package/ios/BottomSheet/RNBottomSheetOffsetChangedEvent.h

@@ -0,0 +1,11 @@
+#import <React/RCTEventDispatcherProtocol.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNBottomSheetOffsetChangedEvent : NSObject <RCTEvent>
+
+- (instancetype)initWithViewTag:(NSNumber *)viewTag progress:(CGFloat)progress offset:(CGFloat)offset minY:(CGFloat)minY maxY:(CGFloat)maxY;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/BottomSheet/RNBottomSheetOffsetChangedEvent.m

@@ -0,0 +1,58 @@
+#import "RNBottomSheetOffsetChangedEvent.h"
+
+@interface RNBottomSheetOffsetChangedEvent ()
+
+@property (nonatomic, assign) CGFloat progress;
+@property (nonatomic, assign) CGFloat offest;
+@property (nonatomic, assign) CGFloat minY;
+@property (nonatomic, assign) CGFloat maxY;
+
+@end
+
+@implementation RNBottomSheetOffsetChangedEvent
+
+@synthesize viewTag = _viewTag;
+
++ (NSString *)moduleDotMethod {
+    return @"RCTEventEmitter.receiveEvent";
+}
+
+RCT_NOT_IMPLEMENTED(- (instancetype)init)
+- (instancetype)initWithViewTag:(NSNumber *)viewTag progress:(CGFloat)progress offset:(CGFloat)offset minY:(CGFloat)minY maxY:(CGFloat)maxY {
+    if (self = [super init]) {
+        _viewTag = viewTag;
+        _progress = progress;
+        _offest = offset;
+        _minY = minY;
+        _maxY = maxY;
+    }
+    return self;
+}
+
+- (NSString *)eventName {
+    return @"onSlide";
+}
+
+- (BOOL)canCoalesce {
+    return YES;
+}
+
+- (uint16_t)coalescingKey {
+    return 0;
+}
+
+- (NSArray *)arguments {
+    return @[self.viewTag, RCTNormalizeInputEventName(self.eventName), @{
+                @"progress": @(self.progress),
+                @"offset": @(self.offest),
+                @"expandedOffset": @(self.minY),
+                @"collapsedOffset": @(self.maxY)
+            }];
+}
+
+- (id<RCTEvent>)coalesceWithEvent:(id<RCTEvent>)newEvent {
+    return newEvent;
+}
+
+
+@end

package/ios/BottomSheet/RNBottomSheetState.h

@@ -0,0 +1,17 @@
+#import <React/RCTUtils.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+typedef NS_ENUM(NSUInteger, RNBottomSheetState) {
+    RNBottomSheetStateCollapsed = 0,
+    RNBottomSheetStateExpanded,
+    RNBottomSheetStateHidden,
+    RNBottomSheetStateDragging,
+    RNBottomSheetStateSettling,
+};
+
+RCT_EXTERN RNBottomSheetState RNBottomSheetStateFromString(NSString *state);
+
+RCT_EXTERN NSString* RNBottomSheetStateToString(RNBottomSheetState state);
+    
+NS_ASSUME_NONNULL_END

package/ios/BottomSheet/RNBottomSheetState.m

@@ -0,0 +1,38 @@
+#import "RNBottomSheetState.h"
+
+RNBottomSheetState RNBottomSheetStateFromString(NSString *state) {
+    if ([state isEqualToString:@"collapsed"]) {
+        return RNBottomSheetStateCollapsed;
+    }
+    if ([state isEqualToString:@"expanded"]) {
+        return RNBottomSheetStateExpanded;
+    }
+    if ([state isEqualToString:@"settling"]) {
+        return RNBottomSheetStateSettling;
+    }
+    if ([state isEqualToString:@"dragging"]) {
+        return RNBottomSheetStateDragging;
+    }
+    return RNBottomSheetStateHidden;
+}
+
+
+NSString* RNBottomSheetStateToString(RNBottomSheetState state) {
+    if (state == RNBottomSheetStateCollapsed) {
+        return @"collapsed";
+    }
+    
+    if (state == RNBottomSheetStateExpanded) {
+        return @"expanded";
+    }
+    
+    if (state == RNBottomSheetStateSettling) {
+        return @"settling";
+    }
+    
+    if (state == RNBottomSheetStateDragging) {
+        return @"dragging";
+    }
+    
+    return @"hidden";
+}

package/ios/BottomSheet/RNBottomSheetStateChangedEvent.h

@@ -0,0 +1,13 @@
+#import <React/RCTEventDispatcherProtocol.h>
+
+#import "RNBottomSheetState.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNBottomSheetStateChangedEvent : NSObject <RCTEvent>
+
+- (instancetype)initWithViewTag:(NSNumber *)viewTag state:(RNBottomSheetState)state;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/BottomSheet/RNBottomSheetStateChangedEvent.m

@@ -0,0 +1,50 @@
+#import "RNBottomSheetStateChangedEvent.h"
+
+static uint16_t _coalescingKey = 0;
+
+@interface RNBottomSheetStateChangedEvent ()
+
+@property (nonatomic, assign) RNBottomSheetState state;
+
+@end
+
+@implementation RNBottomSheetStateChangedEvent
+
+@synthesize viewTag = _viewTag;
+
++ (NSString *)moduleDotMethod {
+    return @"RCTEventEmitter.receiveEvent";
+}
+
+RCT_NOT_IMPLEMENTED(- (instancetype)init)
+- (instancetype)initWithViewTag:(NSNumber *)viewTag state:(RNBottomSheetState)state {
+    if (self = [super init]) {
+        _viewTag = viewTag;
+        _state = state;
+    }
+    return self;
+}
+
+- (NSString *)eventName {
+    return @"onStateChanged";
+}
+
+- (BOOL)canCoalesce {
+    return NO;
+}
+
+- (uint16_t)coalescingKey {
+    return _coalescingKey++;
+}
+
+- (NSArray *)arguments {
+    return @[self.viewTag, RCTNormalizeInputEventName(self.eventName), @{
+                @"state": RNBottomSheetStateToString(self.state)
+            }];
+}
+
+- (id<RCTEvent>)coalesceWithEvent:(id<RCTEvent>)newEvent {
+    return newEvent;
+}
+
+@end

package/lib/index.d.ts

@@ -15,6 +15,7 @@ interface NativeBottomSheetProps extends ViewProps {
     onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
     peekHeight?: number;
     state?: BottomSheetState;
+    contentContainerStyle?: ViewProps['style'];
 }
 declare const BottomSheet: React.ForwardRefExoticComponent<NativeBottomSheetProps & {
     fitToContents?: boolean | undefined;

package/lib/index.js

@@ -1,24 +1,15 @@
 import React from 'react';
-import { Platform, 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, children, peekHeight = 200, state = 'collapsed', fitToContents, ...rest } = props;
+    const { style, contentContainerStyle, children, peekHeight = 200, state = 'collapsed', fitToContents, ...rest } = props;
     const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style));
-    if (Platform.OS === 'android') {
-        return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} state={state} {...rest} ref={ref}>
-        <View style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner]} collapsable={false}>
-          {children}
-        </View>
-      </NativeBottomSheet>);
-    }
-    else {
-        return (<View style={[StyleSheet.absoluteFill, outer]} pointerEvents="box-none">
-        <NativeBottomSheet style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner]} peekHeight={peekHeight} state={state} {...rest} ref={ref}>
-          {children}
-        </NativeBottomSheet>
-      </View>);
-    }
+    return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} state={state} {...rest} ref={ref}>
+      <View style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner, contentContainerStyle]} collapsable={false}>
+        {children}
+      </View>
+    </NativeBottomSheet>);
 });
 const styles = StyleSheet.create({
     fitToContents: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sdcx/bottom-sheet",
   "description": "A react-native BottomSheet component.",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
   "react-native": "src/index",

package/src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { NativeSyntheticEvent, Platform, requireNativeComponent, StyleSheet, View, ViewProps } from 'react-native'
+import { NativeSyntheticEvent, requireNativeComponent, StyleSheet, View, ViewProps } from 'react-native'
 import splitLayoutProps from './splitLayoutProps'
 
 export interface OffsetChangedEventData {
@@ -20,6 +20,7 @@ interface NativeBottomSheetProps extends ViewProps {
   onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void
   peekHeight?: number
   state?: BottomSheetState
+  contentContainerStyle?: ViewProps['style']
 }
 
 type BottomSheetProps = NativeBottomSheetProps & {
@@ -31,36 +32,30 @@ const NativeBottomSheet = requireNativeComponent<NativeBottomSheetProps>('Bottom
 type NativeBottomSheetInstance = InstanceType<typeof NativeBottomSheet>
 
 const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps>((props, ref) => {
-  const { style, children, peekHeight = 200, state = 'collapsed', fitToContents, ...rest } = props
+  const {
+    style,
+    contentContainerStyle,
+    children,
+    peekHeight = 200,
+    state = 'collapsed',
+    fitToContents,
+    ...rest
+  } = props
   const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style))
-
-  if (Platform.OS === 'android') {
-    return (
-      <NativeBottomSheet
-        style={[StyleSheet.absoluteFill, outer]}
-        peekHeight={peekHeight}
-        state={state}
-        {...rest}
-        ref={ref}>
-        <View style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner]} collapsable={false}>
-          {children}
-        </View>
-      </NativeBottomSheet>
-    )
-  } else {
-    return (
-      <View style={[StyleSheet.absoluteFill, outer]} pointerEvents="box-none">
-        <NativeBottomSheet
-          style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner]}
-          peekHeight={peekHeight}
-          state={state}
-          {...rest}
-          ref={ref}>
-          {children}
-        </NativeBottomSheet>
+  return (
+    <NativeBottomSheet
+      style={[StyleSheet.absoluteFill, outer]}
+      peekHeight={peekHeight}
+      state={state}
+      {...rest}
+      ref={ref}>
+      <View
+        style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner, contentContainerStyle]}
+        collapsable={false}>
+        {children}
       </View>
-    )
-  }
+    </NativeBottomSheet>
+  )
 })
 
 const styles = StyleSheet.create({