react-native-keyboard-controller 1.14.4 → 1.15.0

package/src/components/KeyboardToolbar/index.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 
-import { FocusedInputEvents, KeyboardController } from "../../bindings";
+import { FocusedInputEvents } from "../../bindings";
+import { KeyboardController } from "../../module";
 import useColorScheme from "../hooks/useColorScheme";
 import KeyboardStickyView from "../KeyboardStickyView";
 
@@ -10,6 +11,7 @@ import Button from "./Button";
 import { colors } from "./colors";
 
 import type { HEX, KeyboardToolbarTheme } from "./types";
+import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
 import type { ReactNode } from "react";
 import type { GestureResponderEvent, ViewProps } from "react-native";
 
@@ -52,7 +54,7 @@ export type KeyboardToolbarProps = Omit<
    * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
    */
   opacity?: HEX;
-};
+} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
 
 const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
 const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
@@ -62,11 +64,6 @@ const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
 
 const KEYBOARD_TOOLBAR_HEIGHT = 42;
 const DEFAULT_OPACITY: HEX = "FF";
-const offset = { closed: KEYBOARD_TOOLBAR_HEIGHT };
-
-const dismissKeyboard = () => KeyboardController.dismiss();
-const goToNextField = () => KeyboardController.setFocusTo("next");
-const goToPrevField = () => KeyboardController.setFocusTo("prev");
 
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
@@ -84,6 +81,8 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   onDoneCallback,
   blur = null,
   opacity = DEFAULT_OPACITY,
+  offset: { closed = 0, opened = 0 } = {},
+  enabled = true,
   ...rest
 }) => {
   const colorScheme = useColorScheme();
@@ -114,6 +113,10 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
     ],
     [colorScheme, opacity, theme],
   );
+  const offset = useMemo(
+    () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
+    [closed, opened],
+  );
   const ButtonContainer = button || Button;
   const IconContainer = icon || Arrow;
 
@@ -122,7 +125,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       onNextCallback?.(event);
 
       if (!event.isDefaultPrevented()) {
-        goToNextField();
+        KeyboardController.setFocusTo("next");
       }
     },
     [onNextCallback],
@@ -132,7 +135,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       onPrevCallback?.(event);
 
       if (!event.isDefaultPrevented()) {
-        goToPrevField();
+        KeyboardController.setFocusTo("prev");
       }
     },
     [onPrevCallback],
@@ -142,14 +145,14 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       onDoneCallback?.(event);
 
       if (!event.isDefaultPrevented()) {
-        dismissKeyboard();
+        KeyboardController.dismiss();
       }
     },
     [onDoneCallback],
   );
 
   return (
-    <KeyboardStickyView offset={offset}>
+    <KeyboardStickyView enabled={enabled} offset={offset}>
       <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
         {blur}
         {showArrows && (

package/src/hooks/index.ts

@@ -1,8 +1,8 @@
 import { useEffect, useLayoutEffect } from "react";
 
-import { KeyboardController } from "../bindings";
 import { AndroidSoftInputModes } from "../constants";
 import { useKeyboardContext } from "../context";
+import { KeyboardController } from "../module";
 
 import type { AnimatedContext, ReanimatedContext } from "../context";
 import type { FocusedInputHandler, KeyboardHandler } from "../types";

package/src/hooks/useWindowDimensions/index.android.ts

@@ -24,6 +24,11 @@ export const useWindowDimensions = () => {
       },
     );
 
+    // we might have missed an update between reading a value in render and
+    // `addListener` in this handler, so we set it here. If there was
+    // no change, React will filter out this update as a no-op.
+    setDimensions(initialDimensions);
+
     return () => {
       subscription.remove();
     };

package/src/index.ts

@@ -3,6 +3,7 @@ export * from "./animated";
 export * from "./context";
 export * from "./hooks";
 export * from "./constants";
+export * from "./module";
 export * from "./types";
 
 export {

package/src/internal.ts

@@ -48,8 +48,8 @@ export function useEventHandlerRegistration<
     if (viewTagRef.current) {
       attachWorkletHandlers();
     } else {
-      // view may not be mounted yet - defer registration to next event loop
-      setImmediate(attachWorkletHandlers);
+      // view may not be mounted yet - defer registration until call-stack becomes empty
+      queueMicrotask(attachWorkletHandlers);
     }
 
     return () => {

package/src/module.ts

@@ -0,0 +1,50 @@
+import { KeyboardControllerNative, KeyboardEvents } from "./bindings";
+
+import type {
+  DismissOptions,
+  KeyboardControllerModule,
+  KeyboardEventData,
+} from "./types";
+
+let isClosed = false;
+let lastEvent: KeyboardEventData | null = null;
+
+KeyboardEvents.addListener("keyboardDidHide", (e) => {
+  isClosed = true;
+  lastEvent = e;
+});
+
+KeyboardEvents.addListener("keyboardDidShow", (e) => {
+  isClosed = false;
+  lastEvent = e;
+});
+
+const dismiss = async (
+  { keepFocus }: DismissOptions = { keepFocus: false },
+): Promise<void> => {
+  return new Promise((resolve) => {
+    if (isClosed) {
+      resolve();
+
+      return;
+    }
+
+    const subscription = KeyboardEvents.addListener("keyboardDidHide", () => {
+      resolve(undefined);
+      subscription.remove();
+    });
+
+    KeyboardControllerNative.dismiss(keepFocus);
+  });
+};
+const isVisible = () => !isClosed;
+const state = () => lastEvent;
+
+export const KeyboardController: KeyboardControllerModule = {
+  setDefaultMode: KeyboardControllerNative.setDefaultMode,
+  setInputMode: KeyboardControllerNative.setInputMode,
+  setFocusTo: KeyboardControllerNative.setFocusTo,
+  dismiss,
+  isVisible,
+  state,
+};

package/src/specs/NativeKeyboardController.ts

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

package/src/types.ts

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from "react";
 import type {
   EmitterSubscription,
   NativeSyntheticEvent,
+  TextInputProps,
   ViewProps,
 } from "react-native";
 
@@ -114,12 +115,25 @@ export type OverKeyboardViewProps = PropsWithChildren<{
 }>;
 
 export type Direction = "next" | "prev" | "current";
+export type DismissOptions = {
+  keepFocus: boolean;
+};
 export type KeyboardControllerModule = {
   // android only
   setDefaultMode: () => void;
   setInputMode: (mode: number) => void;
   // all platforms
-  dismiss: () => void;
+  dismiss: (options?: DismissOptions) => Promise<void>;
+  setFocusTo: (direction: Direction) => void;
+  isVisible: () => boolean;
+  state: () => KeyboardEventData | null;
+};
+export type KeyboardControllerNativeModule = {
+  // android only
+  setDefaultMode: () => void;
+  setInputMode: (mode: number) => void;
+  // all platforms
+  dismiss: (keepFocus: boolean) => void;
   setFocusTo: (direction: Direction) => void;
   // native event module stuff
   addListener: (eventName: string) => void;
@@ -137,6 +151,8 @@ export type KeyboardEventData = {
   duration: number;
   timestamp: number;
   target: number;
+  type: NonNullable<TextInputProps["keyboardType"]>;
+  appearance: NonNullable<TextInputProps["keyboardAppearance"]>;
 };
 export type KeyboardEventsModule = {
   addListener: (