feat: keyboard offset on iOS

TODO

@@ -0,0 +1,13 @@
+- (x) close after interactive gesture - sudden jump of 75 pixels -> fixed by detaching iav during `onInteractive`
+- (x) keyboard hidden -> remove inputAccessoryView - done in resignFirstResponder
+- (x) iOS 16 - after attaching fake iav we dispatch onEnd with height - 248 (298 - 50) -> ignore events after attaching iav, because in keyboardDidAppear `position` can be a random value (291 or 341)
+- (x) text input grow -> can not make interactive gesture (Optional(424.6666666666667)  424.66666666666674) - maybe because of frequent conversions to CGFloat? <- fixed via rounding
+- 1 show after interactive - keyboard height is 386
+- 2 show after interactive - iav is not attached again
+- (x) 3 two events get dispatched when we remove iav in onInteractive - (dispatch `shouldIgnoreKeyboardEvents` in .hide (KEA)? - doesn't work because swizzle calls .hide when keyboard appear)
+- (x) 4 two events get dispatched after 2nd onInteractive (fix with pan gesture responder - when it's active ignore plain keyboard events)
+
+::  (x) call actual code for hide only once
+::: (x) dispatch ignore event when we actually hide iav (will fix 3)
+::: (add `lastOffset`) - will fix 1 <- last time when I added it was resetting somehow, need to figure out where and why exactly
+::: add code in `keyboardDidAppear` in KAE to increase/attach iav again (will fix 2)

android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardGestureAreaViewManager.kt

@@ -56,4 +56,12 @@ class KeyboardGestureAreaViewManager(
   ) {
     manager.setScrollKeyboardOffScreenWhenVisible(view as KeyboardGestureAreaReactViewGroup, value)
   }
+
+  @ReactProp(name = "textInputNativeID")
+  override fun setTextInputNativeID(
+    view: ReactViewGroup,
+    value: String?,
+  ) {
+    // no-op
+  }
 }

android/src/paper/java/com/reactnativekeyboardcontroller/KeyboardGestureAreaViewManager.kt

@@ -48,4 +48,13 @@ class KeyboardGestureAreaViewManager(
   ) {
     manager.setScrollKeyboardOffScreenWhenVisible(view, value)
   }
+
+  @Suppress("detekt:UnusedParameter")
+  @ReactProp(name = "textInputNativeID")
+  fun setTextInputNativeID(
+    view: KeyboardGestureAreaReactViewGroup,
+    value: String,
+  ) {
+    // no-op
+  }
 }

docs/docs/api/keyboard-gesture-area.md

@@ -10,12 +10,6 @@ keywords:
   ]
 ---
 
-<!-- prettier-ignore-start -->
-<!-- we explicitly specify title and h1 because we add badge to h1 and we don't want this element to go to table of contents -->
-<!-- markdownlint-disable-next-line MD025 -->
-# KeyboardGestureArea <div className="label android"></div>
-<!-- prettier-ignore-end -->
-
 `KeyboardGestureArea` allows you to define a region on the screen, where gestures will control the keyboard position.
 
 :::info Platform availability
@@ -28,27 +22,36 @@ This component is available only for Android >= 11. For iOS and Android < 11 it
 
 Extra distance to the keyboard. Default is `0`.
 
-### `interpolator`
+### `interpolator` <div className="label android"></div>
 
 String with possible values `linear` and `ios`:
 
 - **ios** - interactive keyboard dismissing will work as in iOS: swipes in non-keyboard area will not affect keyboard positioning, but if your swipe touches keyboard - keyboard will follow finger position.
 - **linear** - gestures inside the component will linearly affect the position of the keyboard, i.e. if the user swipes down by 20 pixels, then the keyboard will also be moved down by 20 pixels, even if the gesture was not made over the keyboard area.
 
-### `showOnSwipeUp`
+### `showOnSwipeUp` <div className="label android"></div>
 
 A boolean prop which allows to customize interactive keyboard behavior. If set to `true` then it allows to show keyboard (if it's already closed) by swipe up gesture. `false` by default.
 
-### `enableSwipeToDismiss`
+### `enableSwipeToDismiss` <div className="label android"></div>
 
 A boolean prop which allows to customize interactive keyboard behavior. If set to `false`, then any gesture will not affect keyboard position if the keyboard is shown. `true` by default.
 
+### `textInputNativeID` <div className="label ios"></div>
+
+A corresponding `nativeID` value from the corresponding `TextInput`.
+
 ## Example
 
 ```tsx
-<KeyboardGestureArea interpolator="ios" offset={50}>
+<KeyboardGestureArea
+  interpolator="ios"
+  offset={50}
+  textInputNativeID="composer"
+>
   <ScrollView>
     {/* The other UI components of application in your tree */}
   </ScrollView>
+  <TextInput nativeID="composer" />
 </KeyboardGestureArea>
 ```

example/src/screens/Examples/InteractiveKeyboardIOS/index.tsx

@@ -1,6 +1,9 @@
-import React, { useCallback, useRef } from "react";
-import { TextInput, View } from "react-native";
-import { useKeyboardHandler } from "react-native-keyboard-controller";
+import React, { useCallback, useRef, useState } from "react";
+import { TextInput } from "react-native";
+import {
+  KeyboardGestureArea,
+  useKeyboardHandler,
+} from "react-native-keyboard-controller";
 import Reanimated, {
   useAnimatedProps,
   useAnimatedScrollHandler,
@@ -13,6 +16,8 @@ import { history } from "../../../components/Message/data";
 
 import styles from "./styles";
 
+import type { LayoutChangeEvent } from "react-native";
+
 const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);
 
 const useKeyboardAnimation = () => {
@@ -38,8 +43,8 @@ const useKeyboardAnimation = () => {
         return;
       }
 
-      progress.value = e.progress;
-      height.value = e.height;
+      // progress.value = e.progress;
+      // height.value = e.height;
 
       inset.value = e.height;
       // Math.max is needed to prevent overscroll when keyboard hides (and user scrolled to the top, for example)
@@ -54,10 +59,10 @@ const useKeyboardAnimation = () => {
     onMove: (e) => {
       "worklet";
 
-      if (shouldUseOnMoveHandler.value) {
-        progress.value = e.progress;
-        height.value = e.height;
-      }
+      // if (shouldUseOnMoveHandler.value) {
+      progress.value = e.progress;
+      height.value = e.height;
+      // }
     },
     onEnd: (e) => {
       "worklet";
@@ -86,6 +91,11 @@ const contentContainerStyle = {
 function InteractiveKeyboard() {
   const ref = useRef<Reanimated.ScrollView>(null);
   const { height, onScroll, inset, offset } = useKeyboardAnimation();
+  const [inputHeight, setInputHeight] = useState(TEXT_INPUT_HEIGHT);
+
+  const onInputLayoutChanged = useCallback((e: LayoutChangeEvent) => {
+    setInputHeight(e.nativeEvent.layout.height);
+  }, []);
 
   const scrollToBottom = useCallback(() => {
     ref.current?.scrollToEnd({ animated: false });
@@ -94,7 +104,7 @@ function InteractiveKeyboard() {
   const textInputStyle = useAnimatedStyle(
     () => ({
       position: "absolute",
-      height: TEXT_INPUT_HEIGHT,
+      minHeight: TEXT_INPUT_HEIGHT,
       width: "100%",
       backgroundColor: "#BCBCBC",
       transform: [{ translateY: -height.value }],
@@ -113,7 +123,11 @@ function InteractiveKeyboard() {
   }));
 
   return (
-    <View style={styles.container}>
+    <KeyboardGestureArea
+      offset={inputHeight}
+      style={styles.container}
+      textInputNativeID="chat-input"
+    >
       <Reanimated.ScrollView
         ref={ref}
         // simulation of `automaticallyAdjustKeyboardInsets` behavior on RN < 0.73
@@ -130,8 +144,14 @@ function InteractiveKeyboard() {
           <Message key={index} {...message} />
         ))}
       </Reanimated.ScrollView>
-      <AnimatedTextInput style={textInputStyle} testID="chat.input" />
-    </View>
+      <AnimatedTextInput
+        multiline
+        nativeID="chat-input"
+        style={textInputStyle}
+        testID="chat.input"
+        onLayout={onInputLayoutChanged}
+      />
+    </KeyboardGestureArea>
   );
 }
 

ios/KeyboardControllerNative/KeyboardControllerNative/Extension+UIView.swift

@@ -12,4 +12,8 @@ public extension UIView {
   var reactTag: NSNumber {
     return tag as NSNumber
   }
+
+  var nativeID: String {
+    return accessibilityIdentifier ?? ""
+  }
 }

ios/extensions/Notification.swift

@@ -15,3 +15,7 @@ extension Notification {
     return (duration, keyboardFrame)
   }
 }
+
+extension Notification.Name {
+  static let shouldIgnoreKeyboardEvents = Notification.Name("shouldIgnoreKeyboardEvents")
+}

ios/extensions/UIResponder.swift

@@ -44,6 +44,13 @@ public extension Optional where Wrapped == UIResponder {
       return (self as? UIView)?.superview?.reactTag ?? -1
     #endif
   }
+
+  var nativeID: String? {
+    if let superview = (self as? UIView)?.superview as? UIView {
+      return superview.nativeID as String?
+    }
+    return nil
+  }
 }
 
 public extension Optional where Wrapped: UIResponder {

ios/interactive/InvisibleInputAccessoryView.swift

@@ -0,0 +1,60 @@
+//
+//  InvisibleInputAccessoryView.swift
+//  Pods
+//
+//  Created by Kiryl Ziusko on 01/11/2024.
+//
+
+import Foundation
+import UIKit
+
+public class InvisibleInputAccessoryView: UIView {
+  var isShown = true
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupView()
+  }
+
+  public convenience init(height: CGFloat) {
+    self.init(frame: CGRect(x: 0, y: 0, width: 0, height: height))
+  }
+
+  required init?(coder aDecoder: NSCoder) {
+    super.init(coder: aDecoder)
+    setupView()
+  }
+
+  override public func point(inside _: CGPoint, with _: UIEvent?) -> Bool {
+    // Return false to allow touch events to pass through
+    return false
+  }
+
+  public func updateHeight(to newHeight: CGFloat) {
+    frame = CGRect(x: 0, y: 0, width: 0, height: newHeight)
+
+    // Invalidate intrinsic content size to trigger a layout update
+    invalidateIntrinsicContentSize()
+    layoutIfNeeded()
+  }
+
+  public func hide() {
+    guard isShown else { return }
+    isShown = false
+    print("hide")
+    updateHeight(to: 0.0)
+    superview?.layoutIfNeeded()
+  }
+
+  override public var intrinsicContentSize: CGSize {
+    return CGSize(width: UIView.noIntrinsicMetric, height: frame.height)
+  }
+
+  private func setupView() {
+    isUserInteractionEnabled = false
+    // TODO: Set the background color to transparent
+    // backgroundColor = UIColor.red.withAlphaComponent(0.2)
+    backgroundColor = .clear
+    autoresizingMask = .flexibleHeight
+  }
+}

ios/interactive/KeyboardAreaExtender.swift

@@ -0,0 +1,68 @@
+//
+//  KeyboardAreaExtender.swift
+//  Pods
+//
+//  Created by Kiryl Ziusko on 02/11/2024.
+//
+
+class KeyboardAreaExtender: NSObject {
+  private var currentInputAccessoryView: InvisibleInputAccessoryView?
+
+  @objc public static let shared = KeyboardAreaExtender()
+
+  override private init() {
+    super.init()
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(keyboardDidAppear),
+      name: UIResponder.keyboardDidShowNotification,
+      object: nil
+    )
+  }
+
+  deinit {
+    NotificationCenter.default.removeObserver(self)
+  }
+
+  public var offset: CGFloat {
+    return currentInputAccessoryView?.frame.height ?? 0
+  }
+
+  public func hide() {
+    if (currentInputAccessoryView?.isShown ?? false) {
+      print("hide iav")
+      NotificationCenter.default.post(
+        name: .shouldIgnoreKeyboardEvents, object: nil, userInfo: ["ignore": true]
+      )
+      currentInputAccessoryView?.hide()
+    }
+    print("ignore hide")
+  }
+
+  public func updateHeight(_ to: CGFloat, _ nativeID: String) {
+    if UIResponder.current.nativeID == nativeID {
+      currentInputAccessoryView?.updateHeight(to: to)
+    }
+  }
+
+  @objc private func keyboardDidAppear(_: Notification) {
+    print("KEA - keyboardDidAppear \(Date.currentTimeStamp)")
+    let responder = UIResponder.current
+    if let activeTextInput = responder as? TextInput,
+       let offset = KeyboardOffsetProvider.shared.getOffset(
+         forTextInputNativeID: responder.nativeID),
+       responder?.inputAccessoryView == nil
+    {
+      currentInputAccessoryView = InvisibleInputAccessoryView(height: CGFloat(truncating: offset))
+
+      activeTextInput.inputAccessoryView = currentInputAccessoryView
+      activeTextInput.reloadInputViews()
+
+      NotificationCenter.default.post(
+        name: .shouldIgnoreKeyboardEvents, object: nil, userInfo: ["ignore": true]
+      )
+
+      print("Attaching `inputAccessoryView` \(Date.currentTimeStamp)")
+    }
+  }
+}

ios/interactive/KeyboardOffsetProvider.swift

@@ -0,0 +1,36 @@
+//
+//  KeyboardOffsetProvider.swift
+//  Pods
+//
+//  Created by Kiryl Ziusko on 01/11/2024.
+//
+
+import Foundation
+
+@objc(KeyboardOffsetProvider)
+public class KeyboardOffsetProvider: NSObject {
+  @objc public static let shared = KeyboardOffsetProvider()
+
+  override private init() {}
+
+  private var offsetMap: [String: NSNumber] = [:]
+
+  @objc public func setOffset(forTextInputNativeID nativeID: String, offset: NSNumber) {
+    KeyboardAreaExtender.shared.updateHeight(CGFloat(offset), nativeID)
+    offsetMap[nativeID] = offset
+  }
+
+  @objc public func getOffset(forTextInputNativeID nativeID: String?) -> NSNumber? {
+    guard let unwrappedNativeID = nativeID else { return nil }
+    return offsetMap[unwrappedNativeID]
+  }
+
+  @objc public func hasOffset(forTextInputNativeID nativeID: String?) -> Bool {
+    guard let unwrappedNativeID = nativeID else { return false }
+    return offsetMap[unwrappedNativeID] != nil
+  }
+
+  @objc public func removeOffset(forTextInputNativeID nativeID: String) {
+    offsetMap.removeValue(forKey: nativeID)
+  }
+}