react-native-keyboard-controller 1.11.6 → 1.12.0

package/android/src/main/java/com/reactnativekeyboardcontroller/events/FocusedInputLayoutChangedEvent.kt

@@ -19,7 +19,7 @@ class FocusedInputLayoutChangedEvent(
   surfaceId: Int,
   viewId: Int,
   private val event: FocusedInputLayoutChangedEventData,
-) : Event<KeyboardTransitionEvent>(surfaceId, viewId) {
+) : Event<FocusedInputLayoutChangedEvent>(surfaceId, viewId) {
   override fun getEventName() = "topFocusedInputLayoutChanged"
 
   // All events for a given view can be coalesced

package/android/src/main/java/com/reactnativekeyboardcontroller/events/FocusedInputSelectionChangedEvent.kt

@@ -0,0 +1,51 @@
+package com.reactnativekeyboardcontroller.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+data class FocusedInputSelectionChangedEventData(
+  val target: Int,
+  val startX: Double,
+  val startY: Double,
+  val endX: Double,
+  val endY: Double,
+  val start: Int,
+  val end: Int,
+)
+
+class FocusedInputSelectionChangedEvent(
+  surfaceId: Int,
+  viewId: Int,
+  private val event: FocusedInputSelectionChangedEventData,
+) : Event<FocusedInputSelectionChangedEvent>(surfaceId, viewId) {
+  override fun getEventName() = "topFocusedInputSelectionChanged"
+
+  // All events for a given view can be coalesced
+  override fun getCoalescingKey(): Short = 0
+
+  override fun getEventData(): WritableMap? = Arguments.createMap().apply {
+    putInt("target", event.target)
+    putMap(
+      "selection",
+      Arguments.createMap().apply {
+        putMap(
+          "start",
+          Arguments.createMap().apply {
+            putDouble("x", event.startX)
+            putDouble("y", event.startY)
+            putInt("position", event.start)
+          },
+        )
+        putMap(
+          "end",
+          Arguments.createMap().apply {
+            putDouble("x", event.endX)
+            putDouble("y", event.endY)
+            putInt("position", event.end)
+          },
+        )
+      },
+    )
+  }
+}

package/android/src/main/java/com/reactnativekeyboardcontroller/events/FocusedInputTextChangedEvent.kt

@@ -8,7 +8,7 @@ class FocusedInputTextChangedEvent(
   surfaceId: Int,
   viewId: Int,
   private val text: String,
-) : Event<KeyboardTransitionEvent>(surfaceId, viewId) {
+) : Event<FocusedInputTextChangedEvent>(surfaceId, viewId) {
   override fun getEventName() = "topFocusedInputTextChanged"
 
   // All events for a given view can be coalesced

package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/EditText.kt

@@ -1,5 +1,6 @@
 package com.reactnativekeyboardcontroller.extensions
 
+import android.os.Build
 import android.text.Editable
 import android.text.TextWatcher
 import android.util.Log
@@ -7,7 +8,10 @@ import android.view.View
 import android.widget.EditText
 import android.widget.ScrollView
 import com.facebook.react.views.textinput.ReactEditText
+import com.reactnativekeyboardcontroller.ui.FrameScheduler
 import java.lang.reflect.Field
+import kotlin.math.max
+import kotlin.math.min
 
 /**
  * Adds a listener that will be fired only once for each unique value.
@@ -94,3 +98,78 @@ fun EditText?.focus() {
     this?.requestFocus()
   }
 }
+
+class KeyboardControllerSelectionWatcher(
+  private val editText: ReactEditText,
+  private val action: (start: Int, end: Int, startX: Double, startY: Double, endX: Double, endY: Double) -> Unit,
+) {
+  private var lastSelectionStart: Int = -1
+  private var lastSelectionEnd: Int = -1
+
+  private val frameScheduler = FrameScheduler {
+    val start = editText.selectionStart
+    val end = editText.selectionEnd
+
+    if (lastSelectionStart != start || lastSelectionEnd != end) {
+      lastSelectionStart = start
+      lastSelectionEnd = end
+
+      val view = editText
+      val layout = view.layout
+
+      if (layout === null) {
+        return@FrameScheduler
+      }
+
+      val cursorPositionStartX: Float
+      val cursorPositionStartY: Float
+      val cursorPositionEndX: Float
+      val cursorPositionEndY: Float
+
+      val realStart = min(start, end)
+      val realEnd = max(start, end)
+
+      val lineStart = layout.getLineForOffset(realStart)
+      val baselineStart = layout.getLineBaseline(lineStart)
+      val ascentStart = layout.getLineAscent(lineStart)
+
+      cursorPositionStartX = layout.getPrimaryHorizontal(realStart)
+      cursorPositionStartY = (baselineStart + ascentStart).toFloat()
+
+      val lineEnd = layout.getLineForOffset(realEnd)
+
+      val right = layout.getPrimaryHorizontal(realEnd)
+      val bottom = layout.getLineBottom(lineEnd) + layout.getLineAscent(lineEnd)
+      val cursorWidth = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+        view.textCursorDrawable?.intrinsicWidth ?: 0
+      } else {
+        0
+      }
+
+      cursorPositionEndX = right + cursorWidth
+      cursorPositionEndY = bottom.toFloat()
+
+      action(start, end, cursorPositionStartX.dp, cursorPositionStartY.dp, cursorPositionEndX.dp, cursorPositionEndY.dp)
+    }
+  }
+
+  fun setup() {
+    frameScheduler.start()
+  }
+
+  fun destroy() {
+    frameScheduler.stop()
+  }
+}
+
+fun ReactEditText.addOnSelectionChangedListener(
+  action: (start: Int, end: Int, startX: Double, startY: Double, endX: Double, endY: Double) -> Unit,
+): () -> Unit {
+  val listener = KeyboardControllerSelectionWatcher(this, action)
+
+  listener.setup()
+
+  return {
+    listener.destroy()
+  }
+}

package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/ThemedReactContext.kt

@@ -3,7 +3,6 @@ package com.reactnativekeyboardcontroller.extensions
 import android.util.Log
 import android.view.View
 import com.facebook.react.bridge.WritableMap
-import com.facebook.react.modules.core.DeviceEventManagerModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.Event
@@ -19,7 +18,7 @@ fun ThemedReactContext?.dispatchEvent(viewId: Int, event: Event<*>) {
 }
 
 fun ThemedReactContext?.emitEvent(event: String, params: WritableMap) {
-  this?.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)?.emit(event, params)
+  this?.reactApplicationContext?.emitDeviceEvent(event, params)
 
   Log.i("ThemedReactContext", event)
 }

package/android/src/main/java/com/reactnativekeyboardcontroller/extensions/View.kt

@@ -7,7 +7,7 @@ import android.view.View
 import androidx.annotation.RequiresApi
 
 /**
- * Call this everytime when using [ViewCompat.setOnApplyWindowInsetsListener]
+ * Call this every time when using [ViewCompat.setOnApplyWindowInsetsListener]
  * to ensure that insets are always received.
  * @see https://stackoverflow.com/a/61909205/9272042
  */

package/android/src/main/java/com/reactnativekeyboardcontroller/interactive/interpolators/IosInterpolator.kt

@@ -7,7 +7,7 @@ class IosInterpolator : Interpolator {
     keyboardPosition: Int,
   ): Int {
     if (
-      absoluteFingerPosition <= keyboardPosition || // user overscrolled keyboard
+      absoluteFingerPosition <= keyboardPosition || // user over scrolled keyboard
       dy <= 0 // user scrolls up
     ) {
       return dy

package/android/src/main/java/com/reactnativekeyboardcontroller/listeners/FocusedInputObserver.kt

@@ -10,7 +10,10 @@ import com.facebook.react.views.textinput.ReactEditText
 import com.facebook.react.views.view.ReactViewGroup
 import com.reactnativekeyboardcontroller.events.FocusedInputLayoutChangedEvent
 import com.reactnativekeyboardcontroller.events.FocusedInputLayoutChangedEventData
+import com.reactnativekeyboardcontroller.events.FocusedInputSelectionChangedEvent
+import com.reactnativekeyboardcontroller.events.FocusedInputSelectionChangedEventData
 import com.reactnativekeyboardcontroller.events.FocusedInputTextChangedEvent
+import com.reactnativekeyboardcontroller.extensions.addOnSelectionChangedListener
 import com.reactnativekeyboardcontroller.extensions.addOnTextChangedListener
 import com.reactnativekeyboardcontroller.extensions.dispatchEvent
 import com.reactnativekeyboardcontroller.extensions.dp
@@ -40,6 +43,7 @@ class FocusedInputObserver(val view: ReactViewGroup, private val context: Themed
   private var lastFocusedInput: ReactEditText? = null
   private var lastEventDispatched: FocusedInputLayoutChangedEventData = noFocusedInputEvent
   private var textWatcher: TextWatcher? = null
+  private var selectionSubscription: (() -> Unit)? = null
 
   // listeners
   private val layoutListener =
@@ -57,11 +61,38 @@ class FocusedInputObserver(val view: ReactViewGroup, private val context: Themed
       ),
     )
   }
+  private val selectionListener: (
+    start: Int,
+    end: Int,
+    startX: Double,
+    startY: Double,
+    endX: Double,
+    endY: Double,
+  ) -> Unit = listener@{ start, end, startX, startY, endX, endY ->
+    val input = lastFocusedInput ?: return@listener
+    context.dispatchEvent(
+      view.id,
+      FocusedInputSelectionChangedEvent(
+        surfaceId,
+        view.id,
+        event = FocusedInputSelectionChangedEventData(
+          target = input.id,
+          start = start,
+          end = end,
+          startX = startX,
+          startY = startY,
+          endX = endX,
+          endY = endY,
+        ),
+      ),
+    )
+  }
   private val focusListener = OnGlobalFocusChangeListener { oldFocus, newFocus ->
     // unfocused or focused was changed
     if (newFocus == null || oldFocus != null) {
       lastFocusedInput?.removeOnLayoutChangeListener(layoutListener)
       lastFocusedInput?.removeTextChangedListener(textWatcher)
+      selectionSubscription?.invoke()
       lastFocusedInput = null
     }
     if (newFocus is ReactEditText) {
@@ -69,6 +100,7 @@ class FocusedInputObserver(val view: ReactViewGroup, private val context: Themed
       newFocus.addOnLayoutChangeListener(layoutListener)
       this.syncUpLayout()
       textWatcher = newFocus.addOnTextChangedListener(textListener)
+      selectionSubscription = newFocus.addOnSelectionChangedListener(selectionListener)
       FocusedInputHolder.set(newFocus)
 
       val allInputFields = ViewHierarchyNavigator.getAllInputFields(context?.rootView)

package/android/src/main/java/com/reactnativekeyboardcontroller/listeners/KeyboardAnimationCallback.kt

@@ -54,7 +54,7 @@ class KeyboardAnimationCallback(
         // imitate iOS behavior and send two instant start/end events containing an info about new tag
         // 1. onStart/onMove/onEnd can be still dispatched after, if keyboard change size (numeric -> alphabetic type)
         // 2. event should be send only when keyboard is visible, since this event arrives earlier -> `tag` will be
-        // 100% included in onStart/onMove/onEnd lifecycles, but triggering onStart/onEnd several time
+        // 100% included in onStart/onMove/onEnd life cycles, but triggering onStart/onEnd several time
         // can bring breaking changes
         context.dispatchEvent(
           view.id,

package/android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardControllerViewManagerImpl.kt

@@ -37,6 +37,8 @@ class KeyboardControllerViewManagerImpl(mReactContext: ReactApplicationContext)
       MapBuilder.of("registrationName", "onFocusedInputLayoutChanged"),
       "topFocusedInputTextChanged",
       MapBuilder.of("registrationName", "onFocusedInputTextChanged"),
+      "topFocusedInputSelectionChanged",
+      MapBuilder.of("registrationName", "onFocusedInputSelectionChanged"),
     )
 
     return map

package/android/src/main/java/com/reactnativekeyboardcontroller/ui/FrameScheduler.kt

@@ -0,0 +1,40 @@
+package com.reactnativekeyboardcontroller.ui
+
+import android.view.Choreographer
+
+/**
+ * A class that schedules a callback to be executed on each frame using the Android Choreographer framework.
+ *
+ * @property callback The function to be executed on each frame.
+ */
+class FrameScheduler(private val callback: () -> Unit) {
+  /**
+   * A FrameCallback instance responsible for running the provided callback
+   * on each frame and rescheduling itself for the next frame.
+   */
+  private val frameCallback = object : Choreographer.FrameCallback {
+    override fun doFrame(frameTimeNanoSeconds: Long) {
+      // Execute the callback
+      callback()
+
+      // Re-post the callback to the next frame
+      Choreographer.getInstance().postFrameCallback(this)
+    }
+  }
+
+  /**
+   * Starts the frame callback, which will continuously call the provided function
+   * on every frame until `stop()` is called.
+   */
+  fun start() {
+    Choreographer.getInstance().postFrameCallback(frameCallback)
+  }
+
+  /**
+   * Stops the frame callback from being invoked further. The function will no longer
+   * be called on each frame until `start()` is invoked again.
+   */
+  fun stop() {
+    Choreographer.getInstance().removeFrameCallback(frameCallback)
+  }
+}

package/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt

@@ -32,7 +32,7 @@ class EdgeToEdgeReactViewGroup(private val reactContext: ThemedReactContext) : R
   private var wasMounted = false
   private var callback: KeyboardAnimationCallback? = null
 
-  // region View lifecycles
+  // region View life cycles
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
 

package/ios/KeyboardController-Bridging-Header.h

@@ -1,2 +1,3 @@
 #import <React/RCTUIManager.h>
+#import <React/RCTUITextView.h>
 #import <React/RCTViewManager.h>

package/ios/core/KeyboardAnimation.swift

@@ -0,0 +1,77 @@
+//
+//  KeyboardAnimation.swift
+//  react-native-keyboard-controller
+//
+//  Created by Kiryl Ziusko on 04/05/2024.
+//
+
+import Foundation
+
+protocol KeyboardAnimationProtocol {
+  var startTime: CFTimeInterval { get }
+  var diff: Double { get }
+  var isIncreasing: Bool { get }
+
+  func valueAt(time: Double) -> Double
+  func timingAt(value: Double) -> Double
+}
+
+public class KeyboardAnimation: KeyboardAnimationProtocol {
+  private weak var animation: CAMediaTiming?
+
+  // constructor variables
+  let fromValue: Double
+  let toValue: Double
+  let speed: Float
+  let timestamp: CFTimeInterval
+
+  init(fromValue: Double, toValue: Double, animation: CAMediaTiming) {
+    self.fromValue = fromValue
+    self.toValue = toValue
+    self.animation = animation
+    speed = animation.speed
+    timestamp = CACurrentMediaTime()
+  }
+
+  // public getters
+  var startTime: CFTimeInterval {
+    // when concurrent animation happens, then `.beginTime` remains the same
+    return max(animation?.beginTime ?? timestamp, timestamp)
+  }
+
+  var diff: Double {
+    return ((animation?.beginTime ?? timestamp) - timestamp).truncatingRemainder(dividingBy: UIUtils.nextFrame)
+  }
+
+  var isIncreasing: Bool {
+    return fromValue < toValue
+  }
+
+  func valueAt(time _: Double) -> Double {
+    fatalError("Method is not implemented in abstract class!")
+  }
+
+  func timingAt(value: Double) -> Double {
+    var lowerBound = 0.0
+    var upperBound = 1.0 // Assuming 1 second is the max duration for simplicity
+    let tolerance = 0.00001 // Define how precise you want to be
+    var tGuess = 0.0
+
+    // Check the direction of the animation
+    let isIncreasing = isIncreasing
+
+    while (upperBound - lowerBound) > tolerance {
+      tGuess = (lowerBound + upperBound) / 2
+      let currentValue = valueAt(time: tGuess / Double(speed))
+
+      // Adjust the condition to account for the direction of animation
+      if (currentValue < value && isIncreasing) || (currentValue > value && !isIncreasing) {
+        lowerBound = tGuess
+      } else {
+        upperBound = tGuess
+      }
+    }
+
+    return tGuess / Double(speed)
+  }
+}

package/ios/core/SpringAnimation.swift

@@ -0,0 +1,60 @@
+//
+//  SpringAnimation.swift
+//  KeyboardController
+//
+//  Created by Kiryl Ziusko on 18/03/2024.
+//  Copyright © 2024 Facebook. All rights reserved.
+//
+
+import Foundation
+import QuartzCore
+
+// swiftlint:disable identifier_name
+public class SpringAnimation: KeyboardAnimation {
+  // internal variables
+  private let zeta: Double // Damping ratio
+  private let omega0: Double // Undamped angular frequency of the oscillator
+  private let omega1: Double // Exponential decay
+  private let v0: Double // Initial velocity
+
+  // constructor variables
+  private let stiffness: Double
+  private let damping: Double
+  private let mass: Double
+  private let initialVelocity: Double
+
+  init(animation: CASpringAnimation, fromValue: Double, toValue: Double) {
+    stiffness = animation.stiffness
+    damping = animation.damping
+    mass = animation.mass
+    initialVelocity = animation.initialVelocity
+
+    zeta = damping / (2 * sqrt(stiffness * mass)) // Damping ratio
+    omega0 = sqrt(stiffness / mass) // Undamped angular frequency of the oscillator
+    omega1 = omega0 * sqrt(1.0 - zeta * zeta) // Exponential decay
+    v0 = -initialVelocity
+
+    super.init(fromValue: fromValue, toValue: toValue, animation: animation)
+  }
+
+  // public functions
+  override func valueAt(time: Double) -> Double {
+    let t = time * Double(speed)
+    let x0 = toValue - fromValue
+
+    var y: Double
+    if zeta < 1 {
+      // Under damped
+      let envelope = exp(-zeta * omega0 * t)
+      y = toValue - envelope * (((v0 + zeta * omega0 * x0) / omega1) * sin(omega1 * t) + x0 * cos(omega1 * t))
+    } else {
+      // Critically damped
+      let envelope = exp(-omega0 * t)
+      y = toValue - envelope * (x0 + (v0 + omega0 * x0) * t)
+    }
+
+    return y
+  }
+}
+
+// swiftlint:enable identifier_name

package/ios/core/UIUtils.swift

@@ -0,0 +1,11 @@
+//
+//  UIUtils.swift
+//  KeyboardController
+//
+//  Created by Kiryl Ziusko on 14/04/2024.
+//  Copyright © 2024 Facebook. All rights reserved.
+//
+
+enum UIUtils {
+  static let nextFrame = 1.0 / 60
+}

package/ios/delegates/KCTextInputCompositeDelegate.swift

@@ -0,0 +1,148 @@
+//
+//  KCTextInputCompositeDelegate.swift
+//  react-native-keyboard-controller
+//
+//  Created by Kiryl Ziusko on 24/04/2024.
+//
+
+import Foundation
+
+struct Selection {
+  var start: Int
+  var startX: CGFloat
+  var startY: CGFloat
+  var end: Int
+  var endX: CGFloat
+  var endY: CGFloat
+}
+
+func textSelection(in textInput: UITextInput) -> Selection? {
+  if let selectedRange = textInput.selectedTextRange {
+    let caretRectStart = textInput.caretRect(for: selectedRange.start)
+    let caretRectEnd = textInput.caretRect(for: selectedRange.end)
+
+    let coordinates = Selection(
+      start: textInput.offset(from: textInput.beginningOfDocument, to: selectedRange.start),
+      startX: caretRectStart.origin.x,
+      startY: caretRectStart.origin.y,
+      end: textInput.offset(from: textInput.beginningOfDocument, to: selectedRange.end),
+      endX: caretRectEnd.origin.x + caretRectEnd.size.width,
+      endY: caretRectEnd.origin.y + caretRectEnd.size.height
+    )
+
+    return coordinates
+  }
+
+  return nil
+}
+
+/**
+ * A delegate that is being set to any focused input
+ * and intercepts some specific events that needs to be handled
+ * for universal keyboard avoiding solutions (such as text selection etc.)
+ * and forward all calls to underlying delegate
+ */
+class KCTextInputCompositeDelegate: NSObject, UITextViewDelegate, UITextFieldDelegate {
+  // constructor members
+  var onSelectionChange: (_ event: NSDictionary) -> Void
+  var onTextChange: (_ text: String?) -> Void
+  // delegates
+  weak var textViewDelegate: UITextViewDelegate?
+  weak var textFieldDelegate: UITextFieldDelegate?
+
+  public init(
+    onSelectionChange: @escaping (_ event: NSDictionary) -> Void,
+    onTextChange: @escaping (_ text: String?) -> Void
+  ) {
+    self.onSelectionChange = onSelectionChange
+    self.onTextChange = onTextChange
+  }
+
+  // MARK: setters/getters
+
+  public func setTextViewDelegate(delegate: UITextViewDelegate?) {
+    textViewDelegate = delegate
+    textFieldDelegate = nil
+  }
+
+  public func setTextFieldDelegate(delegate: UITextFieldDelegate?) {
+    textFieldDelegate = delegate
+    textViewDelegate = nil
+  }
+
+  // Getter for the active delegate
+  public var activeDelegate: AnyObject? {
+    return textViewDelegate ?? textFieldDelegate
+  }
+
+  // MARK: UITextViewDelegate
+
+  func textViewDidChangeSelection(_ textView: UITextView) {
+    textViewDelegate?.textViewDidChangeSelection?(textView)
+    updateSelectionPosition(textInput: textView)
+  }
+
+  func textViewDidChange(_ textView: UITextView) {
+    defer {
+      self.onTextChange(textView.text)
+    }
+
+    textViewDelegate?.textViewDidChange?(textView)
+  }
+
+  // MARK: UITextFieldDelegate
+
+  func textFieldDidChangeSelection(_ textField: UITextField) {
+    textFieldDelegate?.textFieldDidChangeSelection?(textField)
+    updateSelectionPosition(textInput: textField)
+  }
+
+  func textField(
+    _ textField: UITextField,
+    shouldChangeCharactersIn range: NSRange,
+    replacementString string: String
+  ) -> Bool {
+    defer {
+      self.onTextChange(textField.text)
+    }
+
+    return textFieldDelegate?.textField?(textField, shouldChangeCharactersIn: range, replacementString: string) ?? true
+  }
+
+  // MARK: call forwarding
+
+  override func responds(to aSelector: Selector!) -> Bool {
+    if super.responds(to: aSelector) {
+      return true
+    }
+    return activeDelegate?.responds(to: aSelector) ?? false
+  }
+
+  override func forwardingTarget(for aSelector: Selector!) -> Any? {
+    if activeDelegate?.responds(to: aSelector) ?? false {
+      return activeDelegate
+    }
+    return super.forwardingTarget(for: aSelector)
+  }
+
+  // MARK: Private functions
+
+  private func updateSelectionPosition(textInput: UITextInput) {
+    if let selection = textSelection(in: textInput) {
+      onSelectionChange([
+        "selection": [
+          "start": [
+            "x": selection.startX,
+            "y": selection.startY,
+            "position": selection.start,
+          ],
+          "end": [
+            "x": selection.endX,
+            "y": selection.endY,
+            "position": selection.end,
+          ],
+        ],
+      ])
+    }
+  }
+}

package/ios/events/FocusedInputSelectionChangedEvent.h

@@ -0,0 +1,15 @@
+//
+//  FocusedInputSelectionChangedEvent.h
+//  KeyboardController
+//
+//  Created by Kiryl Ziusko on 23/04/2024.
+//
+
+#import <Foundation/Foundation.h>
+#import <React/RCTEventDispatcherProtocol.h>
+
+@interface FocusedInputSelectionChangedEvent : NSObject <RCTEvent>
+
+- (instancetype)initWithReactTag:(NSNumber *)reactTag event:(NSObject *)event;
+
+@end