react-native-keyboard-controller 1.14.3 → 1.14.5

package/lib/typescript/bindings.native.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import type { FocusedInputEventsModule, KeyboardControllerModule, KeyboardControllerProps, KeyboardEventsModule, KeyboardGestureAreaProps, OverKeyboardViewProps, WindowDimensionsEventsModule } from "./types";
-export declare const KeyboardController: KeyboardControllerModule;
+import type { FocusedInputEventsModule, KeyboardControllerModule, KeyboardControllerNativeModule, KeyboardControllerProps, KeyboardEventsModule, KeyboardGestureAreaProps, OverKeyboardViewProps, WindowDimensionsEventsModule } from "./types";
+export declare const KeyboardControllerNative: KeyboardControllerNativeModule;
 export declare const KeyboardEvents: KeyboardEventsModule;
+export declare const KeyboardController: KeyboardControllerModule;
 /**
  * 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/lib/typescript/components/KeyboardAvoidingView/index.d.ts

@@ -29,7 +29,7 @@ declare const KeyboardAvoidingView: React.ForwardRefExoticComponent<{
     /**
      * Specify how to react to the presence of the keyboard.
      */
-    behavior?: "height" | "padding" | "position" | undefined;
+    behavior?: "height" | "position" | "padding";
     /**
      * Style of the content container when `behavior` is 'position'.
      */
@@ -38,13 +38,13 @@ declare const KeyboardAvoidingView: React.ForwardRefExoticComponent<{
      * Controls whether this `KeyboardAvoidingView` instance should take effect.
      * This is useful when more than one is on the screen. Defaults to true.
      */
-    enabled?: boolean | undefined;
+    enabled?: boolean;
     /**
      * Distance between the top of the user screen and the React Native view. This
      * may be non-zero in some cases. Defaults to 0.
      */
-    keyboardVerticalOffset?: number | undefined;
+    keyboardVerticalOffset?: number;
 } & ViewProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<View>>;
 export default KeyboardAvoidingView;

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

@@ -14,16 +14,16 @@ export type KeyboardAwareScrollViewProps = {
 } & ScrollViewProps;
 declare const KeyboardAwareScrollView: React.ForwardRefExoticComponent<{
     /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
-    bottomOffset?: number | undefined;
+    bottomOffset?: number;
     /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
-    disableScrollOnKeyboardHide?: boolean | undefined;
+    disableScrollOnKeyboardHide?: boolean;
     /** Controls whether this `KeyboardAwareScrollView` instance should take effect. Default is `true` */
-    enabled?: boolean | undefined;
+    enabled?: boolean;
     /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0` */
-    extraKeyboardSpace?: number | undefined;
+    extraKeyboardSpace?: number;
     /** Custom component for `ScrollView`. Default is `ScrollView` */
-    ScrollViewComponent?: React.ComponentType<ScrollViewProps> | undefined;
+    ScrollViewComponent?: React.ComponentType<ScrollViewProps>;
 } & ScrollViewProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<ScrollView>>;
 export default KeyboardAwareScrollView;

package/lib/typescript/components/KeyboardAwareScrollView/utils.d.ts

@@ -1,2 +1,2 @@
-export declare const debounce: <F extends (...args: Parameters<F>) => ReturnType<F>>(worklet: F, wait?: number) => (...args: Parameters<F>) => void | ReturnType<F>;
+export declare const debounce: <F extends (...args: Parameters<F>) => ReturnType<F>>(worklet: F, wait?: number) => (...args: Parameters<F>) => ReturnType<F> | void;
 export declare const scrollDistanceWithRespectToSnapPoints: (defaultScrollValue: number, snapPoints?: number[]) => number;

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

@@ -23,13 +23,13 @@ declare const KeyboardStickyView: React.ForwardRefExoticComponent<{
         /**
          * Adds additional `translateY` when keyboard is close. By default `0`.
          */
-        closed?: number | undefined;
+        closed?: number;
         /**
          * Adds additional `translateY` when keyboard is open. By default `0`.
          */
-        opened?: number | undefined;
-    } | undefined;
+        opened?: number;
+    };
 } & ViewProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<View>>;
 export default KeyboardStickyView;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import type { KeyboardToolbarTheme } from "./types";
+import type { PropsWithChildren } from "react";
 import type { GestureResponderEvent, ViewStyle } from "react-native";
 type ButtonProps = {
     disabled?: boolean;
@@ -11,5 +12,5 @@ type ButtonProps = {
     style?: ViewStyle;
     theme: KeyboardToolbarTheme;
 };
-declare const _default: ({ children, onPress, disabled, accessibilityLabel, accessibilityHint, testID, style, }: React.PropsWithChildren<ButtonProps>) => React.JSX.Element;
+declare const _default: ({ children, onPress, disabled, accessibilityLabel, accessibilityHint, testID, style, }: PropsWithChildren<ButtonProps>) => React.JSX.Element;
 export default _default;

package/lib/typescript/internal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Animated, findNodeHandle } from "react-native";
 type EventHandler = (event: never) => void;
 type ComponentOrHandle = Parameters<typeof findNodeHandle>[0];

package/lib/typescript/types.d.ts

@@ -83,9 +83,11 @@ export type KeyboardControllerModule = {
     setInputMode: (mode: number) => void;
     dismiss: () => void;
     setFocusTo: (direction: Direction) => void;
+};
+export type KeyboardControllerNativeModule = {
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;
-};
+} & KeyboardControllerModule;
 export type KeyboardControllerEvents = "keyboardWillShow" | "keyboardDidShow" | "keyboardWillHide" | "keyboardDidHide";
 export type KeyboardEventData = {
     height: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.14.3",
+  "version": "1.14.5",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -79,7 +79,8 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
-    "@react-native/eslint-config": "^0.75.3",
+    "@react-native/babel-preset": "0.76.2",
+    "@react-native/eslint-config": "0.76.2",
     "@release-it/conventional-changelog": "^2.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.2.1",
@@ -92,6 +93,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-ft-flow": "^3.0.11",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-prettier": "^4.2.1",
@@ -102,12 +104,12 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.8.8",
     "react": "18.3.1",
-    "react-native": "0.75.3",
+    "react-native": "0.76.2",
     "react-native-builder-bob": "^0.18.0",
     "react-native-reanimated": "3.16.1",
     "react-test-renderer": "18.2.0",
     "release-it": "^14.2.2",
-    "typescript": "5.0.4"
+    "typescript": "5.6.3"
   },
   "peerDependencies": {
     "react": "*",

package/src/animated.tsx

@@ -137,7 +137,8 @@ export const KeyboardProvider = ({
             },
           },
         ],
-        { useNativeDriver: true },
+        // Setting useNativeDriver to true on web triggers a warning due to the absence of a native driver for web. Therefore, it is set to false.
+        { useNativeDriver: Platform.OS !== "web" },
       ),
     [],
   );

package/src/bindings.native.ts

@@ -3,6 +3,7 @@ import { NativeEventEmitter, Platform } from "react-native";
 import type {
   FocusedInputEventsModule,
   KeyboardControllerModule,
+  KeyboardControllerNativeModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
   KeyboardGestureAreaProps,
@@ -19,7 +20,7 @@ const LINKING_ERROR =
 const RCTKeyboardController =
   require("./specs/NativeKeyboardController").default;
 
-export const KeyboardController = (
+export const KeyboardControllerNative = (
   RCTKeyboardController
     ? RCTKeyboardController
     : new Proxy(
@@ -30,15 +31,22 @@ export const KeyboardController = (
           },
         },
       )
-) as KeyboardControllerModule;
+) as KeyboardControllerNativeModule;
 
 const KEYBOARD_CONTROLLER_NAMESPACE = "KeyboardController::";
-const eventEmitter = new NativeEventEmitter(KeyboardController);
+const eventEmitter = new NativeEventEmitter(KeyboardControllerNative);
 
 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

@@ -18,8 +18,6 @@ export const KeyboardController: KeyboardControllerModule = {
   setInputMode: NOOP,
   dismiss: NOOP,
   setFocusTo: NOOP,
-  addListener: NOOP,
-  removeListeners: NOOP,
 };
 export const KeyboardEvents: KeyboardEventsModule = {
   addListener: () => ({ remove: NOOP } as EmitterSubscription),

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -27,6 +27,7 @@ import type {
 import type {
   FocusedInputLayoutChangedEvent,
   FocusedInputSelectionChangedEvent,
+  NativeEvent,
 } from "react-native-keyboard-controller";
 
 export type KeyboardAwareScrollViewProps = {
@@ -190,6 +191,20 @@ const KeyboardAwareScrollView = forwardRef<
       },
       [bottomOffset, enabled, height, snapToOffsets],
     );
+    const syncKeyboardFrame = useCallback(
+      (e: NativeEvent) => {
+        "worklet";
+
+        const keyboardFrame = interpolate(
+          e.height,
+          [0, keyboardHeight.value],
+          [0, keyboardHeight.value + extraKeyboardSpace],
+        );
+
+        currentKeyboardFrameHeight.value = keyboardFrame;
+      },
+      [extraKeyboardSpace],
+    );
 
     const scrollFromCurrentPosition = useCallback(
       (customHeight?: number) => {
@@ -308,13 +323,7 @@ const KeyboardAwareScrollView = forwardRef<
         onMove: (e) => {
           "worklet";
 
-          const keyboardFrame = interpolate(
-            e.height,
-            [0, keyboardHeight.value],
-            [0, keyboardHeight.value + extraKeyboardSpace],
-          );
-
-          currentKeyboardFrameHeight.value = keyboardFrame;
+          syncKeyboardFrame(e);
 
           // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
           if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
@@ -326,9 +335,11 @@ const KeyboardAwareScrollView = forwardRef<
 
           keyboardHeight.value = e.height;
           scrollPosition.value = position.value;
+
+          syncKeyboardFrame(e);
         },
       },
-      [maybeScroll, disableScrollOnKeyboardHide, extraKeyboardSpace],
+      [maybeScroll, disableScrollOnKeyboardHide, syncKeyboardFrame],
     );
 
     useAnimatedReaction(

package/src/components/KeyboardToolbar/index.tsx

@@ -64,10 +64,6 @@ 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
  * `Done` buttons.
@@ -122,7 +118,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       onNextCallback?.(event);
 
       if (!event.isDefaultPrevented()) {
-        goToNextField();
+        KeyboardController.setFocusTo("next");
       }
     },
     [onNextCallback],
@@ -132,7 +128,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       onPrevCallback?.(event);
 
       if (!event.isDefaultPrevented()) {
-        goToPrevField();
+        KeyboardController.setFocusTo("prev");
       }
     },
     [onPrevCallback],
@@ -142,7 +138,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       onDoneCallback?.(event);
 
       if (!event.isDefaultPrevented()) {
-        dismissKeyboard();
+        KeyboardController.dismiss();
       }
     },
     [onDoneCallback],

package/src/types.ts

@@ -121,10 +121,12 @@ export type KeyboardControllerModule = {
   // all platforms
   dismiss: () => void;
   setFocusTo: (direction: Direction) => void;
+};
+export type KeyboardControllerNativeModule = {
   // native event module stuff
   addListener: (eventName: string) => void;
   removeListeners: (count: number) => void;
-};
+} & KeyboardControllerModule;
 
 // Event module declarations
 export type KeyboardControllerEvents =