feat: dismiss without animation (#1127)

## 📜 Description

Added ability to hide keyboard instantly.

## 💡 Motivation and Context

This PR has been inspired by this post in twitter:
https://x.com/klemensstrasser/status/1955284572825853957?t=Rui36_sZCd3pEoKFc02N9w&s=35

In this particular transition it makes sense to instantly hide the
keyboard, so that main shared transition look consistent and additional
animations don't distract the attention. So in this PR I'm adding a new
option to `dismiss` method: `animated`. You can specify `false` and then
keyboard will be dismissed instantly. By default this option is `true`,
but when you develop complex shared animation transitions it may make
sense to hide keyboard immediately 👀

The other reason why I am adding this is because I've seen in some
projects (Expensify, for example) that keyboard **may** be hidden
instantly in some edge cases (that was a reminder that you need to use
`onEnd` for sync last animation frame). Now this is not the edge case,
but something that we can control as well - so it will be easier to test
various components, such as
`KeyboardAvoidingView`/`KeyboardAwareScrollView` to assure they work
consistently with immediate close too.

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### E2E

- added new test for testing instant hide;
- updated assets for close functionality;

### Docs

- added a note that you can hide keyboard without animation;

### JS

- added `animated` prop to `types.ts`.

### iOS

- hide keyboard using `performWithoutAnimation` if `animated` is `true`.

### Android

- hide keyboard using `WindowInsetsController` if `animated` is `true`.

## 🤔 How Has This Been Tested?

Tested on:
- Pixel 7 Pro (Android 16);
- iPhone 16 Pro (iOS 18).

## 📸 Screenshots (if appropriate):

|Android|iOS|
|--------|---|
|<video
src="https://github.com/user-attachments/assets/73ae03a3-d69b-469a-80de-0b21852fcf2c">|<video
src="https://github.com/user-attachments/assets/0590365c-d6d7-46ce-8458-2855a227c5a9">|

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

Author: kirillzyusko

FabricExample/src/screens/Examples/Close/index.tsx

@@ -10,6 +10,7 @@ function CloseScreen() {
 
   const ref = useRef<TextInput>(null);
   const [keepFocus, setKeepFocus] = useState(false);
+  const [animated, setAnimated] = useState(true);
 
   return (
     <View>
@@ -18,6 +19,11 @@ function CloseScreen() {
         title={keepFocus ? "Keep focus" : "Don't keep focus"}
         onPress={() => setKeepFocus(!keepFocus)}
       />
+      <Button
+        testID="animated_button"
+        title={animated ? "Animated" : "Instant"}
+        onPress={() => setAnimated(!animated)}
+      />
       <Button
         testID="set_focus_to_current"
         title="KeyboardController.setFocusTo('current')"
@@ -36,7 +42,7 @@ function CloseScreen() {
       <Button
         testID="close_keyboard_button"
         title="Close keyboard"
-        onPress={() => KeyboardController.dismiss({ keepFocus })}
+        onPress={() => KeyboardController.dismiss({ keepFocus, animated })}
       />
       <TextInput
         ref={ref}

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

@@ -22,8 +22,11 @@ class KeyboardControllerModule(
     module.preload()
   }
 
-  override fun dismiss(keepFocus: Boolean) {
-    module.dismiss(keepFocus)
+  override fun dismiss(
+    keepFocus: Boolean,
+    animated: Boolean,
+  ) {
+    module.dismiss(keepFocus, animated)
   }
 
   override fun setFocusTo(direction: String) {

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

@@ -1,17 +1,20 @@
 package com.reactnativekeyboardcontroller.modules
 
 import android.content.Context
+import android.os.Build
 import android.view.View
 import android.view.WindowManager
 import android.view.inputmethod.InputMethodManager
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.UiThreadUtil
+import com.reactnativekeyboardcontroller.interactive.KeyboardAnimationController
 import com.reactnativekeyboardcontroller.traversal.FocusedInputHolder
 import com.reactnativekeyboardcontroller.traversal.ViewHierarchyNavigator
 
 class KeyboardControllerModuleImpl(
   private val mReactContext: ReactApplicationContext,
 ) {
+  private val controller = KeyboardAnimationController()
   private val mDefaultMode: Int = getCurrentMode()
 
   fun setInputMode(mode: Int) {
@@ -26,16 +29,33 @@ class KeyboardControllerModuleImpl(
     // no-op on Android
   }
 
-  fun dismiss(keepFocus: Boolean) {
+  fun dismiss(
+    keepFocus: Boolean,
+    animated: Boolean,
+  ) {
     val activity = mReactContext.currentActivity
     val view: View? = FocusedInputHolder.get()
 
     if (view != null) {
       UiThreadUtil.runOnUiThread {
-        val imm = activity?.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
-        imm?.hideSoftInputFromWindow(view.windowToken, 0)
-        if (!keepFocus) {
-          view.clearFocus()
+        fun maybeClearFocus() {
+          if (!keepFocus) {
+            view.clearFocus()
+          }
+        }
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R && !animated) {
+          controller.startControlRequest(view) { insetsController ->
+            insetsController.finish(false)
+
+            view.post {
+              maybeClearFocus()
+            }
+          }
+        } else {
+          val imm = activity?.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+          imm?.hideSoftInputFromWindow(view.windowToken, 0)
+
+          maybeClearFocus()
         }
       }
     }

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

@@ -28,8 +28,11 @@ class KeyboardControllerModule(
   }
 
   @ReactMethod
-  fun dismiss(keepFocus: Boolean) {
-    module.dismiss(keepFocus)
+  fun dismiss(
+    keepFocus: Boolean,
+    animated: Boolean,
+  ) {
+    module.dismiss(keepFocus, animated)
   }
 
   @ReactMethod

docs/docs/api/keyboard-controller.md

@@ -82,6 +82,12 @@ If you want to hide a keyboard and keep focus then you can pass `keepFocus` opti
 await KeyboardController.dismiss({ keepFocus: true });
 ```
 
+If you want to hide keyboard immediately (i. e. without animation), you can pass `animated` option:
+
+```ts
+await KeyboardController.dismiss({ animated: false });
+```
+
 :::info What is the difference comparing to `react-native` implementation?
 The equivalent method from `react-native` relies on specific internal components, such as `TextInput`, and may not work as intended if a custom input component is used.
 

e2e/kit/012-close-keyboard.e2e.ts

@@ -61,4 +61,21 @@ describe("`KeyboardController.dismiss()` specification", () => {
     await waitAndTap("blur_from_ref");
     await expect(element(by.id("input"))).not.toBeFocused();
   });
+
+  it("should reveal a keyboard", async () => {
+    await waitAndTap("keep_focus_button");
+    await waitAndTap("input");
+    await waitForExpect(async () => {
+      await expectBitmapsToBeEqual("CloseKeyboardOpened");
+    });
+  });
+
+  it("should close keyboard immediately", async () => {
+    await waitAndTap("animated_button");
+    await waitAndTap("close_keyboard_button");
+    await expect(element(by.id("input"))).not.toBeFocused();
+    await waitForExpect(async () => {
+      await expectBitmapsToBeEqual("CloseKeyboardClosed");
+    });
+  });
 });