react-native-keyboard-controller 1.10.6 → 1.11.1

package/README.md

@@ -14,6 +14,7 @@ Keyboard manager which works in identical way on both iOS and Android.
 - reanimated support 🚀
 - interactive keyboard dismissing 👆📱
 - prebuilt components (`KeyboardStickyView`, `KeyboardAwareScrollView`, re-worked `KeyboardAvoidingView`) 📚
+- `KeyboardToolbar` with easy behavior customization of _**previous**_, _**next**_ and _**done**_ buttons in the keyboard toolbar 📐
 - easy focused input information retrieval 📝 🔮
 - works with any navigation library 🧭
 - and more is coming... Stay tuned! 😊

package/android/build.gradle

@@ -170,4 +170,10 @@ dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   implementation 'androidx.core:core-ktx:1.5.0-beta03'
   implementation 'androidx.dynamicanimation:dynamicanimation-ktx:1.0.0-alpha03'
+
+  // dependencies for testing
+  testImplementation 'junit:junit:4.13.2'
+  testImplementation 'org.robolectric:robolectric:4.11.1'
+  testImplementation 'androidx.test:core:1.5.0'
+  testImplementation "androidx.test:core-ktx:1.5.0"
 }

package/android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerModule.kt

@@ -20,6 +20,10 @@ class KeyboardControllerModule(mReactContext: ReactApplicationContext) : NativeK
     module.dismiss()
   }
 
+  override fun setFocusTo(direction: String) {
+    module.setFocusTo(direction)
+  }
+
   override fun addListener(eventName: String?) {
     /* Required for RN built-in Event Emitter Calls. */
   }

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

@@ -12,6 +12,7 @@ data class FocusedInputLayoutChangedEventData(
   val absoluteX: Double,
   val absoluteY: Double,
   val target: Int,
+  val parentScrollViewTarget: Int,
 )
 
 class FocusedInputLayoutChangedEvent(
@@ -26,6 +27,7 @@ class FocusedInputLayoutChangedEvent(
 
   override fun getEventData(): WritableMap? = Arguments.createMap().apply {
     putInt("target", event.target)
+    putInt("parentScrollViewTarget", event.parentScrollViewTarget)
     putMap(
       "layout",
       Arguments.createMap().apply {

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

@@ -3,7 +3,9 @@ package com.reactnativekeyboardcontroller.extensions
 import android.text.Editable
 import android.text.TextWatcher
 import android.util.Log
+import android.view.View
 import android.widget.EditText
+import android.widget.ScrollView
 import com.facebook.react.views.textinput.ReactEditText
 import java.lang.reflect.Field
 
@@ -64,3 +66,23 @@ fun EditText.addOnTextChangedListener(action: (String) -> Unit): TextWatcher {
 
   return listener
 }
+
+val EditText.parentScrollViewTarget: Int
+  get() {
+    var currentView: View? = this
+
+    while (currentView != null) {
+      val parentView = currentView.parent as? View
+
+      if (parentView is ScrollView) {
+        // If the parent is a ScrollView, return its id
+        return parentView.id
+      }
+
+      // Move to the next parent view
+      currentView = parentView
+    }
+
+    // ScrollView was not found
+    return -1
+  }

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

@@ -1,6 +1,9 @@
 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
@@ -14,3 +17,9 @@ fun ThemedReactContext?.dispatchEvent(viewId: Int, event: Event<*>) {
     UIManagerHelper.getEventDispatcherForReactTag(this, viewId)
   eventDispatcher?.dispatchEvent(event)
 }
+
+fun ThemedReactContext?.emitEvent(event: String, params: WritableMap) {
+  this?.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)?.emit(event, params)
+
+  Log.i("ThemedReactContext", event)
+}

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

@@ -3,6 +3,7 @@ package com.reactnativekeyboardcontroller.listeners
 import android.text.TextWatcher
 import android.view.View.OnLayoutChangeListener
 import android.view.ViewTreeObserver.OnGlobalFocusChangeListener
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.views.textinput.ReactEditText
@@ -13,7 +14,12 @@ import com.reactnativekeyboardcontroller.events.FocusedInputTextChangedEvent
 import com.reactnativekeyboardcontroller.extensions.addOnTextChangedListener
 import com.reactnativekeyboardcontroller.extensions.dispatchEvent
 import com.reactnativekeyboardcontroller.extensions.dp
+import com.reactnativekeyboardcontroller.extensions.emitEvent
+import com.reactnativekeyboardcontroller.extensions.parentScrollViewTarget
+import com.reactnativekeyboardcontroller.extensions.rootView
 import com.reactnativekeyboardcontroller.extensions.screenLocation
+import com.reactnativekeyboardcontroller.traversal.FocusedInputHolder
+import com.reactnativekeyboardcontroller.traversal.ViewHierarchyNavigator
 
 val noFocusedInputEvent = FocusedInputLayoutChangedEventData(
   x = 0.0,
@@ -23,6 +29,7 @@ val noFocusedInputEvent = FocusedInputLayoutChangedEventData(
   absoluteX = 0.0,
   absoluteY = 0.0,
   target = -1,
+  parentScrollViewTarget = -1,
 )
 
 class FocusedInputObserver(val view: ReactViewGroup, private val context: ThemedReactContext?) {
@@ -62,6 +69,18 @@ class FocusedInputObserver(val view: ReactViewGroup, private val context: Themed
       newFocus.addOnLayoutChangeListener(layoutListener)
       this.syncUpLayout()
       textWatcher = newFocus.addOnTextChangedListener(textListener)
+      FocusedInputHolder.set(newFocus)
+
+      val allInputFields = ViewHierarchyNavigator.getAllInputFields(context?.rootView)
+      val currentIndex = allInputFields.indexOf(newFocus)
+
+      context.emitEvent(
+        "KeyboardController::focusDidSet",
+        Arguments.createMap().apply {
+          putInt("current", currentIndex)
+          putInt("count", allInputFields.size)
+        },
+      )
     }
     // unfocused
     if (newFocus == null) {
@@ -85,6 +104,7 @@ class FocusedInputObserver(val view: ReactViewGroup, private val context: Themed
       absoluteX = x.toFloat().dp,
       absoluteY = y.toFloat().dp,
       target = input.id,
+      parentScrollViewTarget = input.parentScrollViewTarget,
     )
 
     dispatchEventToJS(event)

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

@@ -13,7 +13,6 @@ import androidx.core.view.WindowInsetsAnimationCompat
 import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.bridge.Arguments
 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.views.textinput.ReactEditText
@@ -21,6 +20,7 @@ import com.facebook.react.views.view.ReactViewGroup
 import com.reactnativekeyboardcontroller.events.KeyboardTransitionEvent
 import com.reactnativekeyboardcontroller.extensions.dispatchEvent
 import com.reactnativekeyboardcontroller.extensions.dp
+import com.reactnativekeyboardcontroller.extensions.emitEvent
 import com.reactnativekeyboardcontroller.extensions.isKeyboardAnimation
 import com.reactnativekeyboardcontroller.interactive.InteractiveKeyboardProvider
 import kotlin.math.abs
@@ -80,8 +80,8 @@ class KeyboardAnimationCallback(
             viewTagFocused,
           ),
         )
-        this.emitEvent("KeyboardController::keyboardWillShow", getEventParams(this.persistentKeyboardHeight))
-        this.emitEvent("KeyboardController::keyboardDidShow", getEventParams(this.persistentKeyboardHeight))
+        context.emitEvent("KeyboardController::keyboardWillShow", getEventParams(this.persistentKeyboardHeight))
+        context.emitEvent("KeyboardController::keyboardDidShow", getEventParams(this.persistentKeyboardHeight))
       }
     }
   }
@@ -158,7 +158,7 @@ class KeyboardAnimationCallback(
     }
 
     layoutObserver?.syncUpLayout()
-    this.emitEvent(
+    context.emitEvent(
       "KeyboardController::" + if (!isKeyboardVisible) "keyboardWillHide" else "keyboardWillShow",
       getEventParams(keyboardHeight),
     )
@@ -255,7 +255,7 @@ class KeyboardAnimationCallback(
     }
     isKeyboardVisible = isKeyboardVisible || isKeyboardShown
 
-    this.emitEvent(
+    context.emitEvent(
       "KeyboardController::" + if (!isKeyboardVisible) "keyboardDidHide" else "keyboardDidShow",
       getEventParams(keyboardHeight),
     )
@@ -299,7 +299,7 @@ class KeyboardAnimationCallback(
       this.animation?.cancel()
     }
 
-    this.emitEvent("KeyboardController::keyboardWillShow", getEventParams(keyboardHeight))
+    context.emitEvent("KeyboardController::keyboardWillShow", getEventParams(keyboardHeight))
     context.dispatchEvent(
       view.id,
       KeyboardTransitionEvent(
@@ -331,7 +331,7 @@ class KeyboardAnimationCallback(
       )
     }
     animation.doOnEnd {
-      this.emitEvent("KeyboardController::keyboardDidShow", getEventParams(keyboardHeight))
+      context.emitEvent("KeyboardController::keyboardDidShow", getEventParams(keyboardHeight))
       context.dispatchEvent(
         view.id,
         KeyboardTransitionEvent(
@@ -368,12 +368,6 @@ class KeyboardAnimationCallback(
     return (keyboardHeight - navigationBar).toFloat().dp.coerceAtLeast(0.0)
   }
 
-  private fun emitEvent(event: String, params: WritableMap) {
-    context?.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)?.emit(event, params)
-
-    Log.i(TAG, event)
-  }
-
   private fun getEventParams(height: Double): WritableMap {
     val params: WritableMap = Arguments.createMap()
     params.putDouble("height", height)

package/android/src/main/java/com/reactnativekeyboardcontroller/modules/KeyboardControllerModuleImpl.kt

@@ -6,6 +6,8 @@ import android.view.WindowManager
 import android.view.inputmethod.InputMethodManager
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.UiThreadUtil
+import com.reactnativekeyboardcontroller.traversal.FocusedInputHolder
+import com.reactnativekeyboardcontroller.traversal.ViewHierarchyNavigator
 
 class KeyboardControllerModuleImpl(private val mReactContext: ReactApplicationContext) {
   private val mDefaultMode: Int = getCurrentMode()
@@ -28,6 +30,19 @@ class KeyboardControllerModuleImpl(private val mReactContext: ReactApplicationCo
     }
   }
 
+  fun setFocusTo(direction: String) {
+    if (direction == "current") {
+      return FocusedInputHolder.requestFocus()
+    }
+
+    val activity = mReactContext.currentActivity
+    val view: View? = activity?.currentFocus
+
+    if (view != null) {
+      ViewHierarchyNavigator.setFocusTo(direction, view)
+    }
+  }
+
   private fun setSoftInputMode(mode: Int) {
     UiThreadUtil.runOnUiThread {
       if (getCurrentMode() != mode) {

package/android/src/main/java/com/reactnativekeyboardcontroller/traversal/FocusedInputHolder.kt

@@ -0,0 +1,16 @@
+package com.reactnativekeyboardcontroller.traversal
+
+import com.facebook.react.views.textinput.ReactEditText
+import java.lang.ref.WeakReference
+
+object FocusedInputHolder {
+  private var input: WeakReference<ReactEditText?>? = null
+
+  fun set(textInput: ReactEditText) {
+    input = WeakReference(textInput)
+  }
+
+  fun requestFocus() {
+    input?.get()?.requestFocusFromJS()
+  }
+}

package/android/src/main/java/com/reactnativekeyboardcontroller/traversal/ViewHierarchyNavigator.kt

@@ -0,0 +1,101 @@
+package com.reactnativekeyboardcontroller.traversal
+
+import android.view.View
+import android.view.ViewGroup
+import android.widget.EditText
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.views.textinput.ReactEditText
+
+object ViewHierarchyNavigator {
+  fun setFocusTo(direction: String, view: View) {
+    val input = if (direction == "next") findNextEditText(view) else findPreviousEditText(view)
+
+    UiThreadUtil.runOnUiThread {
+      if (input is ReactEditText) {
+        input.requestFocusFromJS()
+      } else {
+        input?.requestFocus()
+      }
+    }
+  }
+
+  fun getAllInputFields(viewGroup: View?): List<EditText> {
+    val editTexts = mutableListOf<EditText>()
+
+    // Helper function to recursively search for EditText views
+    fun findEditTexts(view: View?) {
+      if (isValidTextInput(view)) {
+        editTexts.add(view as EditText)
+      } else if (view is ViewGroup) {
+        for (i in 0 until view.childCount) {
+          findEditTexts(view.getChildAt(i))
+        }
+      }
+    }
+
+    // Start the search with the provided viewGroup
+    findEditTexts(viewGroup)
+
+    return editTexts
+  }
+
+  private fun findNextEditText(currentFocus: View): EditText? {
+    return findEditTextInDirection(currentFocus, 1)
+  }
+
+  private fun findPreviousEditText(currentFocus: View): EditText? {
+    return findEditTextInDirection(currentFocus, -1)
+  }
+
+  @Suppress("detekt:ReturnCount")
+  private fun findEditTextInDirection(currentFocus: View, direction: Int): EditText? {
+    // Attempt to find the parent view group, return null if not found or not a ViewGroup
+    val parentViewGroup = currentFocus.parent as? ViewGroup ?: return null
+
+    // Find the index of the current EditText in its parent
+    val currentIndex = parentViewGroup.indexOfChild(currentFocus)
+
+    // Determine the start index and end condition for the loop based on the direction
+    var i = if (direction > 0) currentIndex + 1 else currentIndex - 1
+    val end = if (direction > 0) parentViewGroup.childCount else -1
+
+    // Iterate over siblings in the specified direction
+    while (i != end) {
+      val nextChild = parentViewGroup.getChildAt(i)
+      findEditTextOrGoDeeper(nextChild, direction)?.let { return it } // Return if an EditText is found
+      i += direction
+    }
+
+    // Recurse to the parent's parent if no sibling EditText is found
+    return findEditTextInDirection(parentViewGroup, direction)
+  }
+
+  private fun findEditTextInHierarchy(viewGroup: ViewGroup, direction: Int): EditText? {
+    val range = if (direction > 0) 0 until viewGroup.childCount else viewGroup.childCount - 1 downTo 0
+
+    for (i in range) {
+      val child = viewGroup.getChildAt(i)
+      findEditTextOrGoDeeper(child, direction)?.let { return it }
+    }
+
+    // No EditText found in the current view group
+    return null
+  }
+
+  private fun findEditTextOrGoDeeper(child: View, direction: Int): EditText? {
+    var result: EditText? = null
+
+    if (isValidTextInput(child)) {
+      result = child as EditText
+    } else if (child is ViewGroup) {
+      // If the child is a ViewGroup, check its children recursively
+      result = findEditTextInHierarchy(child, direction)
+    }
+
+    return result
+  }
+
+  private fun isValidTextInput(view: View?): Boolean {
+    return view is EditText && view.isEnabled
+  }
+}

package/android/src/paper/java/com/reactnativekeyboardcontroller/KeyboardControllerModule.kt

@@ -25,6 +25,11 @@ class KeyboardControllerModule(mReactContext: ReactApplicationContext) : ReactCo
     module.dismiss()
   }
 
+  @ReactMethod
+  fun setFocusTo(direction: String) {
+    module.setFocusTo(direction)
+  }
+
   @Suppress("detekt:UnusedParameter")
   @ReactMethod
   fun addListener(eventName: String?) {

package/android/src/test/java/com/reactnativekeyboardcontroller/traversal/ViewHierarchyNavigatorTest.kt

@@ -0,0 +1,188 @@
+package com.reactnativekeyboardcontroller.traversal
+
+import android.content.Context
+import android.widget.EditText
+import android.widget.LinearLayout
+import androidx.test.core.app.ApplicationProvider
+import org.junit.Assert.assertTrue
+import org.junit.Before
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.RobolectricTestRunner
+import org.robolectric.shadows.ShadowLooper
+
+@RunWith(RobolectricTestRunner::class)
+class ViewHierarchyNavigatorTest {
+  private lateinit var layout: LinearLayout
+  private lateinit var editText1: EditText
+  private lateinit var editText2: EditText
+  private lateinit var editText3: EditText
+  private lateinit var editText4: EditText
+  private lateinit var editText5: EditText
+  private lateinit var editText6: EditText
+  private lateinit var editText7: EditText
+  private lateinit var editText8: EditText
+  private lateinit var editText9: EditText
+  private lateinit var editText10: EditText
+  private lateinit var editText11: EditText
+  private lateinit var editText12: EditText
+  private lateinit var editText13: EditText
+
+  @Suppress("detekt:CyclomaticComplexMethod")
+  @Before
+  fun setUp() {
+    val context = ApplicationProvider.getApplicationContext<Context>()
+
+    editText1 = EditText(context).apply { id = 1 }
+    editText2 = EditText(context).apply { id = 2 }
+    editText3 = EditText(context).apply { id = 3; isEnabled = false }
+    editText4 = EditText(context).apply { id = 4; isEnabled = false }
+    editText5 = EditText(context).apply { id = 5 }
+    editText6 = EditText(context).apply { id = 6 }
+    editText7 = EditText(context).apply { id = 7 }
+    editText8 = EditText(context).apply { id = 8 }
+    editText9 = EditText(context).apply { id = 9 }
+    editText10 = EditText(context).apply { id = 10 }
+    editText11 = EditText(context).apply { id = 11 }
+    editText12 = EditText(context).apply { id = 12 }
+    editText13 = EditText(context).apply { id = 13 }
+
+    layout = LinearLayout(context).apply {
+      addView(editText1)
+      addView(editText2)
+      addView(editText3)
+      addView(editText4)
+      addView(
+        LinearLayout(context).apply {
+          addView(editText5)
+          addView(editText6)
+          addView(editText7)
+        },
+      )
+      addView(editText8)
+      addView(editText9)
+      addView(editText10)
+      addView(editText11)
+      addView(editText12)
+      addView(editText13)
+    }
+  }
+
+  @Test
+  fun `getAllInputFields returns all EditTexts in ViewGroup`() {
+    val editTexts = ViewHierarchyNavigator.getAllInputFields(layout)
+
+    // 13 (all) - 2 (disabled)
+    assertTrue(editTexts.size == 11)
+  }
+
+  @Test
+  fun `setFocusTo to 'next' should set focus to next field`() {
+    editText1.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("next", editText1)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText2.hasFocus())
+  }
+
+  @Test
+  fun `setFocusTo to 'prev' should set focus to previous field`() {
+    editText2.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("prev", editText2)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText1.hasFocus())
+  }
+
+  @Test
+  fun `setFocusTo to 'next' should skip non-editable fields`() {
+    editText2.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("next", editText2)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText5.hasFocus())
+  }
+
+  @Test
+  fun `setFocusTo to 'prev' should skip non-editable fields`() {
+    editText5.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("prev", editText5)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText2.hasFocus())
+  }
+
+  @Test
+  fun `setFocusTo to 'next' should set focus relatively to current group`() {
+    editText5.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("next", editText5)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText6.hasFocus())
+  }
+
+  @Test
+  fun `setFocusTo to 'prev' should set focus relatively to current group`() {
+    editText7.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("prev", editText7)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText6.hasFocus())
+  }
+
+  @Test
+  fun `setFocusTo to 'next' should correctly exit from current group`() {
+    editText7.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("next", editText7)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText8.hasFocus())
+  }
+
+  @Test
+  fun `setFocusTo to 'prev' should set focus to last element in group`() {
+    editText8.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("prev", editText8)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText7.hasFocus())
+  }
+
+  @Test
+  fun `setFocusTo to 'next' should do nothing if it's last element`() {
+    editText13.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("next", editText13)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText13.hasFocus())
+  }
+
+  @Test
+  fun `setFocusTo to 'prev' should do nothing if it's first element`() {
+    editText1.requestFocus()
+
+    ViewHierarchyNavigator.setFocusTo("prev", editText1)
+
+    ShadowLooper.runUiThreadTasksIncludingDelayedTasks()
+
+    assertTrue(editText1.hasFocus())
+  }
+}

package/ios/.swiftlint.yml

@@ -6,5 +6,9 @@ line_length:
   warning: 120
   ignores_urls: true
 
+identifier_name:
+  excluded:
+    - i # allow `i` variable in cycles
+
 excluded:
   - Pods

package/ios/Extensions.swift

@@ -53,6 +53,35 @@ public extension Optional where Wrapped == UIResponder {
   }
 }
 
+public extension UIScrollView {
+  var reactViewTag: NSNumber {
+    #if KEYBOARD_CONTROLLER_NEW_ARCH_ENABLED
+      return (superview?.tag ?? -1) as NSNumber
+    #else
+      return superview?.reactTag ?? -1
+    #endif
+  }
+}
+
+public extension Optional where Wrapped: UIResponder {
+  var parentScrollViewTarget: NSNumber {
+    var currentResponder: UIResponder? = self
+
+    while let currentView = currentResponder {
+      // If the current responder is a UIScrollView (excluding UITextView), return its tag
+      if let scrollView = currentView as? UIScrollView, !(currentView is UITextView) {
+        return scrollView.reactViewTag
+      }
+
+      // Move to the next responder in the chain
+      currentResponder = currentView.next
+    }
+
+    // UIScrollView is not found
+    return -1
+  }
+}
+
 public extension UIView {
   var globalFrame: CGRect? {
     let rootView = UIApplication.shared.keyWindow?.rootViewController?.view