@lodev09/react-native-true-sheet 0.9.8 → 0.10.0

package/README.md

@@ -4,7 +4,7 @@
 ![GitHub Release](https://img.shields.io/github/v/release/lodev09/react-native-true-sheet)
 ![NPM Downloads](https://img.shields.io/npm/dw/%40lodev09%2Freact-native-true-sheet)
 
-The true native bottom sheet 💩
+The true native bottom sheet experience for your React Native Apps. 💩
 
 ![Preview](preview.gif)
 
@@ -15,9 +15,8 @@ The true native bottom sheet 💩
 * ✅ Handles your _Scrolling_ needs, natively.
 * ✅ Handles your _Footer_ needs, natively.
 * ✅ Handles your _Keyboard_ needs, natively.
-* ✅ Asynchronus `ref` [methods](#methods).
-* ✅ Works with Expo by default.
-* ✅ Bonus! [Blur](#blurtint) support on iOS 😎
+* ✅ Asynchronus `ref` [methods](https://sheet.lodev09.com/reference/methods#ref-methods).
+* ✅ Bonus! [Blur](https://sheet.lodev09.com/reference/types#blurtint) support on IOS 😎
 
 ## Installation
 
@@ -29,6 +28,12 @@ yarn add @lodev09/react-native-true-sheet
 npm i @lodev09/react-native-true-sheet
 ```
 
+## Documentation
+
+- [Guides](https://sheet.lodev09.com/category/guides)
+- [Reference](https://sheet.lodev09.com/category/reference)
+- [Example](example)
+
 ## Usage
 
 ```tsx
@@ -57,226 +62,6 @@ return (
 )
 ```
 
-## Options
-
-Props available for `TrueSheet`.
-Extends `ViewProps`
-
-| Prop | Type | Default | Description | 🍎 | 🤖 |
-| - | - | - | - | - | - |
-| sizes | [`SheetSize[]`](#sheetsize) | `["medium", "large"]` | Array of sizes you want the sheet to support. Maximum of _**3 sizes**_ only! **_collapsed_**, **_half-expanded_**, and **_expanded_**. Example: `size={["auto", "60%", "large"]}`| ✅ | ✅ |
-| backgroundColor | `ColorValue` | `"white"` | The sheet's background color. | ✅ | ✅ |
-| cornerRadius | `number` | - | the sheet corner radius. | ✅ | ✅ |
-| maxHeight | `number` | - | Overrides `"large"` or `"100%"` height. | ✅ | ✅ |
-| contentContainerStyle | `StyleProp<ViewStyle>` | - | Optional content container styles. | ✅ | ✅ |
-| FooterComponent | `ComponentType<...> \| ReactElement` | - | A component that floats at the bottom of the sheet. Accepts a functional `Component` or `ReactElement`. | ✅ | ✅ |
-| dismissible | `boolean` | `true` | If set to `false`, the sheet will prevent interactive dismissal via dragging or clicking outside of it. | ✅ | ✅ |
-| grabber | `boolean` | `true` | Shows a grabber (or handle). Native on IOS and styled `View` on Android. | ✅ | ✅ |
-| grabberProps | [`TrueSheetGrabberProps`](#truesheetgrabberprops) | - | Overrides the grabber props for android. | | ✅ |
-| blurTint | [`BlurTint`](#blurtint) | - | The blur effect style on iOS. Overrides `backgroundColor` if set. Example: `"light"`, `"dark"`, etc. | ✅ | |
-| scrollRef | `RefObject<...>` | - | The main scrollable ref that the sheet should handle on iOS. | ✅ | |
-
-## Methods
-
-```tsx
-const sheet = useRef<TrueSheet>(null)
-
-const resize = () => {
-  sheet.current?.resize(1)
-}
-
-const dismiss = () => {
-  sheet.current?.dismiss()
-}
-
-return (
-  <View>
-    <Button onPress={resize} title="Resize to 80%" />
-    <Button onPress={dismiss} title="Dimiss" />
-    <TrueSheet sizes={['auto', '80%']} ref={sheet}>
-      // ...
-    </TrueSheet>
-  </View>
-)
-```
-
-| Name | Parameters | Description |
-| - | - | - |
-| present | `index: number = 0` | Present the modal sheet. Optionally accepts a size `index`. See `sizes` prop. |
-| resize | `index: number` | Resizes the sheet programmatically by `index`. This is an alias of the `present(index)` method. |
-| dismiss | - | Dismisses the sheet. |
-
-## Events
-
-```tsx
-const handleSizeChange = (info: SizeInfo) => {
-  console.log(info)
-}
-
-return (
-  <TrueSheet onSizeChange={handleSizeChange} sizes={['auto', '80%']} ref={sheet}>
-    // ...
-  </TrueSheet>
-)
-```
-
-| Name | Parameters | Description |
-| - | - | - |
-| onPresent | [`SizeInfo`](#sizeinfo) | Called when the sheet has been presented. Comes with the size index and value. |
-| onDismiss | - | Called when the sheet has been dismissed. |
-| onSizeChange | [`SizeInfo`](#sizeinfo) | Called when the size of the sheet has changed. Either by dragging or presenting programatically. Comes with the size index and value. |
-
-## Types
-
-### `SheetSize`
-
-```tsx
-<TrueSheet sizes={['auto', '80%', 'large']}>
-  // ...
-</TrueSheet>
-```
-
-| Value | Description | 🍎 | 🤖 |
-| - | - | - | - |
-| `"auto"` | Auto resize based on content height. | **_16+_** | ✅ |
-| `"small"` | Translates to 25% | **_16+_** | ✅ |
-| `"medium"` | Translates to 50% | **_15+_** | ✅ |
-| `"large"` | Translates to 100% | ✅ | ✅ |
-| `number` | Fixed height | **_16+_** | ✅ |
-| `${number}%` | Fixed height in % | **_16+_** | ✅ |
-
-> [!NOTE]
-> `auto` is not guaranteed to be accurate if your content depends on various rendering logic. Experiment with it and try to keep your content size as fixed as possible.
->
-> Alternatively, you can programmatically call [`resize`](#methods) to adjust the sheet size on-the-fly.
-
-### `TrueSheetGrabberProps`
-
-Grabber props to be used for android grabber or handle.
-
-| Prop | Type | Default | Description |
-| - | - | - | - |
-| visible | `boolean` | `true` | Is grabber visible. |
-| color | `ColorValue` | `"rgba(73,69,79,0.4)"` | Grabber color according to M3 specs. |
-| height | `number` | `4` | Grabber height according to M3 specs. |
-| width | `number` | `32` | Grabber width according to M3 specs. |
-| topOffset | `number` | `0` | Grabber top position offset. |
-
-### `BlurTint`
-
-Blur tint that is mapped into native values in iOS.
-
-```tsx
-<TrueSheet blurTint="dark">
-  // ...
-</TrueSheet>
-```
-
-| Value |
-| - |
-| `"light"` |
-| `"dark"` |
-| `"default"` |
-| `"extraLight"` |
-| `"regular"` |
-| `"prominent"` |
-| `"systemUltraThinMaterial"` |
-| `"systemThinMaterial"` |
-| `"systemMaterial"` |
-| `"systemThickMaterial"` |
-| `"systemChromeMaterial"` |
-| `"systemUltraThinMaterialLight"` |
-| `"systemThinMaterialLight"` |
-| `"systemMaterialLight"` |
-| `"systemThickMaterialLight"` |
-| `"systemChromeMaterialLight"` |
-| `"systemUltraThinMaterialDark"` |
-| `"systemThinMaterialDark"` |
-| `"systemMaterialDark"` |
-| `"systemThickMaterialDark"` |
-| `"systemChromeMaterialDark"` |
-
-### `SizeInfo`
-
-`Object` that comes with some events.
-
-```tsx
-{
-  index: 1,
-  value: 69
-}
-```
-
-| Property | Type | Description |
-| - | - | - |
-| index | `number` | The size index from the provided sizes. See `sizes` prop. |
-| value | `number` | The actual height value of the size. |
-
-## Testing
-
-When using `jest`, simply mock the entire package.
-
-```tsx
-jest.mock('@lodev09/react-native-true-sheet')
-```
-
-## Troubleshooting
-
-### Handling `ScrollView` on **Android**
-
-On Android, `nestedScrollEnabled` needs to be enabled so that scrolling works when the sheet is expanded to its `maxHeight`.
-
-```tsx
-<TrueSheet ref={sheet}>
-  <ScrollView nestedScrollEnabled>
-    // ...
-  </ScrollView>
-</TrueSheet>
-```
-
-### Using `react-native-gesture-handler` on **Android**
-
-On Android, RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with `GestureHandlerRootView`.
-
-Example:
-```tsx
-import { GestureHandlerRootView } from 'react-native-gesture-handler'
-```
-```tsx
-return (
-  <TrueSheet ref={sheet}>
-    <GestureHandlerRootView>
-      // ...
-    </GestureHandlerRootView>
-  </TrueSheet>
-)
-```
-
-### Integrating `@react-navigation/native` on iOS
-
-On iOS, navigating to a [React Navigation](https://reactnavigation.org) screen from within the Sheet can cause issues. To resolve this, dismiss the sheet before navigating!
-
-Example:
-```tsx
-const sheet = useRef<TrueSheet>(null)
-
-const navigate = async () => {
-  await sheet.current?.dismiss() // wait for the sheet to dismiss ✅
-  navigation.navigate('SomeScreen') // navigate to the screen 🎉
-}
-
-return (
-  <TrueSheet ref={sheet}>
-    <Button onPress={navigate} title="Navigate to SomeScreen" />
-    // ...
-  </TrueSheet>
-)
-```
-
-### Weird layout render
-
-The sheet does not have control over how React Native renders components and may lead to rendering issues. To resolve this, try to minimize the use of `flex=1` in your content styles. Instead, use fixed `height` or employ `flexGrow`, `flexBasis`, etc., to manage your layout requirements.
-
 ## v1 Roadmap
 
 - [ ] Inline sheet

package/android/src/main/java/com/lodev09/truesheet/TrueSheetDialog.kt

@@ -18,14 +18,15 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
   private var keyboardManager = KeyboardManager(reactContext)
 
   var maxScreenHeight: Int = 0
+  var contentHeight: Int = 0
+  var footerHeight: Int = 0
   var maxSheetHeight: Int? = null
 
-  var contentView: ViewGroup? = null
   var footerView: ViewGroup? = null
 
   var sizes: Array<Any> = arrayOf("medium", "large")
 
-  var sheetView: ViewGroup
+  private var sheetView: ViewGroup
 
   init {
     setContentView(rootSheetView)
@@ -39,6 +40,9 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
         WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE
       )
     }
+
+    // Update the usable sheet height
+    maxScreenHeight = Utils.screenHeight(reactContext)
   }
 
   fun show(sizeIndex: Int) {
@@ -52,6 +56,12 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
     }
   }
 
+  fun positionFooter() {
+    footerView?.apply {
+      y = (maxScreenHeight - sheetView.top - footerHeight).toFloat()
+    }
+  }
+
   /**
    * Set the state based on the given size index.
    */
@@ -62,7 +72,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
   /**
    * Get the height value based on the size config value.
    */
-  private fun getSizeHeight(size: Any, contentHeight: Int): Int {
+  private fun getSizeHeight(size: Any): Int {
     val height =
       when (size) {
         is Double -> Utils.toPixel(size)
@@ -71,7 +81,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
 
         is String -> {
           when (size) {
-            "auto" -> contentHeight
+            "auto" -> contentHeight + footerHeight
 
             "large" -> maxScreenHeight
 
@@ -102,7 +112,10 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
         else -> (maxScreenHeight * 0.5).toInt()
       }
 
-    return minOf(height, maxSheetHeight ?: maxScreenHeight)
+    return when (maxSheetHeight) {
+      null -> height
+      else -> minOf(height, maxSheetHeight ?: maxScreenHeight)
+    }
   }
 
   /**
@@ -144,9 +157,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
           else -> Utils.screenHeight(reactContext)
         }
 
-        footerView?.apply {
-          y = (maxScreenHeight - (sheetView.top ?: 0) - height).toFloat()
-        }
+        positionFooter()
       }
     })
   }
@@ -162,14 +173,6 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
    * Configure the sheet based on size preferences.
    */
   fun configure() {
-    // Update the usable sheet height
-    maxScreenHeight = Utils.screenHeight(reactContext)
-
-    var contentHeight = 0
-
-    contentView?.let { contentHeight = it.height }
-    footerView?.let { contentHeight += it.height }
-
     // Configure sheet sizes
     behavior.apply {
       skipCollapsed = false
@@ -180,23 +183,22 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
 
       when (sizes.size) {
         1 -> {
-          maxHeight = getSizeHeight(sizes[0], contentHeight)
-          peekHeight = maxHeight
+          maxHeight = getSizeHeight(sizes[0])
           skipCollapsed = true
         }
 
         2 -> {
-          peekHeight = getSizeHeight(sizes[0], contentHeight)
-          maxHeight = getSizeHeight(sizes[1], contentHeight)
+          setPeekHeight(getSizeHeight(sizes[0]), isShowing)
+          maxHeight = getSizeHeight(sizes[1])
         }
 
         3 -> {
           // Enables half expanded
           isFitToContents = false
 
-          peekHeight = getSizeHeight(sizes[0], contentHeight)
-          halfExpandedRatio = getSizeHeight(sizes[1], contentHeight).toFloat() / maxScreenHeight.toFloat()
-          maxHeight = getSizeHeight(sizes[2], contentHeight)
+          setPeekHeight(getSizeHeight(sizes[0]), isShowing)
+          halfExpandedRatio = getSizeHeight(sizes[1]).toFloat() / maxScreenHeight.toFloat()
+          maxHeight = getSizeHeight(sizes[2])
         }
       }
     }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt

@@ -1,7 +1,6 @@
 package com.lodev09.truesheet
 
 import android.content.Context
-import android.util.Log
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewStructure
@@ -53,11 +52,6 @@ class TrueSheetView(context: Context) :
    */
   private val rootSheetView: RootSheetView
 
-  /**
-   * 1st child of the container view.
-   */
-  private var contentView: ViewGroup? = null
-
   /**
    * 2nd child of the container view.
    */
@@ -79,10 +73,8 @@ class TrueSheetView(context: Context) :
         registerKeyboardManager()
 
         // Initialize footer y
-        footerView?.apply {
-          UiThreadUtil.runOnUiThread {
-            y = (sheetDialog.maxScreenHeight - sheetView.top - height).toFloat()
-          }
+        UiThreadUtil.runOnUiThread {
+          positionFooter()
         }
 
         presentPromise?.let { promise ->
@@ -96,8 +88,8 @@ class TrueSheetView(context: Context) :
 
       // Setup listener when the dialog has been dismissed.
       setOnDismissListener {
-        Log.d(TAG, "dismissed")
         unregisterKeyboardManager()
+
         dismissPromise?.let { promise ->
           promise()
           dismissPromise = null
@@ -106,19 +98,17 @@ class TrueSheetView(context: Context) :
         // dispatch onDismiss event
         eventDispatcher?.dispatchEvent(DismissEvent(surfaceId, id))
       }
-    }
 
-    // Configure sheet behavior events
-    sheetDialog.apply {
+      // Configure sheet behavior events
       behavior.addBottomSheetCallback(
         object : BottomSheetBehavior.BottomSheetCallback() {
           override fun onSlide(sheetView: View, slideOffset: Float) {
             footerView?.let {
-              val y = (maxScreenHeight - sheetView.top - it.height).toFloat()
+              val y = (maxScreenHeight - sheetView.top - footerHeight).toFloat()
               if (slideOffset >= 0) {
                 it.y = y
               } else {
-                it.y = y - it.height * slideOffset
+                it.y = y - footerHeight * slideOffset
               }
             }
           }
@@ -168,10 +158,8 @@ class TrueSheetView(context: Context) :
 
     (child as ViewGroup).let {
       // Container View's first child is the Content View
-      contentView = it.getChildAt(0) as ViewGroup
       footerView = it.getChildAt(1) as ViewGroup
 
-      sheetDialog.contentView = contentView
       sheetDialog.footerView = footerView
 
       // rootView's first child is the Container View
@@ -221,9 +209,26 @@ class TrueSheetView(context: Context) :
     sheetDialog.dismiss()
   }
 
+  private fun configureIfShowing() {
+    if (sheetDialog.isShowing) {
+      sheetDialog.configure()
+      sheetDialog.positionFooter()
+    }
+  }
+
   fun setMaxHeight(height: Int) {
     sheetDialog.maxSheetHeight = height
-    sheetDialog.configure()
+    configureIfShowing()
+  }
+
+  fun setContentHeight(height: Int) {
+    sheetDialog.contentHeight = height
+    configureIfShowing()
+  }
+
+  fun setFooterHeight(height: Int) {
+    sheetDialog.footerHeight = height
+    configureIfShowing()
   }
 
   fun setDismissible(dismissible: Boolean) {
@@ -233,7 +238,7 @@ class TrueSheetView(context: Context) :
 
   fun setSizes(newSizes: Array<Any>) {
     sheetDialog.sizes = newSizes
-    sheetDialog.configure()
+    configureIfShowing()
   }
 
   /**

package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt

@@ -39,6 +39,16 @@ class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
     view.setDismissible(dismissible)
   }
 
+  @ReactProp(name = "contentHeight")
+  fun setContentHeight(view: TrueSheetView, height: Double) {
+    view.setContentHeight(Utils.toPixel(height))
+  }
+
+  @ReactProp(name = "footerHeight")
+  fun setFooterHeight(view: TrueSheetView, height: Double) {
+    view.setFooterHeight(Utils.toPixel(height))
+  }
+
   @ReactProp(name = "sizes")
   fun setSizes(view: TrueSheetView, sizes: ReadableArray) {
     val result = ArrayList<Any>()

package/ios/TrueSheetView.swift

@@ -10,8 +10,6 @@
 class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
   // MARK: - React properties
 
-  var maxHeight: CGFloat?
-
   // Events
   @objc var onDismiss: RCTDirectEventBlock?
   @objc var onPresent: RCTDirectEventBlock?
@@ -40,24 +38,6 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
 
   private var rctScrollView: RCTScrollView?
 
-  // Content height minus the footer height for `auto` layout
-  private var contentHeight: CGFloat {
-    guard let contentView else { return 0 }
-
-    var height = contentView.frame.height
-
-    // Add footer view's height
-    if let footerContent = footerView?.subviews.first {
-      height += footerContent.bounds.height
-    }
-
-    // Exclude bottom safe area for consistency with a Scrollable content
-    let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow })
-    let bottomInset = window?.safeAreaInsets.bottom ?? 0
-
-    return height - bottomInset
-  }
-
   // MARK: - Setup
 
   init(with bridge: RCTBridge) {
@@ -127,7 +107,7 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
       }
 
       // Update content containers
-      setupContent()
+      setupScrollable()
     }
   }
 
@@ -158,14 +138,10 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
 
     let size = CGSize(width: width, height: containerView.bounds.height)
     bridge.uiManager.setSize(size, for: containerView)
-
-    if let footerView {
-      bridge.uiManager.setSize(size, for: footerView)
-    }
   }
 
   func viewControllerWillAppear() {
-    setupContent()
+    setupScrollable()
   }
 
   func viewControllerDidDismiss() {
@@ -199,6 +175,35 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
     configureSheetIfPresented()
   }
 
+  @objc
+  func setContentHeight(_ height: NSNumber) {
+    // Exclude bottom safe area for consistency with a Scrollable content
+    let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow })
+    let bottomInset = window?.safeAreaInsets.bottom ?? 0
+
+    viewController.contentHeight = CGFloat(height.floatValue) - bottomInset
+    configureSheetIfPresented()
+  }
+
+  @objc
+  func setFooterHeight(_ height: NSNumber) {
+    guard let footerView, let footerViewHeightConstraint else {
+      return
+    }
+
+    viewController.footerHeight = CGFloat(height.floatValue)
+
+    if footerView.subviews.first != nil {
+      containerView?.bringSubviewToFront(footerView)
+      footerViewHeightConstraint.constant = viewController.footerHeight
+    } else {
+      containerView?.sendSubviewToBack(footerView)
+      footerViewHeightConstraint.constant = 0
+    }
+
+    configureSheetIfPresented()
+  }
+
   @objc
   func setSizes(_ sizes: [Any]) {
     viewController.sizes = Array(sizes.prefix(3))
@@ -224,7 +229,7 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
 
     viewController.cornerRadius = cornerRadius
     if #available(iOS 15.0, *) {
-      configureSheetIfPresented { sheet in
+      configureIfPresented { sheet in
         sheet.preferredCornerRadius = viewController.cornerRadius
       }
     }
@@ -234,7 +239,7 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
   func setGrabber(_ visible: Bool) {
     viewController.grabber = visible
     if #available(iOS 15.0, *) {
-      configureSheetIfPresented { sheet in
+      configureIfPresented { sheet in
         sheet.prefersGrabberVisible = visible
       }
     }
@@ -258,7 +263,7 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
 
   /// Use to customize some properties of the Sheet
   @available(iOS 15.0, *)
-  func configureSheetIfPresented(completion: (UISheetPresentationController) -> Void) {
+  func configureIfPresented(completion: (UISheetPresentationController) -> Void) {
     guard isPresented, let sheet = viewController.sheetPresentationController else {
       return
     }
@@ -269,11 +274,11 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
   /// Full reconfiguration of the Sheet
   func configureSheetIfPresented() {
     if isPresented {
-      viewController.configureSheet(at: activeIndex ?? 0, with: contentHeight, nil)
+      viewController.configureSheet(at: activeIndex ?? 0, nil)
     }
   }
 
-  func setupContent() {
+  func setupScrollable() {
     guard let contentView, let containerView else { return }
 
     // Add constraints to fix weirdness and support ScrollView
@@ -281,16 +286,6 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
       contentView.pinTo(view: containerView, constraints: nil)
       rctScrollView.pinTo(view: contentView, constraints: nil)
     }
-
-    if let footerView, let footerViewHeightConstraint {
-      if let footerContent = footerView.subviews.first {
-        containerView.bringSubviewToFront(footerView)
-        footerViewHeightConstraint.constant = footerContent.bounds.height
-      } else {
-        containerView.sendSubviewToBack(footerView)
-        footerViewHeightConstraint.constant = 0
-      }
-    }
   }
 
   func dismiss(promise: Promise) {
@@ -299,9 +294,6 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
       return
     }
 
-    // Dismiss the keyboard
-    contentView?.endEditing(true)
-
     viewController.dismiss(animated: true) {
       promise.resolve(nil)
     }
@@ -320,7 +312,7 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
       return
     }
 
-    viewController.configureSheet(at: index, with: contentHeight) { sizeInfo in
+    viewController.configureSheet(at: index) { sizeInfo in
       // Trigger onSizeChange event when size is changed while presenting
       if self.isPresented {
         self.viewControllerSheetDidChangeSize(sizeInfo)