@lodev09/react-native-true-sheet 3.7.4-beta.2 → 3.8.0-beta.0

package/README.md

@@ -29,9 +29,16 @@ The true native bottom sheet experience for your React Native Apps. 💩
 
 ### Prerequisites
 
-- React Native >= 0.76 (Expo SDK 52+)
+- React Native 0.80+
 - New Architecture enabled (default in RN 0.76+)
-- Xcode 26.2 (strongly recommended for better library functionality)
+- Xcode 26.1+ (liquid glass support)
+
+### Compatibility
+
+| TrueSheet | React Native | Expo SDK |
+|-----------|--------------|----------|
+| 3.7+      | 0.80+        | 54+      |
+| 3.6       | 0.79         | 52-53    |
 
 ### Expo
 
@@ -46,27 +53,6 @@ yarn add @lodev09/react-native-true-sheet
 cd ios && pod install
 ```
 
-### EAS Build (iOS)
-
-When using [EAS Build](https://docs.expo.dev/build/introduction/) to build your iOS app, you must configure your `eas.json` to use a build image that includes Xcode 26.2. Use `"image": "latest"` or choose from the [available build images](https://docs.expo.dev/build-reference/infrastructure/#ios-server-images):
-
-```json
-{
-  "build": {
-    "production": {
-      "ios": {
-        "image": "latest"
-      }
-    },
-    "development": {
-      "ios": {
-        "image": "latest"
-      }
-    }
-  }
-}
-```
-
 ## Documentation
 
 - [Example](example)
@@ -111,31 +97,6 @@ export const App = () => {
 }
 ```
 
-## Testing
-
-TrueSheet exports mocks for easy testing:
-
-```tsx
-// Main component
-jest.mock('@lodev09/react-native-true-sheet', () =>
-  require('@lodev09/react-native-true-sheet/mock')
-);
-
-// Navigation (if using)
-jest.mock('@lodev09/react-native-true-sheet/navigation', () =>
-  require('@lodev09/react-native-true-sheet/navigation/mock')
-);
-
-// Reanimated (if using)
-jest.mock('@lodev09/react-native-true-sheet/reanimated', () =>
-  require('@lodev09/react-native-true-sheet/reanimated/mock')
-);
-```
-
-All methods (`present`, `dismiss`, `resize`) are mocked as Jest functions, allowing you to test your components without native dependencies.
-
-**[Full Testing Guide](https://sheet.lodev09.com/guides/jest)**
-
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

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

@@ -2,6 +2,7 @@ package com.lodev09.truesheet
 
 import android.annotation.SuppressLint
 import android.view.View
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.view.ReactViewGroup
@@ -34,6 +35,15 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
   var headerHeight: Int = 0
   var footerHeight: Int = 0
 
+  var insetAdjustment: String = "automatic"
+  var scrollViewBottomInset: Int = 0
+  var scrollViewPinningEnabled: Boolean = false
+  var scrollableOptions: ReadableMap? = null
+    set(value) {
+      field = value
+      contentView?.scrollableOptions = value
+    }
+
   override val eventDispatcher: EventDispatcher?
     get() = delegate?.eventDispatcher
 
@@ -43,12 +53,26 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
     clipToPadding = false
   }
 
+  fun setupContentScrollViewPinning() {
+    val bottomInset = if (insetAdjustment == "automatic") scrollViewBottomInset else 0
+    contentView?.setupScrollViewPinning(scrollViewPinningEnabled, bottomInset)
+  }
+
+  fun setupKeyboardHandler() {
+    contentView?.setupKeyboardHandler()
+  }
+
+  fun cleanupKeyboardHandler() {
+    contentView?.cleanupKeyboardHandler()
+  }
+
   override fun addView(child: View?, index: Int) {
     super.addView(child, index)
 
     when (child) {
       is TrueSheetContentView -> {
         child.delegate = this
+        child.scrollableOptions = scrollableOptions
         contentView = child
       }
 

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

@@ -1,8 +1,15 @@
 package com.lodev09.truesheet
 
 import android.annotation.SuppressLint
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ScrollView
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
+import com.lodev09.truesheet.core.TrueSheetKeyboardObserver
+import com.lodev09.truesheet.core.TrueSheetKeyboardObserverDelegate
 
 /**
  * Delegate interface for content view size changes
@@ -16,12 +23,25 @@ interface TrueSheetContentViewDelegate {
  * This is the first child of TrueSheetContainerView
  */
 @SuppressLint("ViewConstructor")
-class TrueSheetContentView(context: ThemedReactContext) : ReactViewGroup(context) {
+class TrueSheetContentView(private val reactContext: ThemedReactContext) : ReactViewGroup(reactContext) {
   var delegate: TrueSheetContentViewDelegate? = null
 
   private var lastWidth = 0
   private var lastHeight = 0
 
+  private var pinnedScrollView: ScrollView? = null
+  private var originalScrollViewPaddingBottom: Int = 0
+  private var bottomInset: Int = 0
+
+  private var keyboardScrollOffset: Float = 0f
+  private var keyboardObserver: TrueSheetKeyboardObserver? = null
+
+  var scrollableOptions: ReadableMap? = null
+    set(value) {
+      field = value
+      keyboardScrollOffset = value?.getDouble("keyboardScrollOffset")?.toFloat()?.dpToPx() ?: 0f
+    }
+
   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     super.onSizeChanged(w, h, oldw, oldh)
 
@@ -32,6 +52,147 @@ class TrueSheetContentView(context: ThemedReactContext) : ReactViewGroup(context
     }
   }
 
+  fun setupScrollViewPinning(enabled: Boolean, bottomInset: Int) {
+    if (!enabled) {
+      clearScrollViewPinning()
+      return
+    }
+
+    this.bottomInset = bottomInset
+    applyScrollViewBottomInset()
+  }
+
+  private fun applyScrollViewBottomInset() {
+    val scrollView = findScrollView(this)
+
+    if (scrollView != pinnedScrollView) {
+      // Restore previous scroll view's padding
+      pinnedScrollView?.setPadding(
+        pinnedScrollView!!.paddingLeft,
+        pinnedScrollView!!.paddingTop,
+        pinnedScrollView!!.paddingRight,
+        originalScrollViewPaddingBottom
+      )
+
+      pinnedScrollView = scrollView
+      originalScrollViewPaddingBottom = scrollView?.paddingBottom ?: 0
+    }
+
+    scrollView?.let {
+      it.clipToPadding = false
+      it.setPadding(
+        it.paddingLeft,
+        it.paddingTop,
+        it.paddingRight,
+        originalScrollViewPaddingBottom + bottomInset
+      )
+    }
+  }
+
+  fun clearScrollViewPinning() {
+    pinnedScrollView?.setPadding(
+      pinnedScrollView!!.paddingLeft,
+      pinnedScrollView!!.paddingTop,
+      pinnedScrollView!!.paddingRight,
+      originalScrollViewPaddingBottom
+    )
+    pinnedScrollView = null
+    originalScrollViewPaddingBottom = 0
+    bottomInset = 0
+  }
+
+  fun findScrollView(): ScrollView? = findScrollView(this)
+
+  private fun findScrollView(view: View): ScrollView? {
+    if (view is ScrollView) {
+      return view
+    }
+
+    if (view is ViewGroup) {
+      for (i in 0 until view.childCount) {
+        val scrollView = findScrollView(view.getChildAt(i))
+        if (scrollView != null) {
+          return scrollView
+        }
+      }
+    }
+
+    return null
+  }
+
+  // ==================== Keyboard Handling ====================
+
+  fun setupKeyboardHandler() {
+    if (keyboardObserver != null) return
+
+    keyboardObserver = TrueSheetKeyboardObserver(this, reactContext).apply {
+      delegate = object : TrueSheetKeyboardObserverDelegate {
+        override fun keyboardWillShow(height: Int) {
+          updateScrollViewInsetForKeyboard(height)
+        }
+
+        override fun keyboardDidShow(height: Int) {
+          scrollToFocusedInput()
+        }
+
+        override fun keyboardWillHide() {
+          updateScrollViewInsetForKeyboard(0)
+        }
+
+        override fun focusDidChange(newFocus: View) {
+          scrollToFocusedInput()
+        }
+      }
+      start()
+    }
+  }
+
+  fun cleanupKeyboardHandler() {
+    keyboardObserver?.stop()
+    keyboardObserver = null
+  }
+
+  private fun updateScrollViewInsetForKeyboard(keyboardHeight: Int) {
+    val scrollView = pinnedScrollView ?: return
+
+    val totalBottomInset = if (keyboardHeight > 0) keyboardHeight else bottomInset
+    val newPaddingBottom = originalScrollViewPaddingBottom + totalBottomInset
+
+    scrollView.clipToPadding = false
+    scrollView.setPadding(
+      scrollView.paddingLeft,
+      scrollView.paddingTop,
+      scrollView.paddingRight,
+      newPaddingBottom
+    )
+
+    // Trigger a scroll to force update
+    scrollView.post {
+      scrollView.smoothScrollBy(0, 1)
+      scrollView.smoothScrollBy(0, -1)
+    }
+  }
+
+  private fun scrollToFocusedInput() {
+    val scrollView = pinnedScrollView ?: findScrollView() ?: return
+    val focusedView = findFocus() ?: return
+
+    val focusedLocation = IntArray(2)
+    val scrollViewLocation = IntArray(2)
+    focusedView.getLocationOnScreen(focusedLocation)
+    scrollView.getLocationOnScreen(scrollViewLocation)
+
+    val relativeTop = focusedLocation[1] - scrollViewLocation[1] + scrollView.scrollY
+    val relativeBottom = relativeTop + focusedView.height + keyboardScrollOffset.toInt()
+
+    val visibleHeight = scrollView.height - scrollView.paddingBottom
+    val visibleBottom = scrollView.scrollY + visibleHeight
+
+    if (relativeBottom > visibleBottom) {
+      scrollView.smoothScrollTo(0, relativeBottom - visibleHeight)
+    }
+  }
+
   companion object {
     const val TAG_NAME = "TrueSheet"
   }

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

@@ -1,6 +1,6 @@
 package com.lodev09.truesheet
 
-import com.facebook.react.TurboReactPackage
+import com.facebook.react.BaseReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.module.model.ReactModuleInfo
@@ -11,7 +11,7 @@ import com.facebook.react.uimanager.ViewManager
  * TrueSheet package for Fabric architecture
  * Registers all view managers and the TurboModule
  */
-class TrueSheetPackage : TurboReactPackage() {
+class TrueSheetPackage : BaseReactPackage() {
 
   override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? =
     when (name) {
@@ -27,7 +27,6 @@ class TrueSheetPackage : TurboReactPackage() {
           TrueSheetModule::class.java.name,
           false, // canOverrideExistingModule
           false, // needsEagerInit
-          true, // hasConstants
           false, // isCxxModule
           true // isTurboModule
         )

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

@@ -6,6 +6,7 @@ import android.view.ViewGroup
 import android.view.accessibility.AccessibilityEvent
 import androidx.annotation.UiThread
 import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil.pxToDp
 import com.facebook.react.uimanager.StateWrapper
@@ -15,6 +16,8 @@ import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.util.RNLog
 import com.facebook.react.views.view.ReactViewGroup
 import com.lodev09.truesheet.core.GrabberOptions
+import com.lodev09.truesheet.core.RNScreensEventObserver
+import com.lodev09.truesheet.core.RNScreensEventObserverDelegate
 import com.lodev09.truesheet.core.TrueSheetStackManager
 import com.lodev09.truesheet.events.*
 import com.lodev09.truesheet.utils.KeyboardUtils
@@ -29,7 +32,8 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   ReactViewGroup(reactContext),
   LifecycleEventListener,
   TrueSheetViewControllerDelegate,
-  TrueSheetContainerViewDelegate {
+  TrueSheetContainerViewDelegate,
+  RNScreensEventObserverDelegate {
 
   // ==================== Properties ====================
 
@@ -60,6 +64,9 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   // Root container for the coordinator layout (activity or Modal dialog content view)
   internal var rootContainerView: ViewGroup? = null
 
+  // Screen event observer for react-native-screens integration
+  internal var screensEventObserver: RNScreensEventObserver? = null
+
   // ==================== Initialization ====================
 
   init {
@@ -113,6 +120,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     if (child is TrueSheetContainerView) {
       child.delegate = this
       viewController.createSheet()
+      setupContentScrollViewPinning()
 
       val surfaceId = UIManagerHelper.getSurfaceId(this)
       eventDispatcher?.dispatchEvent(MountEvent(surfaceId, id))
@@ -160,6 +168,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     TrueSheetModule.unregisterView(id)
     TrueSheetStackManager.removeSheet(this)
 
+    cleanupScreenEventObserver()
     didInitiallyPresent = false
 
     if (viewController.isPresented) {
@@ -177,6 +186,8 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
    * Reconfigures the sheet if it's currently presented.
    */
   fun finalizeUpdates() {
+    setupContentScrollViewPinning()
+
     if (viewController.isPresented) {
       viewController.sheetView?.setupBackground()
       viewController.sheetView?.setupGrabber()
@@ -245,10 +256,51 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   fun setInsetAdjustment(insetAdjustment: String) {
     viewController.insetAdjustment = insetAdjustment
+    setupContentScrollViewPinning()
   }
 
   fun setScrollable(scrollable: Boolean) {
     viewController.scrollable = scrollable
+    setupContentScrollViewPinning()
+  }
+
+  fun setScrollableOptions(options: ReadableMap?) {
+    viewController.scrollableOptions = options
+    setupContentScrollViewPinning()
+  }
+
+  private fun setupContentScrollViewPinning() {
+    viewController.containerView?.let {
+      it.insetAdjustment = viewController.insetAdjustment
+      it.scrollViewPinningEnabled = viewController.scrollable
+      it.scrollViewBottomInset = viewController.contentBottomInset
+      it.scrollableOptions = viewController.scrollableOptions
+      it.setupContentScrollViewPinning()
+    }
+  }
+
+  // ==================== Screen Event Observer ====================
+
+  private fun setupScreenEventObserver() {
+    screensEventObserver = RNScreensEventObserver().apply {
+      delegate = this@TrueSheetView
+
+      // For stacked sheets on the same screen, inherit parent's presenter screen tag.
+      // If parent was hidden by screen navigation, this sheet is on a different screen.
+      val parentScreenTag = viewController.parentSheetView?.screensEventObserver?.presenterScreenTag ?: 0
+      val parentHiddenByScreen = viewController.parentSheetView?.viewController?.wasHiddenByScreen == true
+      if (parentScreenTag != 0 && !parentHiddenByScreen) {
+        presenterScreenTag = parentScreenTag
+      } else {
+        capturePresenterScreenFromView(this@TrueSheetView)
+      }
+      startObserving(eventDispatcher)
+    }
+  }
+
+  private fun cleanupScreenEventObserver() {
+    screensEventObserver?.stopObserving()
+    screensEventObserver = null
   }
 
   // ==================== State Management ====================
@@ -328,13 +380,8 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   @UiThread
   fun resize(detentIndex: Int, promiseCallback: () -> Unit) {
-    if (!viewController.isPresented) {
-      RNLog.w(reactContext, "TrueSheet: Cannot resize. Sheet is not presented.")
-      promiseCallback()
-      return
-    }
-
-    present(detentIndex, true, promiseCallback)
+    viewController.resizePromise = promiseCallback
+    viewController.resize(detentIndex)
   }
 
   /**
@@ -409,6 +456,8 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   }
 
   override fun viewControllerDidPresent(index: Int, position: Float, detent: Float) {
+    setupScreenEventObserver()
+
     val surfaceId = UIManagerHelper.getSurfaceId(this)
     eventDispatcher?.dispatchEvent(DidPresentEvent(surfaceId, id, index, position, detent))
   }
@@ -423,6 +472,8 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     viewController.coordinatorLayout?.let { rootContainerView?.removeView(it) }
     rootContainerView = null
 
+    cleanupScreenEventObserver()
+
     val surfaceId = UIManagerHelper.getSurfaceId(this)
     eventDispatcher?.dispatchEvent(DidDismissEvent(surfaceId, id))
 
@@ -502,6 +553,23 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     viewController.positionFooter()
   }
 
+  // ==================== RNScreensEventObserverDelegate ====================
+
+  override fun presenterScreenWillDisappear() {
+    if (viewController.isPresented && viewController.isSheetVisible) {
+      KeyboardUtils.dismiss(this) {}
+      viewController.post { viewController.hideForScreen() }
+    }
+  }
+
+  override fun presenterScreenWillAppear() {
+    if (viewController.isPresented && viewController.wasHiddenByScreen) {
+      viewController.wasHiddenByScreen = false
+      viewController.showAfterScreen()
+      viewControllerDidDetectScreenDismiss()
+    }
+  }
+
   // ==================== Private Helpers ====================
 
   /**