@swmansion/react-native-bottom-sheet 0.7.0-next.8 → 0.7.1

package/README.md

@@ -7,6 +7,15 @@
 React Native Bottom Sheet provides bottom‍-‍sheet components for
 React Native.
 
+## Highlights
+
+- Native implementation for optimal performance.
+- Bring your own sheet surface.
+- Dynamic, content‍-‍based sizing out of the box.
+- Position tracking for driving UI tied to sheets.
+- Programmatic‍-‍only detents for snap points unreachable
+  by dragging.
+
 ## Getting started
 
 1. Install React Native Bottom Sheet:
@@ -15,20 +24,16 @@ React Native.
    npm i @swmansion/react-native-bottom-sheet
    ```
 
-2. Ensure the peer dependencies are installed:
+2. Ensure the peer dependency is installed:
 
    ```sh
-   npm i react-native-gesture-handler@^2.14.0 react-native-reanimated@^3.16.0 react-native-safe-area-context@^4.0.0 react-native-worklets@^0.4.0
+   npm i react-native-safe-area-context@^4.0.0
    ```
 
-3. Wrap your app with `GestureHandlerRootView` and `BottomSheetProvider`:
+3. Wrap your app with `BottomSheetProvider`:
 
    ```tsx
-   const App = () => (
-     <GestureHandlerRootView>
-       <BottomSheetProvider>{/* ... */}</BottomSheetProvider>
-     </GestureHandlerRootView>
-   );
+   const App = () => <BottomSheetProvider>{/* ... */}</BottomSheetProvider>;
    ```
 
 ## Usage
@@ -86,22 +91,14 @@ const insets = useSafeAreaInsets();
 
 #### Scrim
 
-Tapping the scrim collapses the sheet. You can provide a custom scrim via the
-`scrim` prop, which receives a `SharedValue` that goes from 0 when collapsed to
-1 when the first nonzero detent is&nbsp;reached:
+Tapping the scrim collapses the sheet. Use `scrimColor` to customize
+its&nbsp;color:
 
 ```tsx
 <ModalBottomSheet
   index={index}
   onIndexChange={setIndex}
-  scrim={(progress) => (
-    <Animated.View
-      style={useAnimatedStyle(() => ({
-        backgroundColor: `rgba(0, 0, 255, ${0.3 * progress.value})`,
-        flex: 1,
-      }))}
-    />
-  )}
+  scrimColor="rgba(0, 0, 0, 0.3)"
 >
   {/* ... */}
 </ModalBottomSheet>
@@ -115,8 +112,8 @@ available screen height). The default detents are `[0, 'max']`.
 
 The `index` prop is a zero&zwj;-&zwj;based index into the `detents` array.
 `onIndexChange` is called when the sheet snaps to a different detent after
-a&nbsp;drag. You can also control the sheet externally by updating the index
-state.
+a drag. You can also control the sheet externally by updating the
+index&nbsp;state.
 
 ```tsx
 const [index, setIndex] = useState(0);
@@ -150,55 +147,38 @@ drag snapping but can still be targeted via `index`&nbsp;updates.
 
 ### Position tracking
 
-The `position` prop accepts a `SharedValue` that the library keeps in sync with
-the sheet’s current position (the distance in pixels from the bottom of the
-screen to the top of the sheet). Use it to drive animations tied to the
-sheet&nbsp;position.
-
-```tsx
-const position = useSharedValue(0);
-```
+Use `onPositionChange` to observe the sheet’s current position (the distance in
+pixels from the bottom of the screen to the top of the&nbsp;sheet).
 
 ```tsx
 <BottomSheet // Or `ModalBottomSheet`.
   index={index}
   onIndexChange={setIndex}
-  position={position}
+  onPositionChange={(position) => {
+    console.log(position);
+  }}
 >
   {/* ... */}
 </BottomSheet>
 ```
 
-### Customizing animations
-
-Use the `openAnimationConfig` and `closeAnimationConfig` props to tweak the
-spring parameters for opening and&nbsp;closing.
-
-### Scrollable content
-
-For scrollable sheet content, use `BottomSheetScrollView` or
-`BottomSheetFlatList` instead of the standard React Native components. These
-integrate scrolling with the sheet’s drag gesture so that dragging down while
-scrolled to the top collapses the&nbsp;sheet.
-
-If you need a custom scrollable (for example, a `FlashList`), wrap it with
-`bottomSheetScrollable`. The returned component forwards the underlying
-scrollable ref, so you can call any imperative methods supported by the
-wrapped&nbsp;component.
+If you want to keep the latest position in a Reanimated shared value, update it
+from the&nbsp;callback:
 
 ```tsx
-const BottomSheetFlashList = bottomSheetScrollable<
-  FlashListProps<string>,
-  FlashListRef<string>
->(FlashList);
-```
-
-```tsx
-const listRef = useRef<FlashListRef<string>>(null);
+const position = useSharedValue(0);
 ```
 
 ```tsx
-<BottomSheetFlashList ref={listRef} /* ... */ />
+<BottomSheet
+  index={index}
+  onIndexChange={setIndex}
+  onPositionChange={(nextPosition) => {
+    position.value = nextPosition;
+  }}
+>
+  {/* ... */}
+</BottomSheet>;
 ```
 
 ## By [Software Mansion](https://swmansion.com)

package/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetView.kt

@@ -15,6 +15,7 @@ import com.facebook.react.bridge.Arguments
 import com.facebook.react.uimanager.PointerEvents
 import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.views.view.ReactViewGroup
+import com.facebook.react.uimanager.events.NativeGestureUtil
 import kotlin.math.abs
 
 private data class DetentSpec(val height: Float, val programmatic: Boolean)
@@ -218,7 +219,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private var lastShadowOffsetY = Float.NaN
 
   private fun updateShadowState(translationY: Float) {
-    val offsetY = (translationY / density).toDouble()
+    val maxDetentHeight = detentSpecs.lastOrNull()?.height ?: height.toFloat()
+    val containerTop = height.toFloat() - maxDetentHeight
+    val offsetY = ((containerTop + translationY) / density).toDouble()
     if (offsetY.toFloat() == lastShadowOffsetY) return
     lastShadowOffsetY = offsetY.toFloat()
     val sw = stateWrapper ?: return
@@ -320,21 +323,24 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
         val dx = x - initialTouchX
         val dy = y - initialTouchY
 
-        if (abs(dy) > touchSlop && abs(dy) > abs(dx)) {
+        if (abs(dy) > touchSlop && abs(dy) > abs(dx) && draggableMinTy < draggableMaxTy) {
           if (!isAtMaxDraggable) {
             lastTouchY = y
             requestDisallowInterceptTouchEvent(false)
+            NativeGestureUtil.notifyNativeGestureStarted(this, ev)
             return true
           }
           if (dy > 0 && isScrollViewAtTop()) {
             lastTouchY = y
             requestDisallowInterceptTouchEvent(false)
+            NativeGestureUtil.notifyNativeGestureStarted(this, ev)
             return true
           }
         }
       }
       MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
         initialTouchX = 0f
+        initialTouchY = 0f
         activePointerId = MotionEvent.INVALID_POINTER_ID
       }
     }
@@ -342,16 +348,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   }
 
   override fun onTouchEvent(event: MotionEvent): Boolean {
-    val sheetTop = sheetContainer.top + sheetContainer.translationY
-    if (event.actionMasked == MotionEvent.ACTION_DOWN && event.y < sheetTop) {
-      return false
-    }
-
     when (event.actionMasked) {
-      MotionEvent.ACTION_DOWN -> {
-        beginPan(event)
-        return true
-      }
       MotionEvent.ACTION_MOVE -> {
         if (!isPanning) beginPan(event)
         val pointerIndex = event.findPointerIndex(activePointerId)
@@ -385,9 +382,10 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
       MotionEvent.ACTION_POINTER_UP -> {
         val actionIndex = event.actionIndex
         if (event.getPointerId(actionIndex) == activePointerId) {
-          val newIndex = if (actionIndex == 0) 1 else 0
-          activePointerId = event.getPointerId(newIndex)
-          lastTouchY = event.getY(newIndex)
+          val newPointerIndex = if (actionIndex == 0) 1 else 0
+          activePointerId = event.getPointerId(newPointerIndex)
+          lastTouchY = event.getY(newPointerIndex)
+          velocityTracker?.clear()
         }
         return true
       }

package/common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/BottomSheetStateHelper.h

@@ -0,0 +1,12 @@
+#pragma once
+
+#include <memory>
+#include <react/renderer/core/State.h>
+
+namespace facebook::react {
+
+void updateBottomSheetContentOffsetY(
+    const State::Shared& state,
+    float contentOffsetY);
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/BottomSheetViewShadowNode.cpp

@@ -1,28 +1,30 @@
+#include "BottomSheetStateHelper.h"
 #include "ShadowNodes.h"
 
-#include <yoga/Yoga.h>
-
 namespace facebook::react {
 
-void BottomSheetViewShadowNode::adjustLayoutWithState() {
-#ifdef ANDROID
-  ensureUnsealed();
-
+Point BottomSheetViewShadowNode::getContentOriginOffset(
+    bool /*includeTransform*/) const {
   auto state =
       std::static_pointer_cast<const BottomSheetViewShadowNode::ConcreteState>(
           getState());
-  auto stateData = state->getData();
-
-  auto adjustedStyle = getConcreteProps().yogaStyle;
-  auto newPaddingTop =
-      yoga::Style::Length::points(stateData.contentOffsetY);
+  return {0, state->getData().contentOffsetY};
+}
 
-  if (adjustedStyle.padding(yoga::Edge::Top) != newPaddingTop) {
-    adjustedStyle.setPadding(yoga::Edge::Top, newPaddingTop);
-    yogaNode_.setStyle(adjustedStyle);
-    yogaNode_.setDirty(true);
-  }
-#endif
+void updateBottomSheetContentOffsetY(
+    const State::Shared& state,
+    float contentOffsetY) {
+  auto concreteState =
+      std::static_pointer_cast<const BottomSheetViewShadowNode::ConcreteState>(
+          state);
+  concreteState->updateState(
+      [contentOffsetY](const BottomSheetViewState& /*oldState*/)
+          -> BottomSheetViewShadowNode::ConcreteState::SharedData {
+        auto newState = std::make_shared<BottomSheetViewState>();
+        const_cast<BottomSheetViewState&>(*newState).contentOffsetY =
+            contentOffsetY;
+        return newState;
+      });
 }
 
 } // namespace facebook::react

package/common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/ComponentDescriptors.h

@@ -8,12 +8,6 @@ namespace facebook::react {
 class BottomSheetViewComponentDescriptor final
     : public ConcreteComponentDescriptor<BottomSheetViewShadowNode> {
   using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
-
-  void adopt(ShadowNode& shadowNode) const override {
-    auto& node = static_cast<BottomSheetViewShadowNode&>(shadowNode);
-    node.adjustLayoutWithState();
-    ConcreteComponentDescriptor::adopt(shadowNode);
-  }
 };
 
 } // namespace facebook::react

package/common/cpp/react/renderer/components/ReactNativeBottomSheetSpec/ShadowNodes.h

@@ -19,7 +19,7 @@ class JSI_EXPORT BottomSheetViewShadowNode final
   using ConcreteViewShadowNode::ConcreteViewShadowNode;
 
  public:
-  void adjustLayoutWithState();
+  Point getContentOriginOffset(bool includeTransform) const override;
 };
 
 } // namespace facebook::react

package/ios/BottomSheetComponentView.mm

@@ -3,6 +3,7 @@
 
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
+#import <react/renderer/components/ReactNativeBottomSheetSpec/BottomSheetStateHelper.h>
 #import <react/renderer/components/ReactNativeBottomSheetSpec/ComponentDescriptors.h>
 #import <react/renderer/components/ReactNativeBottomSheetSpec/EventEmitters.h>
 #import <react/renderer/components/ReactNativeBottomSheetSpec/Props.h>
@@ -15,6 +16,8 @@ using namespace facebook::react;
 
 @implementation BottomSheetComponentView {
   BottomSheetContentView *_sheetView;
+  State::Shared _sheetState;
+  float _lastContentOffsetY;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -64,6 +67,11 @@ using namespace facebook::react;
   [super updateProps:props oldProps:oldProps];
 }
 
+- (void)updateState:(const State::Shared &)state oldState:(const State::Shared &)oldState
+{
+  _sheetState = state;
+}
+
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
   [_sheetView mountChildComponentView:childComponentView atIndex:index];
@@ -90,12 +98,24 @@ using namespace facebook::react;
     auto emitter = std::static_pointer_cast<const BottomSheetViewEventEmitter>(_eventEmitter);
     emitter->onPositionChange({.position = static_cast<double>(position)});
   }
+
+  float contentOffsetY = static_cast<float>(self.bounds.size.height - position);
+  if (contentOffsetY == _lastContentOffsetY) {
+    return;
+  }
+  _lastContentOffsetY = contentOffsetY;
+
+  if (_sheetState) {
+    updateBottomSheetContentOffsetY(_sheetState, contentOffsetY);
+  }
 }
 
 - (void)prepareForRecycle
 {
   [super prepareForRecycle];
   [_sheetView resetSheetState];
+  _sheetState.reset();
+  _lastContentOffsetY = 0;
 }
 
 @end

package/ios/RNSBottomSheetHostingView.swift

@@ -43,7 +43,7 @@ public final class RNSBottomSheetHostingView: UIView {
     panGesture.delegate = self
     panGesture.cancelsTouchesInView = true
     panGesture.delaysTouchesBegan = true
-    panGesture.delaysTouchesEnded = true
+    panGesture.delaysTouchesEnded = false
     sheetContainer.addGestureRecognizer(panGesture)
   }
 
@@ -258,13 +258,21 @@ public final class RNSBottomSheetHostingView: UIView {
       sheetContainer.transform = CGAffineTransform(translationX: 0, y: newTy)
       emitPosition()
 
-    case .ended, .cancelled:
+    case .ended:
       isPanning = false
       let velocity = gesture.velocity(in: self).y
       let currentHeight = maxHeight - sheetContainer.transform.ty
       let index = bestSnapIndex(for: currentHeight, velocity: velocity)
       snapToIndex(index, velocity: velocity)
 
+    case .cancelled:
+      isPanning = false
+      setContentInteractionEnabled(true)
+      let cancelVelocity = gesture.velocity(in: self).y
+      let cancelHeight = maxHeight - sheetContainer.transform.ty
+      let cancelIndex = bestSnapIndex(for: cancelHeight, velocity: cancelVelocity)
+      snapToIndex(cancelIndex, velocity: cancelVelocity)
+
     case .failed:
       isPanning = false
       setContentInteractionEnabled(true)
@@ -312,7 +320,10 @@ public final class RNSBottomSheetHostingView: UIView {
     let velocity = panGesture.velocity(in: self)
     guard abs(velocity.y) > abs(velocity.x) else { return false }
 
-    let maxDraggableIndex = detentSpecs.indices.last(where: { !detentSpecs[$0].programmatic }) ?? 0
+    let draggable = detentSpecs.enumerated().filter { !$0.element.programmatic }
+    guard draggable.count > 1 else { return false }
+
+    let maxDraggableIndex = draggable.last?.offset ?? 0
     guard targetIndex >= maxDraggableIndex else { return true }
 
     if velocity.y < 0 {
@@ -325,24 +336,12 @@ public final class RNSBottomSheetHostingView: UIView {
 }
 
 extension RNSBottomSheetHostingView: UIGestureRecognizerDelegate {
-  public func gestureRecognizer(
-    _ gestureRecognizer: UIGestureRecognizer,
-    shouldRequireFailureOf other: UIGestureRecognizer
-  ) -> Bool {
-    guard gestureRecognizer === panGesture else { return false }
-
-    if other is UITapGestureRecognizer {
-      return true
-    }
-
-    return false
-  }
-
   public func gestureRecognizer(
     _ gestureRecognizer: UIGestureRecognizer,
     shouldBeRequiredToFailBy other: UIGestureRecognizer
   ) -> Bool {
-    return gestureRecognizer === panGesture && other is UIPanGestureRecognizer
+    guard gestureRecognizer === panGesture else { return false }
+    return other is UIPanGestureRecognizer || other is UITapGestureRecognizer
   }
 
   public func gestureRecognizer(

package/lib/module/BottomSheet.js

@@ -39,6 +39,7 @@ export const BottomSheet = ({
   const [contentHeight, setContentHeight] = useState(0);
   const currentPositionRef = useRef(0);
   const scrimProgress = useRef(new Animated.Value(0)).current;
+  const sheetOpacity = useRef(new Animated.Value(0)).current;
   const resolvedDetents = detents.map(detent => {
     const value = resolveDetent(detent, contentHeight, maxHeight);
     return {
@@ -51,7 +52,6 @@ export const BottomSheet = ({
   };
   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 scrimPressEnabledRef = useRef(!modal || isCollapsed);
   const previousIsCollapsedRef = useRef(isCollapsed);
   const firstNonzeroDetent = resolvedDetents.find(detent => detent.height > 0)?.height ?? 0;
@@ -85,6 +85,7 @@ export const BottomSheet = ({
     currentPositionRef.current = height;
     const progress = firstNonzeroDetent <= 0 ? 0 : Math.min(1, Math.max(0, height / firstNonzeroDetent));
     scrimProgress.setValue(progress);
+    sheetOpacity.setValue(height === 0 ? 0 : 1);
     onPositionChange?.(height);
   };
   const closedIndex = resolvedDetents.findIndex(detent => detent.height === 0);
@@ -105,11 +106,13 @@ export const BottomSheet = ({
       style: StyleSheet.absoluteFill,
       onPress: handleScrimPress,
       children: scrimElement
-    }) : null, /*#__PURE__*/_jsx(View, {
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "box-none",
-      style: StyleSheet.absoluteFill,
+      style: [StyleSheet.absoluteFill, {
+        opacity: sheetOpacity
+      }],
       children: /*#__PURE__*/_jsx(BottomSheetNativeComponent, {
-        pointerEvents: sheetPointerEvents,
+        pointerEvents: "box-none",
         style: [{
           position: 'absolute',
           left: 0,
@@ -127,7 +130,6 @@ export const BottomSheet = ({
           style: {
             flex: 1
           },
-          pointerEvents: "box-none",
           children: [children, /*#__PURE__*/_jsx(View, {
             onLayout: handleSentinelLayout,
             pointerEvents: "none"

package/lib/module/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","useState","Animated","Pressable","StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","Portal","resolveDetent","jsx","_jsx","jsxs","_jsxs","programmatic","DefaultScrim","progress","color","style","absoluteFill","flex","backgroundColor","opacity","BottomSheet","children","detents","index","animateIn","onIndexChange","onPositionChange","modal","scrimColor","height","screenHeight","insets","maxHeight","top","contentHeight","setContentHeight","currentPositionRef","scrimProgress","Value","current","resolvedDetents","map","detent","value","Math","max","min","isDetentProgrammatic","handleSentinelLayout","event","nativeEvent","layout","y","clampedIndex","length","isCollapsed","sheetPointerEvents","scrimPressEnabledRef","previousIsCollapsedRef","firstNonzeroDetent","find","setValue","undefined","frame","requestAnimationFrame","cancelAnimationFrame","handleIndexChange","handlePositionChange","position","closedIndex","findIndex","handleScrimPress","scrimElement","sheet","pointerEvents","onPress","left","right","bottom","collapsable","onLayout"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useEffect","useRef","useState","Animated","Pressable","StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","Portal","resolveDetent","jsx","_jsx","jsxs","_jsxs","programmatic","DefaultScrim","progress","color","style","absoluteFill","flex","backgroundColor","opacity","BottomSheet","children","detents","index","animateIn","onIndexChange","onPositionChange","modal","scrimColor","height","screenHeight","insets","maxHeight","top","contentHeight","setContentHeight","currentPositionRef","scrimProgress","Value","current","sheetOpacity","resolvedDetents","map","detent","value","Math","max","min","isDetentProgrammatic","handleSentinelLayout","event","nativeEvent","layout","y","clampedIndex","length","isCollapsed","scrimPressEnabledRef","previousIsCollapsedRef","firstNonzeroDetent","find","setValue","undefined","frame","requestAnimationFrame","cancelAnimationFrame","handleIndexChange","handlePositionChange","position","closedIndex","findIndex","handleScrimPress","scrimElement","sheet","pointerEvents","onPress","left","right","bottom","collapsable","onLayout"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.7.0-next.8",
+  "version": "0.7.1",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/BottomSheet.tsx

@@ -61,6 +61,7 @@ export const BottomSheet = ({
   const [contentHeight, setContentHeight] = useState(0);
   const currentPositionRef = useRef(0);
   const scrimProgress = useRef(new Animated.Value(0)).current;
+  const sheetOpacity = useRef(new Animated.Value(0)).current;
 
   const resolvedDetents = detents.map((detent) => {
     const value = resolveDetent(detent, contentHeight, maxHeight);
@@ -76,7 +77,6 @@ export const BottomSheet = ({
 
   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 scrimPressEnabledRef = useRef(!modal || isCollapsed);
   const previousIsCollapsedRef = useRef(isCollapsed);
   const firstNonzeroDetent =
@@ -130,6 +130,7 @@ export const BottomSheet = ({
         ? 0
         : Math.min(1, Math.max(0, height / firstNonzeroDetent));
     scrimProgress.setValue(progress);
+    sheetOpacity.setValue(height === 0 ? 0 : 1);
     onPositionChange?.(height);
   };
 
@@ -162,9 +163,12 @@ export const BottomSheet = ({
           {scrimElement}
         </Pressable>
       ) : null}
-      <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[StyleSheet.absoluteFill, { opacity: sheetOpacity }]}
+      >
         <BottomSheetNativeComponent
-          pointerEvents={sheetPointerEvents}
+          pointerEvents="box-none"
           style={[
             {
               position: 'absolute',
@@ -181,16 +185,12 @@ export const BottomSheet = ({
           onIndexChange={handleIndexChange}
           onPositionChange={handlePositionChange}
         >
-          <View
-            collapsable={false}
-            style={{ flex: 1 }}
-            pointerEvents="box-none"
-          >
+          <View collapsable={false} style={{ flex: 1 }}>
             {children}
             <View onLayout={handleSentinelLayout} pointerEvents="none" />
           </View>
         </BottomSheetNativeComponent>
-      </View>
+      </Animated.View>
     </Animated.View>
   );