feat: keyboard offset on iOS

FabricExample/patches/react-native+0.76.2.patch

@@ -0,0 +1,31 @@
+diff --git a/node_modules/react-native/.DS_Store b/node_modules/react-native/.DS_Store
+new file mode 100644
+index 0000000..597365c
+Binary files /dev/null and b/node_modules/react-native/.DS_Store differ
+diff --git a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
+index e74500f..c2d4515 100644
+--- a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
++++ b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
+@@ -68,6 +68,8 @@ @implementation RCTTextInputComponentView {
+    * later comparison insensitive to them.
+    */
+   NSDictionary<NSAttributedStringKey, id> *_originalTypingAttributes;
++  
++  BOOL _hasInputAccessoryView;
+ }
+
+ #pragma mark - UIView overrides
+@@ -590,10 +592,12 @@ - (void)setDefaultInputAccessoryView
+        keyboardType == UIKeyboardTypeDecimalPad || keyboardType == UIKeyboardTypeASCIICapableNumberPad) &&
+       containsKeyType;
+
+-  if ((_backedTextInputView.inputAccessoryView != nil) == shouldHaveInputAccessoryView) {
++  if (_hasInputAccessoryView == shouldHaveInputAccessoryView) {
+     return;
+   }
+
++  _hasInputAccessoryView = shouldHaveInputAccessoryView;
++
+   if (shouldHaveInputAccessoryView) {
+     NSString *buttonLabel = [self returnKeyTypeToString:returnKeyType];
+

FabricExample/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 = () => {
@@ -86,6 +91,12 @@ const contentContainerStyle = {
 function InteractiveKeyboard() {
   const ref = useRef<Reanimated.ScrollView>(null);
   const { height, onScroll, inset, offset } = useKeyboardAnimation();
+  const [inputHeight, setInputHeight] = useState(TEXT_INPUT_HEIGHT);
+  const [text, setText] = useState("");
+
+  const onInputLayoutChanged = useCallback((e: LayoutChangeEvent) => {
+    setInputHeight(e.nativeEvent.layout.height);
+  }, []);
 
   const scrollToBottom = useCallback(() => {
     ref.current?.scrollToEnd({ animated: false });
@@ -94,7 +105,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 +124,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 +145,16 @@ 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"
+        value={text}
+        onChangeText={setText}
+        onLayout={onInputLayoutChanged}
+      />
+    </KeyboardGestureArea>
   );
 }
 

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 = () => {
@@ -86,6 +91,12 @@ const contentContainerStyle = {
 function InteractiveKeyboard() {
   const ref = useRef<Reanimated.ScrollView>(null);
   const { height, onScroll, inset, offset } = useKeyboardAnimation();
+  const [inputHeight, setInputHeight] = useState(TEXT_INPUT_HEIGHT);
+  const [text, setText] = useState("");
+
+  const onInputLayoutChanged = useCallback((e: LayoutChangeEvent) => {
+    setInputHeight(e.nativeEvent.layout.height);
+  }, []);
 
   const scrollToBottom = useCallback(() => {
     ref.current?.scrollToEnd({ animated: false });
@@ -94,7 +105,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 +124,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 +145,16 @@ 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"
+        value={text}
+        onChangeText={setText}
+        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,16 @@ public extension Optional where Wrapped == UIResponder {
       return (self as? UIView)?.superview?.reactTag ?? -1
     #endif
   }
+
+  var nativeID: String? {
+    guard let superview = (self as? UIView)?.superview else { return nil }
+
+    #if KEYBOARD_CONTROLLER_NEW_ARCH_ENABLED
+      return (superview as NSObject).value(forKey: "nativeId") as? String
+    #else
+      return (superview as? UIView)?.nativeID
+    #endif
+  }
 }
 
 public extension Optional where Wrapped: UIResponder {

ios/interactive/InvisibleInputAccessoryView.swift

@@ -0,0 +1,59 @@
+//
+//  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
+    updateHeight(to: 0.0)
+    superview?.layoutIfNeeded()
+  }
+
+  override public var intrinsicContentSize: CGSize {
+    return CGSize(width: UIView.noIntrinsicMetric, height: frame.height)
+  }
+
+  private func setupView() {
+    isUserInteractionEnabled = false
+    // for debug purposes
+    // backgroundColor = UIColor.red.withAlphaComponent(0.2)
+    backgroundColor = .clear
+    autoresizingMask = .flexibleHeight
+  }
+}