react-native-keyboard-controller 1.14.5 → 1.15.0

package/lib/typescript/components/KeyboardAvoidingView/index.d.ts

@@ -1,15 +1,7 @@
 import React from "react";
 import { View } from "react-native";
 import type { ViewProps } from "react-native";
-export type KeyboardAvoidingViewProps = {
-    /**
-     * Specify how to react to the presence of the keyboard.
-     */
-    behavior?: "height" | "position" | "padding";
-    /**
-     * Style of the content container when `behavior` is 'position'.
-     */
-    contentContainerStyle?: ViewProps["style"];
+export type KeyboardAvoidingViewBaseProps = {
     /**
      * Controls whether this `KeyboardAvoidingView` instance should take effect.
      * This is useful when more than one is on the screen. Defaults to true.
@@ -21,30 +13,28 @@ export type KeyboardAvoidingViewProps = {
      */
     keyboardVerticalOffset?: number;
 } & ViewProps;
-/**
- * View that moves out of the way when the keyboard appears by automatically
- * adjusting its height, position, or bottom padding.
- */
-declare const KeyboardAvoidingView: React.ForwardRefExoticComponent<{
+export type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps & ({
     /**
      * Specify how to react to the presence of the keyboard.
      */
-    behavior?: "height" | "position" | "padding";
+    behavior?: "position";
     /**
      * Style of the content container when `behavior` is 'position'.
      */
     contentContainerStyle?: ViewProps["style"];
+} | {
     /**
-     * Controls whether this `KeyboardAvoidingView` instance should take effect.
-     * This is useful when more than one is on the screen. Defaults to true.
+     * Specify how to react to the presence of the keyboard.
      */
-    enabled?: boolean;
+    behavior?: "height" | "padding";
     /**
-     * Distance between the top of the user screen and the React Native view. This
-     * may be non-zero in some cases. Defaults to 0.
+     * `contentContainerStyle` is not allowed for these behaviors.
      */
-    keyboardVerticalOffset?: number;
-} & ViewProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<View>>;
+    contentContainerStyle?: never;
+});
+/**
+ * View that moves out of the way when the keyboard appears by automatically
+ * adjusting its height, position, or bottom padding.
+ */
+declare const KeyboardAvoidingView: React.ForwardRefExoticComponent<React.PropsWithChildren<KeyboardAvoidingViewProps> & React.RefAttributes<View>>;
 export default KeyboardAvoidingView;

package/lib/typescript/components/KeyboardStickyView/index.d.ts

@@ -14,6 +14,8 @@ export type KeyboardStickyViewProps = {
          */
         opened?: number;
     };
+    /** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true` */
+    enabled?: boolean;
 } & ViewProps;
 declare const KeyboardStickyView: React.ForwardRefExoticComponent<{
     /**
@@ -29,6 +31,8 @@ declare const KeyboardStickyView: React.ForwardRefExoticComponent<{
          */
         opened?: number;
     };
+    /** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true` */
+    enabled?: boolean;
 } & ViewProps & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<View>>;

package/lib/typescript/components/KeyboardToolbar/index.d.ts

@@ -3,6 +3,7 @@ import Arrow from "./Arrow";
 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";
 export type KeyboardToolbarProps = Omit<ViewProps, "style" | "testID" | "children"> & {
@@ -41,7 +42,7 @@ export type KeyboardToolbarProps = Omit<ViewProps, "style" | "testID" | "childre
      * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
      */
     opacity?: HEX;
-};
+} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
  * `Done` buttons.

package/lib/typescript/index.d.ts

@@ -3,6 +3,7 @@ export * from "./animated";
 export * from "./context";
 export * from "./hooks";
 export * from "./constants";
+export * from "./module";
 export * from "./types";
 export { KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView, KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./components";
 export type { KeyboardAvoidingViewProps, KeyboardStickyViewProps, KeyboardAwareScrollViewProps, KeyboardToolbarProps, } from "./components";

package/lib/typescript/module.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardControllerModule } from "./types";
+export declare const KeyboardController: KeyboardControllerModule;

package/lib/typescript/specs/NativeKeyboardController.d.ts

@@ -3,7 +3,7 @@ export interface Spec extends TurboModule {
     readonly getConstants: () => {};
     setInputMode(mode: number): void;
     setDefaultMode(): void;
-    dismiss(): void;
+    dismiss(keepFocus: boolean): void;
     setFocusTo(direction: string): void;
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;

package/lib/typescript/types.d.ts

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from "react";
-import type { EmitterSubscription, NativeSyntheticEvent, ViewProps } from "react-native";
+import type { EmitterSubscription, NativeSyntheticEvent, TextInputProps, ViewProps } from "react-native";
 export type NativeEvent = {
     progress: number;
     height: number;
@@ -78,22 +78,33 @@ export type OverKeyboardViewProps = PropsWithChildren<{
     visible: boolean;
 }>;
 export type Direction = "next" | "prev" | "current";
+export type DismissOptions = {
+    keepFocus: boolean;
+};
 export type KeyboardControllerModule = {
     setDefaultMode: () => void;
     setInputMode: (mode: number) => void;
-    dismiss: () => void;
+    dismiss: (options?: DismissOptions) => Promise<void>;
     setFocusTo: (direction: Direction) => void;
+    isVisible: () => boolean;
+    state: () => KeyboardEventData | null;
 };
 export type KeyboardControllerNativeModule = {
+    setDefaultMode: () => void;
+    setInputMode: (mode: number) => void;
+    dismiss: (keepFocus: boolean) => void;
+    setFocusTo: (direction: Direction) => void;
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;
-} & KeyboardControllerModule;
+};
 export type KeyboardControllerEvents = "keyboardWillShow" | "keyboardDidShow" | "keyboardWillHide" | "keyboardDidHide";
 export type KeyboardEventData = {
     height: number;
     duration: number;
     timestamp: number;
     target: number;
+    type: NonNullable<TextInputProps["keyboardType"]>;
+    appearance: NonNullable<TextInputProps["keyboardAppearance"]>;
 };
 export type KeyboardEventsModule = {
     addListener: (name: KeyboardControllerEvents, cb: (e: KeyboardEventData) => void) => EmitterSubscription;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.14.5",
+  "version": "1.15.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/animated.tsx

@@ -169,6 +169,11 @@ export const KeyboardProvider = ({
 
         updateSharedValues(event, ["android", "ios"]);
       },
+      onKeyboardMoveEnd: (event: NativeEvent) => {
+        "worklet";
+
+        updateSharedValues(event, ["android"]);
+      },
     },
     [],
   );
@@ -213,6 +218,7 @@ export const KeyboardProvider = ({
         onKeyboardMoveStart={OS === "ios" ? onKeyboardMove : undefined}
         onKeyboardMove={OS === "android" ? onKeyboardMove : undefined}
         onKeyboardMoveInteractive={onKeyboardMove}
+        onKeyboardMoveEnd={OS === "android" ? onKeyboardMove : undefined}
         onFocusedInputLayoutChangedReanimated={inputLayoutHandler}
       >
         {children}

package/src/bindings.native.ts

@@ -2,7 +2,6 @@ import { NativeEventEmitter, Platform } from "react-native";
 
 import type {
   FocusedInputEventsModule,
-  KeyboardControllerModule,
   KeyboardControllerNativeModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
@@ -40,13 +39,7 @@ export const KeyboardEvents: KeyboardEventsModule = {
   addListener: (name, cb) =>
     eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
 };
-export const KeyboardController: KeyboardControllerModule = {
-  setDefaultMode: KeyboardControllerNative.setDefaultMode,
-  setInputMode: KeyboardControllerNative.setInputMode,
-  setFocusTo: KeyboardControllerNative.setFocusTo,
-  // additional function is needed because of this https://github.com/kirillzyusko/react-native-keyboard-controller/issues/684
-  dismiss: () => KeyboardControllerNative.dismiss(),
-};
+
 /**
  * This API is not documented, it's for internal usage only (for now), and is a subject to potential breaking changes in future.
  * Use it with cautious.

package/src/bindings.ts

@@ -2,7 +2,7 @@ import { View } from "react-native";
 
 import type {
   FocusedInputEventsModule,
-  KeyboardControllerModule,
+  KeyboardControllerNativeModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
   KeyboardGestureAreaProps,
@@ -13,11 +13,13 @@ import type { EmitterSubscription } from "react-native";
 
 const NOOP = () => {};
 
-export const KeyboardController: KeyboardControllerModule = {
+export const KeyboardControllerNative: KeyboardControllerNativeModule = {
   setDefaultMode: NOOP,
   setInputMode: NOOP,
   dismiss: NOOP,
   setFocusTo: NOOP,
+  addListener: NOOP,
+  removeListeners: NOOP,
 };
 export const KeyboardEvents: KeyboardEventsModule = {
   addListener: () => ({ remove: NOOP } as EmitterSubscription),

package/src/components/KeyboardAvoidingView/index.tsx

@@ -14,17 +14,7 @@ import { useKeyboardAnimation } from "./hooks";
 
 import type { LayoutRectangle, ViewProps } from "react-native";
 
-export type KeyboardAvoidingViewProps = {
-  /**
-   * Specify how to react to the presence of the keyboard.
-   */
-  behavior?: "height" | "position" | "padding";
-
-  /**
-   * Style of the content container when `behavior` is 'position'.
-   */
-  contentContainerStyle?: ViewProps["style"];
-
+export type KeyboardAvoidingViewBaseProps = {
   /**
    * Controls whether this `KeyboardAvoidingView` instance should take effect.
    * This is useful when more than one is on the screen. Defaults to true.
@@ -38,6 +28,32 @@ export type KeyboardAvoidingViewProps = {
   keyboardVerticalOffset?: number;
 } & ViewProps;
 
+export type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &
+  (
+    | {
+        /**
+         * Specify how to react to the presence of the keyboard.
+         */
+        behavior?: "position";
+
+        /**
+         * Style of the content container when `behavior` is 'position'.
+         */
+        contentContainerStyle?: ViewProps["style"];
+      }
+    | {
+        /**
+         * Specify how to react to the presence of the keyboard.
+         */
+        behavior?: "height" | "padding";
+
+        /**
+         * `contentContainerStyle` is not allowed for these behaviors.
+         */
+        contentContainerStyle?: never;
+      }
+  );
+
 const defaultLayout: LayoutRectangle = {
   x: 0,
   y: 0,

package/src/components/KeyboardStickyView/index.tsx

@@ -22,6 +22,9 @@ export type KeyboardStickyViewProps = {
      */
     opened?: number;
   };
+
+  /** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true` */
+  enabled?: boolean;
 } & ViewProps;
 
 const KeyboardStickyView = forwardRef<
@@ -29,7 +32,13 @@ const KeyboardStickyView = forwardRef<
   React.PropsWithChildren<KeyboardStickyViewProps>
 >(
   (
-    { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },
+    {
+      children,
+      offset: { closed = 0, opened = 0 } = {},
+      style,
+      enabled = true,
+      ...props
+    },
     ref,
   ) => {
     const { height, progress } = useReanimatedKeyboardAnimation();
@@ -38,9 +47,9 @@ const KeyboardStickyView = forwardRef<
       const offset = interpolate(progress.value, [0, 1], [closed, opened]);
 
       return {
-        transform: [{ translateY: height.value + offset }],
+        transform: [{ translateY: enabled ? height.value + offset : closed }],
       };
-    }, [closed, opened]);
+    }, [closed, opened, enabled]);
 
     const styles = useMemo(
       () => [style, stickyViewStyle],

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,7 +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 };
 
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
@@ -80,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();
@@ -110,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;
 
@@ -145,7 +152,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   );
 
   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,19 +115,30 @@ 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;
   removeListeners: (count: number) => void;
-} & KeyboardControllerModule;
+};
 
 // Event module declarations
 export type KeyboardControllerEvents =
@@ -139,6 +151,8 @@ export type KeyboardEventData = {
   duration: number;
   timestamp: number;
   target: number;
+  type: NonNullable<TextInputProps["keyboardType"]>;
+  appearance: NonNullable<TextInputProps["keyboardAppearance"]>;
 };
 export type KeyboardEventsModule = {
   addListener: (