@swmansion/react-native-bottom-sheet 0.9.0 → 0.9.1

package/README.md

@@ -10,6 +10,7 @@ React Native.
 ## Highlights
 
 - Native implementation for optimal performance.
+- Both inline and modal sheet components.
 - Bring your own sheet surface.
 - Dynamic, content‍-‍based sizing out of the box.
 - Automatic handling of vertically scrollable children.
@@ -70,7 +71,8 @@ const insets = useSafeAreaInsets();
 
 ### Modal
 
-`ModalBottomSheet` renders above other content with a scrim.
+`ModalBottomSheet` renders above other content with an optional scrim
+(transparent by default).
 
 ```tsx
 const [index, setIndex] = useState(0);
@@ -106,6 +108,25 @@ its color:
 </ModalBottomSheet>
 ```
 
+### Scrollable negotiation
+
+By default, the sheet coordinates vertical gestures with nested scrollables,
+such as `ScrollView` and&nbsp;`FlatList`.
+
+If you want gestures that start inside a nested scrollable to stay with that
+scrollable even when it cannot scroll any further,
+set&nbsp;`disableScrollableNegotiation`:
+
+```tsx
+<BottomSheet
+  index={index}
+  onIndexChange={setIndex}
+  disableScrollableNegotiation
+>
+  {/* ... */}
+</BottomSheet>
+```
+
 ### Detents and index
 
 Detents are the points to which the sheet snaps. Each detent is either a number
@@ -139,6 +160,9 @@ const [index, setIndex] = useState(0);
 </BottomSheet>
 ```
 
+Detents can also change over time. When you update `detents`, the sheet keeps
+the current index and animates to the updated detent height when needed.
+
 #### Programmatic-only detents
 
 If you want a detent to be reachable only via code (not by dragging), use the
@@ -208,6 +232,6 @@ product&zwj;—&zwj;[hire&nbsp;us](https://swmansion.com/contact/projects?utm_so
 
 ## Sponsored by [Gobi Maps](https://www.gobimaps.com)
 
-A social map for exploring your&nbsp;city.
+The best of your city, all in one&nbsp;map.
 
 [<img src="gobi.png" height="80" />](https://www.gobimaps.com)

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

@@ -83,6 +83,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private var scrimTouchActive = false
   private var scrimColor = Color.TRANSPARENT
   private var scrimProgress = 0f
+  private var suppressScrimForClosingTarget = false
   private var maxDetentHeight = Float.NaN
   private var contentHeightMarker: View? = null
 
@@ -146,10 +147,10 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   // MARK: - Layout
 
-  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
-    super.onLayout(changed, l, t, r, b)
-    val w = r - l
-    val h = b - t
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    val w = right - left
+    val h = bottom - top
     if (w <= 0 || h <= 0) return
 
     refreshContentHeightMarker()
@@ -157,10 +158,21 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     layoutSheetContainer(w, h)
 
     if (!hasLaidOut && detentSpecs.isNotEmpty()) {
-      hasLaidOut = true
       val indexToApply = pendingIndex ?: targetIndex
+      val clampedIndex = indexToApply.coerceIn(0, detentSpecs.size - 1)
+
+      if (animateIn && isInvalidContentDetentTarget(clampedIndex)) {
+        targetIndex = clampedIndex
+        pendingIndex = clampedIndex
+        val closedTy = detentSpecs.maxOfOrNull { it.height } ?: h.toFloat()
+        sheetContainer.translationY = closedTy
+        emitPosition()
+        return
+      }
+
+      hasLaidOut = true
       pendingIndex = null
-      targetIndex = indexToApply.coerceIn(0, detentSpecs.size - 1)
+      targetIndex = clampedIndex
 
       if (animateIn) {
         val closedTy = detentSpecs.maxOfOrNull { it.height } ?: h.toFloat()
@@ -248,7 +260,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   private fun resolveDetentSpecs(): List<DetentSpec> {
     val maxHeight = resolvedMaxDetentHeight()
-    val contentHeight = currentContentHeight().takeIf { it.isFinite() && it > 0f } ?: maxHeight
+    val contentHeight = validContentHeight().takeIf { it.isFinite() } ?: maxHeight
     return rawDetentSpecs.map { spec ->
       val height =
         when (spec.kind) {
@@ -260,6 +272,11 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   }
 
   private fun refreshDetentsFromLayout() {
+    if (hasLaidOut && isInvalidContentDetentTarget(targetIndex)) {
+      updateScrim()
+      return
+    }
+
     val resolvedDetents = resolveDetentSpecs()
     if (resolvedDetents == detentSpecs) {
       updateScrim()
@@ -272,6 +289,10 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
       if (hasLaidOut && !isPanning) {
         targetIndex = targetIndex.coerceIn(0, detentSpecs.size - 1)
+        if (activeAnimation != null && isTargetingClosedDetent) {
+          suppressScrimForClosingTarget = true
+          hideScrim()
+        }
         if (activeAnimation != null) {
           val currentTy = sheetContainer.translationY
           val shouldEmitSettle = activeAnimationEmitsSettle
@@ -305,6 +326,15 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     return marker.top.toFloat()
   }
 
+  private fun validContentHeight(): Float {
+    return currentContentHeight().takeIf { it.isFinite() && it > 0f } ?: Float.NaN
+  }
+
+  private fun isInvalidContentDetentTarget(index: Int): Boolean {
+    return rawDetentSpecs.getOrNull(index)?.kind == DetentKind.CONTENT &&
+      !validContentHeight().isFinite()
+  }
+
   private fun refreshContentHeightMarker() {
     val marker = findContentHeightMarker()
     if (marker === contentHeightMarker) return
@@ -339,6 +369,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   private val firstNonZeroDetentHeight: Float
     get() = detentSpecs.firstOrNull { it.height > 0f }?.height ?: 0f
 
+  private val isTargetingClosedDetent: Boolean
+    get() = closedIndex?.let { targetIndex == it } == true
+
   private val draggableMinTy: Float
     get() {
       val highestIndex = detentSpecs.indices.lastOrNull { !detentSpecs[it].programmatic } ?: 0
@@ -413,6 +446,9 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
   ) {
     if (index < 0 || index >= detentSpecs.size) return
     targetIndex = index
+    if (!isTargetingClosedDetent) {
+      suppressScrimForClosingTarget = false
+    }
 
     val targetTy = translationY(index)
     activeAnimationEmitsSettle = emitSettle
@@ -433,9 +469,14 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
             return@addEndListener
           }
           stopChoreographer()
-          emitPosition()
           activeAnimation = null
           activeAnimationEmitsSettle = false
+          suppressScrimForClosingTarget = false
+          if (closedIndex == index) {
+            sheetContainer.translationY = translationY(index)
+            hideScrim()
+          }
+          emitPosition()
           updateInteractionState()
           if (emitIndexChange) listener?.onIndexChange(index)
           if (emitSettle) listener?.onSettle(index)
@@ -469,14 +510,14 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
 
   // MARK: - Touch handling
 
-  override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
+  override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
     val sheetTop = sheetContainer.top + sheetContainer.translationY
-    if (ev.actionMasked == MotionEvent.ACTION_DOWN && ev.y < sheetTop) {
+    if (event.actionMasked == MotionEvent.ACTION_DOWN && event.y < sheetTop) {
       if (isScrimVisible()) {
-        initialTouchX = ev.x
-        initialTouchY = ev.y
-        lastTouchY = ev.y
-        activePointerId = ev.getPointerId(0)
+        initialTouchX = event.x
+        initialTouchY = event.y
+        lastTouchY = event.y
+        activePointerId = event.getPointerId(0)
         scrimPressed = true
         scrimTouchActive = true
         return true
@@ -484,19 +525,19 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
       return false
     }
 
-    when (ev.actionMasked) {
+    when (event.actionMasked) {
       MotionEvent.ACTION_DOWN -> {
-        initialTouchX = ev.x
-        initialTouchY = ev.y
-        lastTouchY = ev.y
-        activePointerId = ev.getPointerId(0)
+        initialTouchX = event.x
+        initialTouchY = event.y
+        lastTouchY = event.y
+        activePointerId = event.getPointerId(0)
       }
       MotionEvent.ACTION_MOVE -> {
         if (activePointerId == MotionEvent.INVALID_POINTER_ID) return false
-        val pointerIndex = ev.findPointerIndex(activePointerId)
+        val pointerIndex = event.findPointerIndex(activePointerId)
         if (pointerIndex < 0) return false
-        val x = ev.getX(pointerIndex)
-        val y = ev.getY(pointerIndex)
+        val x = event.getX(pointerIndex)
+        val y = event.getY(pointerIndex)
         val dx = x - initialTouchX
         val dy = y - initialTouchY
 
@@ -511,13 +552,13 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
             // processes events at the root view level before onInterceptTouchEvent
             // runs, so without this the JS side never sees a cancel and Pressable
             // would still fire onPress.
-            NativeGestureUtil.notifyNativeGestureStarted(this, ev)
+            NativeGestureUtil.notifyNativeGestureStarted(this, event)
             return true
           }
           if (dy > 0 && isScrollViewAtTop()) {
             lastTouchY = y
             requestDisallowInterceptTouchEvent(false)
-            NativeGestureUtil.notifyNativeGestureStarted(this, ev)
+            NativeGestureUtil.notifyNativeGestureStarted(this, event)
             return true
           }
         }
@@ -716,6 +757,7 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     scrimTouchActive = false
     sheetContainer.translationY = 0f
     scrimProgress = 0f
+    suppressScrimForClosingTarget = false
     sheetContainer.removeAllViews()
     stateWrapper = null
     lastShadowOffsetY = Float.NaN
@@ -731,10 +773,10 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     // When settled at the closed detent, dynamic content updates can briefly
     // produce stale non-zero positions. Keep scrim hidden in this state.
     if (
-      closedIndex != null && targetIndex == closedIndex && activeAnimation == null && !isPanning
+      (isTargetingClosedDetent && activeAnimation == null && !isPanning) ||
+        (suppressScrimForClosingTarget && isTargetingClosedDetent)
     ) {
-      scrimProgress = 0f
-      invalidate()
+      hideScrim()
       return
     }
 
@@ -743,6 +785,11 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
     invalidate()
   }
 
+  private fun hideScrim() {
+    scrimProgress = 0f
+    invalidate()
+  }
+
   private fun updateInteractionState() {
     pointerEvents =
       if (modal && (activeAnimation != null || isPanning || isScrimVisible())) {

package/ios/RNSBottomSheetHostingView.swift

@@ -127,10 +127,21 @@ public final class RNSBottomSheetHostingView: UIView {
     sheetContainer.center = CGPoint(x: bounds.width / 2, y: bounds.height - maxHeight / 2)
 
     if !hasLaidOut && !detentSpecs.isEmpty {
-      hasLaidOut = true
       let indexToApply = pendingIndex ?? targetIndex
+      let clampedIndex = max(0, min(detentSpecs.count - 1, indexToApply))
+
+      if animateIn && isInvalidContentDetentTarget(clampedIndex) {
+        targetIndex = clampedIndex
+        pendingIndex = clampedIndex
+        let closedTy = maximumResolvedDetentHeight ?? bounds.height
+        sheetContainer.transform = CGAffineTransform(translationX: 0, y: closedTy)
+        emitPosition()
+        return
+      }
+
+      hasLaidOut = true
       pendingIndex = nil
-      targetIndex = max(0, min(detentSpecs.count - 1, indexToApply))
+      targetIndex = clampedIndex
 
       if animateIn {
         let closedTy = maximumResolvedDetentHeight ?? bounds.height
@@ -529,7 +540,7 @@ public final class RNSBottomSheetHostingView: UIView {
 
   private func resolveDetentSpecs() -> [DetentSpec] {
     let maxHeight = resolvedMaxDetentHeight
-    let contentHeight = currentContentHeight.map { min($0, maxHeight) } ?? maxHeight
+    let contentHeight = validContentHeight.map { min($0, maxHeight) } ?? maxHeight
     return rawDetentSpecs.map { spec in
       let height: CGFloat
       switch spec.kind {
@@ -544,6 +555,11 @@ public final class RNSBottomSheetHostingView: UIView {
 
   private func refreshDetentsFromLayout() {
     refreshContentHeightMarker()
+    if hasLaidOut, isInvalidContentDetentTarget(targetIndex) {
+      updateScrim()
+      return
+    }
+
     let resolvedDetents = resolveDetentSpecs()
     guard resolvedDetents != detentSpecs else {
       updateScrim()
@@ -598,6 +614,25 @@ public final class RNSBottomSheetHostingView: UIView {
     guard let marker = contentHeightMarker else { return nil }
     return marker.frame.minY.isFinite ? marker.frame.minY : nil
   }
+
+  private var validContentHeight: CGFloat? {
+    guard let height = currentContentHeight, height.isFinite, height > 0 else {
+      return nil
+    }
+    return height
+  }
+
+  private func isInvalidContentDetentTarget(_ index: Int) -> Bool {
+    guard rawDetentSpecs.indices.contains(index) else {
+      return false
+    }
+    switch rawDetentSpecs[index].kind {
+    case .points:
+      return false
+    case .content:
+      return validContentHeight == nil
+    }
+  }
 }
 
 extension RNSBottomSheetHostingView: UIGestureRecognizerDelegate {

package/lib/module/BottomSheetProvider.js

@@ -1,16 +1,13 @@
 "use strict";
 
-import { createContext, useContext, useEffect, useId, useReducer, useState } from 'react';
+import { createContext, useContext, useId, useLayoutEffect, useState, useSyncExternalStore } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PortalContext = /*#__PURE__*/createContext(null);
 const PortalHost = () => {
   const context = useContext(PortalContext);
-  const [, forceRender] = useReducer(x => x + 1, 0);
-  useEffect(() => {
-    return context.subscribe(forceRender);
-  }, [context]);
-  return Array.from(context.getPortals().entries()).map(([key, element]) => /*#__PURE__*/_jsx(View, {
+  const portals = useSyncExternalStore(context.subscribe, context.getSnapshot, context.getSnapshot);
+  return portals.map(([key, element]) => /*#__PURE__*/_jsx(View, {
     style: StyleSheet.absoluteFill,
     pointerEvents: "box-none",
     children: element
@@ -24,7 +21,9 @@ export const BottomSheetProvider = ({
   const [context] = useState(() => {
     const portals = new Map();
     const subscribers = new Set();
+    let snapshot = [];
     const notify = () => {
+      snapshot = Array.from(portals.entries());
       subscribers.forEach(subscriber => subscriber());
     };
     return {
@@ -42,7 +41,7 @@ export const BottomSheetProvider = ({
           subscribers.delete(callback);
         };
       },
-      getPortals: () => portals
+      getSnapshot: () => snapshot
     };
   });
   return /*#__PURE__*/_jsxs(PortalContext.Provider, {
@@ -62,10 +61,10 @@ export const Portal = ({
     removePortal
   } = context;
   const id = useId();
-  useEffect(() => {
+  useLayoutEffect(() => {
     addPortal(id, children);
   }, [id, children, addPortal]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     return () => {
       removePortal(id);
     };

package/lib/module/BottomSheetProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContext","useEffect","useId","useReducer","useState","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","PortalContext","PortalHost","context","forceRender","x","subscribe","Array","from","getPortals","entries","map","key","element","style","absoluteFill","pointerEvents","children","BottomSheetProvider","portals","Map","subscribers","Set","notify","forEach","subscriber","addPortal","set","removePortal","delete","callback","add","Provider","value","Portal","Error","id"],"sourceRoot":"../../src","sources":["BottomSheetProvider.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createContext","useContext","useId","useLayoutEffect","useState","useSyncExternalStore","StyleSheet","View","jsx","_jsx","jsxs","_jsxs","PortalContext","PortalHost","context","portals","subscribe","getSnapshot","map","key","element","style","absoluteFill","pointerEvents","children","BottomSheetProvider","Map","subscribers","Set","snapshot","notify","Array","from","entries","forEach","subscriber","addPortal","set","removePortal","delete","callback","add","Provider","value","Portal","Error","id"],"sourceRoot":"../../src","sources":["BottomSheetProvider.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetProvider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BvC,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAgCxE,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,SAkB3D,CAAC"}
+{"version":3,"file":"BottomSheetProvider.d.ts","sourceRoot":"","sources":["../../../src/BottomSheetProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA6BvC,iEAAiE;AACjE,eAAO,MAAM,mBAAmB,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAkCxE,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,SAkB3D,CAAC"}

package/package.json

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

package/src/BottomSheetProvider.tsx

@@ -1,31 +1,34 @@
 import {
   createContext,
   useContext,
-  useEffect,
   useId,
-  useReducer,
+  useLayoutEffect,
   useState,
+  useSyncExternalStore,
 } from 'react';
 import type { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+type PortalSnapshot = Array<[string, ReactNode]>;
+
 interface PortalContextType {
   addPortal: (key: string, element: ReactNode) => void;
   removePortal: (key: string) => void;
   subscribe: (callback: () => void) => () => void;
-  getPortals: () => Map<string, ReactNode>;
+  getSnapshot: () => PortalSnapshot;
 }
 
 const PortalContext = createContext<PortalContextType | null>(null);
 
 const PortalHost = () => {
   const context = useContext(PortalContext)!;
-  const [, forceRender] = useReducer((x: number) => x + 1, 0);
-  useEffect(() => {
-    return context.subscribe(forceRender);
-  }, [context]);
+  const portals = useSyncExternalStore(
+    context.subscribe,
+    context.getSnapshot,
+    context.getSnapshot
+  );
 
-  return Array.from(context.getPortals().entries()).map(([key, element]) => (
+  return portals.map(([key, element]) => (
     <View key={key} style={StyleSheet.absoluteFill} pointerEvents="box-none">
       {element}
     </View>
@@ -37,7 +40,9 @@ export const BottomSheetProvider = ({ children }: { children: ReactNode }) => {
   const [context] = useState<PortalContextType>(() => {
     const portals = new Map<string, ReactNode>();
     const subscribers = new Set<() => void>();
+    let snapshot: PortalSnapshot = [];
     const notify = () => {
+      snapshot = Array.from(portals.entries());
       subscribers.forEach((subscriber) => subscriber());
     };
     return {
@@ -55,7 +60,7 @@ export const BottomSheetProvider = ({ children }: { children: ReactNode }) => {
           subscribers.delete(callback);
         };
       },
-      getPortals: () => portals,
+      getSnapshot: () => snapshot,
     };
   });
 
@@ -76,10 +81,10 @@ export const Portal = ({ children }: { children: ReactNode }) => {
   const { addPortal, removePortal } = context;
   const id = useId();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     addPortal(id, children);
   }, [id, children, addPortal]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     return () => {
       removePortal(id);
     };