feat: dismiss without animation

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,10 +19,15 @@ 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')"
-        onPress={() => KeyboardController.setFocusTo("current")}
+        onPress={() => setAnimated(!animated)}
       />
       <Button
         testID="focus_from_ref"
@@ -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}

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.
 

example/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,10 +19,15 @@ 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')"
-        onPress={() => KeyboardController.setFocusTo("current")}
+        onPress={() => setAnimated(!animated)}
       />
       <Button
         testID="focus_from_ref"
@@ -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}

ios/KeyboardControllerModule.mm

@@ -77,13 +77,13 @@ - (void)preload
 }
 
 #ifdef RCT_NEW_ARCH_ENABLED
-- (void)dismiss:(BOOL)keepFocus
+- (void)dismiss:(BOOL)keepFocus animated:(BOOL)animated
 #else
-RCT_EXPORT_METHOD(dismiss : (BOOL)keepFocus)
+RCT_EXPORT_METHOD(dismiss:(BOOL)keepFocus animated:(BOOL)animated)
 #endif
 {
   dispatch_async(dispatch_get_main_queue(), ^{
-    [KeyboardControllerModuleImpl dismiss:keepFocus];
+    [KeyboardControllerModuleImpl dismiss:keepFocus animated:animated];
   });
 }
 

ios/KeyboardControllerModuleImpl.swift

@@ -13,26 +13,36 @@ public class KeyboardControllerModuleImpl: NSObject {
   private static let keyboardRevealGestureName = "keyboardRevealGesture"
 
   @objc
-  public static func dismiss(_ keepFocus: Bool) {
-    let responder = UIResponder.current
-
-    if keepFocus {
-      guard let input = responder as? TextInput else { return }
-      let tapGesture = UITapGestureRecognizer(target: self, action: #selector(onTextInputTapped(_:)))
-      tapGesture.name = keyboardRevealGestureName
-      input.addGestureRecognizer(tapGesture)
-
-      input.inputView = UIView()
-      input.reloadInputViews()
-
-      NotificationCenter.default.addObserver(
-        self,
-        selector: #selector(onResponderResigned(_:)),
-        name: UITextField.textDidEndEditingNotification,
-        object: input
-      )
+  public static func dismiss(_ keepFocus: Bool, animated: Bool) {
+    let work = {
+      let responder = UIResponder.current
+      
+      if keepFocus {
+        guard let input = responder as? TextInput else { return }
+        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(onTextInputTapped(_:)))
+        tapGesture.name = keyboardRevealGestureName
+        input.addGestureRecognizer(tapGesture)
+        
+        input.inputView = UIView()
+        input.reloadInputViews()
+        
+        NotificationCenter.default.addObserver(
+          self,
+          selector: #selector(onResponderResigned(_:)),
+          name: UITextField.textDidEndEditingNotification,
+          object: input
+        )
+      } else {
+        responder?.resignFirstResponder()
+      }
+    }
+    
+    if !animated {
+      UIView.performWithoutAnimation {
+        work()
+      }
     } else {
-      responder?.resignFirstResponder()
+      work()
     }
   }
 

src/module.ts

@@ -26,8 +26,9 @@ KeyboardEvents.addListener("keyboardDidShow", (e) => {
   lastState = e;
 });
 
-const dismiss = async (options?: DismissOptions): Promise<void> => {
+const dismiss = async (options?: Partial<DismissOptions>): Promise<void> => {
   const keepFocus = options?.keepFocus ?? false;
+  const animated = options?.animated ?? true;
 
   return new Promise((resolve) => {
     if (isClosed) {
@@ -41,7 +42,7 @@ const dismiss = async (options?: DismissOptions): Promise<void> => {
       subscription.remove();
     });
 
-    KeyboardControllerNative.dismiss(keepFocus);
+    KeyboardControllerNative.dismiss(keepFocus, animated);
   });
 };
 const isVisible = () => !isClosed;

src/specs/NativeKeyboardController.ts

@@ -9,7 +9,7 @@ export interface Spec extends TurboModule {
   setInputMode(mode: number): void;
   setDefaultMode(): void;
   preload(): void;
-  dismiss(keepFocus: boolean): void;
+  dismiss(keepFocus: boolean, animated: boolean): void;
   setFocusTo(direction: string): void;
 
   // event emitter

src/types/module.ts

@@ -53,6 +53,10 @@ export type DismissOptions = {
    * A boolean property indicating whether focus should be kept on the input after dismissing the keyboard. Default is `false`.
    */
   keepFocus: boolean;
+  /**
+   * A boolean property controlling whether dismissal should be animated. Default is `true`.
+   */
+  animated: boolean;
 };
 export type KeyboardControllerModule = {
   // android only