fix: improve keyboard handling for sheet presentation (#379)

lodev09 · web-flow · commit f8ceb6c34be5 · 2026-01-03T05:40:54.000+08:00
* fix(android): improve keyboard handling during sheet presentation

- Dismiss keyboard gracefully before presenting a new sheet over a parent sheet
- Save and restore focused view when child sheet dismisses
- Use WindowInsetsAnimationCompat callback for proper keyboard dismiss timing
- Dismiss keyboard when RN Screens modal is presented over a sheet
- Add getTopmostSheet helper to TrueSheetStackManager
- Refactor KeyboardUtils to consolidate dismiss methods

* fix(ios): only adjust footer for keyboard when input is within sheet

* fix(android): add fallback for keyboard dismiss callback on API &lt; 30
diff --git a/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt b/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt
@@ -18,6 +18,7 @@ import com.facebook.react.views.view.ReactViewGroup
 import com.lodev09.truesheet.core.GrabberOptions
 import com.lodev09.truesheet.core.TrueSheetStackManager
 import com.lodev09.truesheet.events.*
+import com.lodev09.truesheet.utils.KeyboardUtils
 
 /**
  * Main TrueSheet host view that manages the sheet and dispatches events to JavaScript.
@@ -276,6 +277,16 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   @UiThread
   fun present(detentIndex: Int, animated: Boolean = true, promiseCallback: () -> Unit) {
     if (!viewController.isPresented) {
+      // Only dismiss keyboard if the focused view is within a parent sheet (iOS-like behavior)
+      val parentSheet = TrueSheetStackManager.getTopmostSheet()
+      if (KeyboardUtils.isKeyboardVisible(reactContext) && parentSheet?.viewController?.isFocusedViewWithinSheet() == true) {
+        parentSheet.viewController.saveFocusedView()
+        KeyboardUtils.dismiss(this) {
+          post { present(detentIndex, animated, promiseCallback) }
+        }
+        return
+      }
+
       // Attach coordinator to the root container
       rootContainerView = findRootContainerView()
       viewController.coordinatorLayout?.let { rootContainerView?.addView(it) }
diff --git a/android/src/main/java/com/lodev09/truesheet/TrueSheetViewController.kt b/android/src/main/java/com/lodev09/truesheet/TrueSheetViewController.kt
@@ -140,6 +140,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
 
   // Keyboard State
   private var detentIndexBeforeKeyboard: Int = -1
+  private var focusedViewBeforeBlur: View? = null
 
   // Promises
   var presentPromise: (() -> Unit)? = null
@@ -248,7 +249,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   private val isKeyboardTransitioning: Boolean
     get() = keyboardObserver?.isTransitioning ?: false
 
-  private fun isFocusedViewWithinSheet(): Boolean {
+  fun isFocusedViewWithinSheet(): Boolean {
     val sheet = sheetView ?: return false
     return keyboardObserver?.isFocusedViewWithinSheet(sheet) ?: false
   }
@@ -331,6 +332,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
     isPresentAnimating = false
     lastEmittedPositionPx = -1
     detentIndexBeforeKeyboard = -1
+    focusedViewBeforeBlur = null
     shouldAnimatePresent = true
   }
 
@@ -513,7 +515,8 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
       reactContext = reactContext,
       onModalPresented = {
         if (isPresented && isSheetVisible && isTopmostSheet) {
-          hideForModal()
+          dismissKeyboard()
+          post { hideForModal() }
         }
       },
       onModalWillDismiss = {
@@ -710,6 +713,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   }
 
   private fun finishDismiss() {
+    parentSheetView?.viewController?.restoreFocusedView()
     emitDidDismissEvents()
     cleanupSheet()
   }
@@ -885,6 +889,22 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
     return true
   }
 
+  fun saveFocusedView() {
+    focusedViewBeforeBlur = reactContext.currentActivity?.currentFocus
+  }
+
+  fun restoreFocusedView() {
+    val viewToFocus = focusedViewBeforeBlur ?: return
+    focusedViewBeforeBlur = null
+
+    if (!viewToFocus.isAttachedToWindow) return
+    if (viewToFocus.requestFocus()) {
+      viewToFocus.postDelayed({
+        KeyboardUtils.show(viewToFocus)
+      }, 100)
+    }
+  }
+
   fun setupKeyboardObserver() {
     val coordinator = coordinatorLayout ?: run {
       RNLog.e(reactContext, "TrueSheet: coordinatorLayout is null in setupKeyboardObserver")
diff --git a/android/src/main/java/com/lodev09/truesheet/core/TrueSheetStackManager.kt b/android/src/main/java/com/lodev09/truesheet/core/TrueSheetStackManager.kt
@@ -133,4 +133,14 @@ object TrueSheetStackManager {
       return presentedSheetStack.lastOrNull { it.rootContainerView == rootContainer } == sheetView
     }
   }
+
+  /**
+   * Returns the topmost presented sheet, or null if none.
+   */
+  @JvmStatic
+  fun getTopmostSheet(): TrueSheetView? {
+    synchronized(presentedSheetStack) {
+      return presentedSheetStack.lastOrNull { it.viewController.isPresented && it.viewController.isSheetVisible }
+    }
+  }
 }
diff --git a/android/src/main/java/com/lodev09/truesheet/utils/KeyboardUtils.kt b/android/src/main/java/com/lodev09/truesheet/utils/KeyboardUtils.kt
@@ -1,22 +1,79 @@
 package com.lodev09.truesheet.utils
 
 import android.content.Context
+import android.os.Build
 import android.view.View
 import android.view.inputmethod.InputMethodManager
 import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsAnimationCompat
 import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.uimanager.ThemedReactContext
 
 object KeyboardUtils {
 
+  /**
+   * Checks if the soft keyboard is currently visible.
+   */
+  fun isKeyboardVisible(reactContext: ThemedReactContext): Boolean {
+    val rootView = reactContext.currentActivity?.window?.decorView?.rootView ?: return false
+    return isKeyboardVisible(rootView)
+  }
+
+  private fun isKeyboardVisible(view: View): Boolean {
+    val insets = ViewCompat.getRootWindowInsets(view) ?: return false
+    return insets.isVisible(WindowInsetsCompat.Type.ime())
+  }
+
   /**
    * Dismisses the soft keyboard if currently shown.
    */
   fun dismiss(reactContext: ThemedReactContext) {
-    val imm = reactContext.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
-    reactContext.currentActivity?.currentFocus?.let { focusedView ->
-      imm?.hideSoftInputFromWindow(focusedView.windowToken, 0)
+    val rootView = reactContext.currentActivity?.window?.decorView?.rootView ?: return
+    dismiss(rootView, null)
+  }
+
+  /**
+   * Dismisses the soft keyboard with an optional callback when the animation completes.
+   */
+  fun dismiss(view: View, onComplete: (() -> Unit)?) {
+    val imm = view.context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+    val focusedView = view.rootView.findFocus()
+
+    if (focusedView == null || !isKeyboardVisible(view)) {
+      onComplete?.invoke()
+      return
     }
+
+    if (onComplete != null) {
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+        ViewCompat.setWindowInsetsAnimationCallback(
+          view,
+          object : WindowInsetsAnimationCompat.Callback(DISPATCH_MODE_CONTINUE_ON_SUBTREE) {
+            override fun onProgress(
+              insets: WindowInsetsCompat,
+              runningAnimations: List<WindowInsetsAnimationCompat>
+            ): WindowInsetsCompat = insets
+
+            override fun onEnd(animation: WindowInsetsAnimationCompat) {
+              ViewCompat.setWindowInsetsAnimationCallback(view, null)
+              onComplete()
+            }
+          }
+        )
+      } else {
+        view.postDelayed({ onComplete() }, 120)
+      }
+    }
+
+    imm?.hideSoftInputFromWindow(focusedView.windowToken, 0)
+  }
+
+  /**
+   * Shows the soft keyboard for the given view.
+   */
+  fun show(view: View) {
+    val imm = view.context.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+    imm?.showSoftInput(view, InputMethodManager.SHOW_IMPLICIT)
   }
 
   /**
diff --git a/example/bare/ios/Podfile.lock b/example/bare/ios/Podfile.lock
@@ -2646,7 +2646,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - RNTrueSheet (3.6.9):
+  - RNTrueSheet (3.7.0-beta.3):
     - boost
     - DoubleConversion
     - fast_float
@@ -3095,7 +3095,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: e1cf8ef3f11045536eed6bd4f132b003ef5f9a5f
   RNReanimated: f1868b36f4b2b52a0ed00062cfda69506f75eaee
   RNScreens: d821082c6dd1cb397cc0c98b026eeafaa68be479
-  RNTrueSheet: 66d29463562c7ba9d9679f5d7af46b8ca8ec5f46
+  RNTrueSheet: 192e3d4a0e32be2f16a06d1f15e939b6e045af2d
   RNWorklets: d9c050940f140af5d8b611d937eab1cbfce5e9a5
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 689c8e04277f3ad631e60fe2a08e41d411daf8eb
diff --git a/example/shared/src/screens/ModalScreen.tsx b/example/shared/src/screens/ModalScreen.tsx
@@ -42,7 +42,7 @@ export const ModalScreen = ({ onNavigateToTest, onDismiss }: ModalScreenProps) =
         <Spacer />
         <Button text="Navigate Test" onPress={onNavigateToTest} />
 
-        <PromptSheet initialDetentIndex={0} ref={promptSheet} dimmed={false} />
+        <PromptSheet ref={promptSheet} dimmed={false} />
         <FlatListSheet ref={flatlistSheet} />
 
         <Modal
diff --git a/ios/TrueSheetFooterView.mm b/ios/TrueSheetFooterView.mm
@@ -15,6 +15,7 @@
 #import <react/renderer/components/TrueSheetSpec/RCTComponentViewHelpers.h>
 #import "TrueSheetViewController.h"
 #import "utils/LayoutUtil.h"
+#import "utils/UIView+FirstResponder.h"
 
 using namespace facebook::react;
 
@@ -139,6 +140,16 @@ - (TrueSheetViewController *)findSheetViewController {
   return nil;
 }
 
+- (BOOL)isFirstResponderWithinSheet {
+  TrueSheetViewController *sheetController = [self findSheetViewController];
+  if (!sheetController) {
+    return NO;
+  }
+
+  UIView *firstResponder = [sheetController.view findFirstResponder];
+  return firstResponder != nil;
+}
+
 - (void)keyboardWillChangeFrame:(NSNotification *)notification {
   if (!_bottomConstraint) {
     return;
@@ -150,6 +161,11 @@ - (void)keyboardWillChangeFrame:(NSNotification *)notification {
     return;
   }
 
+  // Only respond if the focused view is within this sheet
+  if (![self isFirstResponderWithinSheet]) {
+    return;
+  }
+
   NSDictionary *userInfo = notification.userInfo;
   CGRect keyboardFrame = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
   NSTimeInterval duration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
diff --git a/ios/utils/UIView+FirstResponder.h b/ios/utils/UIView+FirstResponder.h
@@ -0,0 +1,15 @@
+//
+//  Created by Jovanni Lo (@lodev09)
+//  Copyright (c) 2024-present. All rights reserved.
+//
+//  This source code is licensed under the MIT license found in the
+//  LICENSE file in the root directory of this source tree.
+//
+
+#import <UIKit/UIKit.h>
+
+@interface UIView (FirstResponder)
+
+- (UIView *)findFirstResponder;
+
+@end
diff --git a/ios/utils/UIView+FirstResponder.mm b/ios/utils/UIView+FirstResponder.mm
@@ -0,0 +1,26 @@
+//
+//  Created by Jovanni Lo (@lodev09)
+//  Copyright (c) 2024-present. All rights reserved.
+//
+//  This source code is licensed under the MIT license found in the
+//  LICENSE file in the root directory of this source tree.
+//
+
+#import "UIView+FirstResponder.h"
+
+@implementation UIView (FirstResponder)
+
+- (UIView *)findFirstResponder {
+  if (self.isFirstResponder) {
+    return self;
+  }
+  for (UIView *subview in self.subviews) {
+    UIView *firstResponder = [subview findFirstResponder];
+    if (firstResponder) {
+      return firstResponder;
+    }
+  }
+  return nil;
+}
+
+@end

Original file line number	Diff line number	Diff line change
`@@ -133,4 +133,14 @@ object TrueSheetStackManager {`
`133`	`133`	`return presentedSheetStack.lastOrNull { it.rootContainerView == rootContainer } == sheetView`
`134`	`134`	`}`
`135`	`135`	`}`
	`136`	`+`
	`137`	`+ /**`
	`138`	`+ * Returns the topmost presented sheet, or null if none.`
	`139`	`+ */`
	`140`	`+ @JvmStatic`
	`141`	`+ fun getTopmostSheet(): TrueSheetView? {`
	`142`	`+ synchronized(presentedSheetStack) {`
	`143`	`+ return presentedSheetStack.lastOrNull { it.viewController.isPresented && it.viewController.isSheetVisible }`
	`144`	`+ }`
	`145`	`+ }`
`136`	`146`	`}`