feat: keyboard tracking view (#1047)

kirillzyusko · web-flow · commit e4e6e6e637c8 · 2025-08-01T14:48:33.000+02:00
## 📜 Description Introduce compat `KeyboardTrackingView` layer. ## 💡 Motivation and Context Starting from iOS beta 4 we got breaking changes that breaks `react-native-keyboard-controller`. ### 1️⃣ `layer.presentation` doesn't update its values during animation When we read `print("kv: \(KeyboardViewLocator.shared.resolve()?.layer.presentation()?.frame.origin.y)")` it will always give us values as "keyboard already opened": ```bash kv: Optional(528.0) kv: Optional(528.0) kv: Optional(528.0) kv: Optional(528.0) kv: Optional(528.0) kv: Optional(528.0) kv: Optional(528.0) ``` So it will cause "instant" animations and it's not something that developers expect to see. ### 2️⃣ `layer` doesn't contain the information about its `CAAnimation` While this problem is not such a critical, because we use fallback approach: if `animation` is `nil` then we just previous keyboard frame without additional frame correction. But it'll produce unsynchronized animation (we literally will come back to `react-native-keyboard-controller@1.11` version or earlier). So eventually we need to have an access to these variables. <hr> It's obvious that we need to get a tracking view to deliver smooth animations. I had few ideas how to add it: ### 1️⃣ Use `Notification` approach The first approach was to use keyboard notifications, put tracking view outside of visible screen area and track it. It works, but it'll give `CASpringAnimation` after interactive gesture dismissal (when keyboard goes up). I've tried various ideas, like changing frame without `UIView.animate` etc., but in all cases I got the same outcome: - animation can be `nil`; - animation may be `CASpringAnimation` instead of `CABasicAnimation`. ### 2️⃣ Use `inputAccessoryView` as tracking view The other idea was to setup listener on `inputAccessoryView`. In reality this view doesn't have any animation - I assume it's because of the fact, that it's attached to keyboard and keyboard drives the animation. _**Theoretically**_ we could lookup to `superview` and track its animation, but I didn't verify it - that solution would be pretty complex because we had to inject `inputAccessoryView` for each `TextInput`... ### 3️⃣ Use `keyboardLayoutGuide` for creating tracking view The other idea to try was usage of `keyboardLayoutGuide`. The idea the same as with `Notifications`. BUT! Fortunately that approach always gives proper animations and I can see `CABasicAnimation` for interactive dismissal case. This is how it looks if we make the view visible: https://github.com/user-attachments/assets/efef1976-1940-4a98-82d9-114f10df4022 The benefit of this approach is that we always can see how a native view behaves - react-native just replicates the native view. One limitation is that `keyboardLayoutGuide` is available from iOS 15. Moreover we use `usesBottomSafeArea` property, which is available starting from iOS 17. Taking all these facts into consideration and keeping in mind, that everything was pretty stable until iOS 26, I decided to use old implementation for all iOS version < 26. I don't want to break old code, but discovering bugs in new code/iOS is kind of expected process 😅 <hr> With the new concept of a compat layer (`KeyboardTrackingView`) we can separate concepts and move all interpolation code into `KeyboardTrackingView` class itself. As a proof of concept I fixed interactive keyboard dismissal for iOS 26+ - now we can embed all math for calculating keyboard position into this layer 😎 (so this PR will automatically close #975 - note it doesn't mean that I fully fixed interactive dismissal: this PR is a first step into making `react-native-keyboard-controller` codebase more predictable/enhanceable etc.): https://github.com/user-attachments/assets/5dda7a96-42d1-43ad-8cbd-7ca24828d0d1 Closes #975 ## 📢 Changelog    ### iOS - created `KeyboardTrackingView` as a compat layer (iOS < 26 and iOS 26+) - use `KeyboardTrackingView` in `KeyboardMovementObserver` and avoid direct usages of `keyboardView` instance; - move interactive interpolation code into `KeyboardTrackingView` from `KeyboardMovementObserver`. ## 🤔 How Has This Been Tested? Tested manually on: - iPhone 6s (iOS 15.8, real device); - iPhone 11 (iOS 26, real device) - iPhone 16 Pro (iOS 26, real device) - iPhone 14 Pro (iOS 18.4, real device) - iPhone 15 Pro (iOS 17.5, simulator) - iPhone 16 Pro (iOS 26, simulator) ## 📸 Screenshots (if appropriate): |Before|After| |-------|-----| |<video src="https://github.com/user-attachments/assets/e2c808dc-2aa5-4768-8974-4df429abba57">|<video src="https://github.com/user-attachments/assets/04448303-be1a-4c0b-b705-fe0c936726ad">| > captured with a fix for `did` events (dispatch them only after keyboard finish its animation) for both before/after cases. Captured on iOS 26 for better proof/visibility. ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
diff --git a/ios/observers/KeyboardMovementObserver.swift b/ios/observers/KeyboardMovementObserver.swift
@@ -18,7 +18,8 @@ public class KeyboardMovementObserver: NSObject {
   var onRequestAnimation: () -> Void
   var onCancelAnimation: () -> Void
   // progress tracker
-  private var keyboardView: UIView? { KeyboardViewLocator.shared.resolve() }
+  private var keyboardTrackingView = KeyboardTrackingView()
+
   private var prevKeyboardPosition = 0.0
   private var displayLink: CADisplayLink!
   private var interactiveKeyboardObserver: NSKeyValueObservation?
@@ -93,7 +94,7 @@ public class KeyboardMovementObserver: NSObject {
   }
 
   private func setupKVObserver() {
-    guard interactiveKeyboardObserver == nil, let view = keyboardView else { return }
+    guard interactiveKeyboardObserver == nil, let view = keyboardTrackingView.view else { return }
 
     interactiveKeyboardObserver = view.observe(\.center, options: .new) { [weak self] _, change in
       guard let self = self, let changeValue = change.newValue else { return }
@@ -115,21 +116,13 @@ public class KeyboardMovementObserver: NSObject {
     if !displayLink.isPaused {
       return
     }
-    // if keyboard height is not equal to its bounds - we can ignore
-    // values, since they'll be invalid and will cause UI jumps
-    if floor(keyboardView?.bounds.size.height ?? 0) != floor(_keyboardHeight) {
-      return
-    }
 
-    let keyboardFrameY = changeValue.y
-    let keyboardWindowH = keyboardView?.window?.bounds.size.height ?? 0
-    let keyboardPosition = keyboardWindowH - keyboardFrameY
+    let interactive = keyboardTrackingView.interactive(point: changeValue)
 
-    let position = CGFloat.interpolate(
-      inputRange: [_keyboardHeight / 2, -_keyboardHeight / 2],
-      outputRange: [_keyboardHeight, 0],
-      currentValue: keyboardPosition
-    ) - KeyboardAreaExtender.shared.offset
+    if interactive == KeyboardTrackingView.invalidPosition {
+      return
+    }
+    let position = interactive - KeyboardAreaExtender.shared.offset
 
     if position == 0 {
       // it will be triggered before `keyboardWillDisappear` and
@@ -192,10 +185,11 @@ public class KeyboardMovementObserver: NSObject {
 
   @objc func keyboardDidAppear(_ notification: Notification) {
     guard !UIResponder.isKeyboardPreloading else { return }
+
     let timestamp = Date.currentTimeStamp
     let (duration, frame) = notification.keyboardMetaData()
     if let keyboardFrame = frame {
-      let (position, _) = keyboardView.frameTransitionInWindow
+      let (position, _) = keyboardTrackingView.view.frameTransitionInWindow
       let keyboardHeight = keyboardFrame.cgRectValue.size.height
       tag = UIResponder.current.reactViewTag
       self.keyboardHeight = keyboardHeight
@@ -251,7 +245,7 @@ public class KeyboardMovementObserver: NSObject {
 
   func initializeAnimation(fromValue: Double, toValue: Double) {
     for key in ["position", "opacity"] {
-      if let keyboardAnimation = keyboardView?.layer.presentation()?.animation(forKey: key) {
+      if let keyboardAnimation = keyboardTrackingView.view?.layer.presentation()?.animation(forKey: key) {
         if let springAnimation = keyboardAnimation as? CASpringAnimation {
           animation = SpringAnimation(animation: springAnimation, fromValue: fromValue, toValue: toValue)
         } else if let basicAnimation = keyboardAnimation as? CABasicAnimation {
@@ -263,11 +257,11 @@ public class KeyboardMovementObserver: NSObject {
   }
 
   @objc func updateKeyboardFrame(link: CADisplayLink) {
-    if keyboardView == nil {
+    if keyboardTrackingView.view == nil {
       return
     }
 
-    let (visibleKeyboardHeight, keyboardFrameY) = keyboardView.frameTransitionInWindow
+    let (visibleKeyboardHeight, keyboardFrameY) = keyboardTrackingView.view.frameTransitionInWindow
     var keyboardPosition = visibleKeyboardHeight - KeyboardAreaExtender.shared.offset
 
     if keyboardPosition == prevKeyboardPosition || keyboardFrameY == 0 {
diff --git a/ios/observers/KeyboardTrackingView.swift b/ios/observers/KeyboardTrackingView.swift
@@ -0,0 +1,132 @@
+//
+//  KeyboardTrackingView.swift
+//  Pods
+//
+//  Created by Kiryl Ziusko on 25/07/2025.
+//
+
+import UIKit
+
+/**
+ * A compatibility view that resolves to `KeyboardView` on iOS < 26
+ * and uses `keyboardLayoutGuide` on iOS 26+.
+ */
+final class KeyboardTrackingView: UIView {
+  private var keyboardView: UIView? { KeyboardViewLocator.shared.resolve() }
+  private var keyboardHeight = 0.0
+
+  static let invalidPosition: CGFloat = -.greatestFiniteMagnitude
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    setup()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setup()
+  }
+
+  required init() {
+    super.init(frame: .zero)
+    setup()
+  }
+
+  deinit {
+    NotificationCenter.default.removeObserver(self)
+  }
+
+  private func setup() {
+    // for debug purposes
+    // self.backgroundColor = .red
+    isUserInteractionEnabled = false
+    isHidden = true
+
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(keyboardWillAppear),
+      name: UIResponder.keyboardWillShowNotification,
+      object: nil
+    )
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(keyboardDidAppear),
+      name: UIResponder.keyboardDidShowNotification,
+      object: nil
+    )
+
+    guard
+      let window = UIApplication.shared.activeWindow,
+      let rootView = window.rootViewController?.view
+    else {
+      return
+    }
+
+    rootView.addSubview(self)
+
+    translatesAutoresizingMaskIntoConstraints = false
+
+    if #available(iOS 17.0, *) {
+      rootView.keyboardLayoutGuide.usesBottomSafeArea = false
+    }
+
+    NSLayoutConstraint.activate([
+      leadingAnchor.constraint(equalTo: rootView.leadingAnchor, constant: 0),
+      trailingAnchor.constraint(equalTo: rootView.trailingAnchor, constant: 0),
+      bottomAnchor.constraint(equalTo: rootView.keyboardLayoutGuide.topAnchor, constant: 0),
+      heightAnchor.constraint(equalToConstant: 0),
+    ])
+  }
+
+  @objc private func keyboardWillAppear(_ notification: Notification) {
+    updateHeightFromNotification(notification)
+  }
+
+  @objc private func keyboardDidAppear(_ notification: Notification) {
+    updateHeightFromNotification(notification)
+  }
+
+  private func updateHeightFromNotification(_ notification: Notification) {
+    let (_, frame) = notification.keyboardMetaData()
+    if let keyboardFrame = frame {
+      let keyboardHeight = keyboardFrame.cgRectValue.size.height
+      self.keyboardHeight = keyboardHeight
+    }
+  }
+
+  @objc var view: UIView? {
+    if #available(iOS 26.0, *) {
+      return self
+    } else {
+      return keyboardView
+    }
+  }
+
+  func interactive(point: CGPoint) -> CGFloat {
+    guard let trackedView = view else { return Self.invalidPosition }
+
+    let keyboardFrameY = point.y
+    let keyboardWindowH = trackedView.window?.bounds.size.height ?? 0
+    let keyboardPosition = keyboardWindowH - keyboardFrameY
+
+    // for `keyboardLayoutGuide` case we can just read keyboard position directly - no interpolation needed
+    if #available(iOS 26.0, *) {
+      return keyboardPosition
+    }
+
+    // if keyboard height is not equal to its bounds - we can ignore
+    // values, since they'll be invalid and will cause UI jumps
+    // valid only for non-`keyboardLayoutGuide` case
+    if floor(trackedView.bounds.size.height) != floor(keyboardHeight) {
+      return Self.invalidPosition
+    }
+
+    let position = CGFloat.interpolate(
+      inputRange: [keyboardHeight / 2, -keyboardHeight / 2],
+      outputRange: [keyboardHeight, 0],
+      currentValue: keyboardPosition
+    )
+
+    return position
+  }
+}
