react-native-keyboard-controller 1.12.7 → 1.13.1

package/src/components/KeyboardToolbar/index.tsx

@@ -15,6 +15,7 @@ import { colors } from "./colors";
 
 import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { ReactNode } from "react";
+import type { GestureResponderEvent } from "react-native";
 
 export type KeyboardToolbarProps = {
   /** An element that is shown in the middle of the toolbar. */
@@ -35,15 +36,15 @@ export type KeyboardToolbarProps = {
   /**
    * A callback that is called when the user presses the next button along with the default action.
    */
-  onNextCallback?: () => void;
+  onNextCallback?: (event: GestureResponderEvent) => void;
   /**
    * A callback that is called when the user presses the previous button along with the default action.
    */
-  onPrevCallback?: () => void;
+  onPrevCallback?: (event: GestureResponderEvent) => void;
   /**
    * A callback that is called when the user presses the done button along with the default action.
    */
-  onDoneCallback?: () => void;
+  onDoneCallback?: (event: GestureResponderEvent) => void;
   /**
    * A component that applies blur effect to the toolbar.
    */
@@ -53,6 +54,7 @@ export type KeyboardToolbarProps = {
    */
   opacity?: HEX;
 };
+
 const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
 const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
 const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
@@ -115,18 +117,36 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   const ButtonContainer = button || Button;
   const IconContainer = icon || Arrow;
 
-  const onPressNext = useCallback(() => {
-    goToNextField();
-    onNextCallback?.();
-  }, [onNextCallback]);
-  const onPressPrev = useCallback(() => {
-    goToPrevField();
-    onPrevCallback?.();
-  }, [onPrevCallback]);
-  const onPressDone = useCallback(() => {
-    dismissKeyboard();
-    onDoneCallback?.();
-  }, [onDoneCallback]);
+  const onPressNext = useCallback(
+    (event: GestureResponderEvent) => {
+      onNextCallback?.(event);
+
+      if (!event.isDefaultPrevented()) {
+        goToNextField();
+      }
+    },
+    [onNextCallback],
+  );
+  const onPressPrev = useCallback(
+    (event: GestureResponderEvent) => {
+      onPrevCallback?.(event);
+
+      if (!event.isDefaultPrevented()) {
+        goToPrevField();
+      }
+    },
+    [onPrevCallback],
+  );
+  const onPressDone = useCallback(
+    (event: GestureResponderEvent) => {
+      onDoneCallback?.(event);
+
+      if (!event.isDefaultPrevented()) {
+        dismissKeyboard();
+      }
+    },
+    [onDoneCallback],
+  );
 
   return (
     <KeyboardStickyView offset={offset}>
@@ -135,31 +155,31 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
         {showArrows && (
           <>
             <ButtonContainer
+              accessibilityHint="Moves focus to the previous field"
               accessibilityLabel="Previous"
-              accessibilityHint="Will move focus to previous field"
               disabled={isPrevDisabled}
-              onPress={onPressPrev}
               testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
               theme={theme}
+              onPress={onPressPrev}
             >
               <IconContainer
                 disabled={isPrevDisabled}
-                type="prev"
                 theme={theme}
+                type="prev"
               />
             </ButtonContainer>
             <ButtonContainer
+              accessibilityHint="Moves focus to the next field"
               accessibilityLabel="Next"
-              accessibilityHint="Will move focus to next field"
               disabled={isNextDisabled}
-              onPress={onPressNext}
               testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
               theme={theme}
+              onPress={onPressNext}
             >
               <IconContainer
                 disabled={isNextDisabled}
-                type="next"
                 theme={theme}
+                type="next"
               />
             </ButtonContainer>
           </>
@@ -169,15 +189,15 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
           {content}
         </View>
         <ButtonContainer
+          accessibilityHint="Closes the keyboard"
           accessibilityLabel="Done"
-          accessibilityHint="Will close the keyboard"
-          onPress={onPressDone}
-          testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
           rippleRadius={28}
           style={styles.doneButtonContainer}
+          testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
           theme={theme}
+          onPress={onPressDone}
         >
-          <Text style={doneStyle} maxFontSizeMultiplier={1.3}>
+          <Text maxFontSizeMultiplier={1.3} style={doneStyle}>
             {doneText || "Done"}
           </Text>
         </ButtonContainer>

package/src/context.ts

@@ -2,9 +2,9 @@ import { createContext, useContext } from "react";
 import { Animated } from "react-native";
 
 import type {
-  FocusedInputHandlers,
+  FocusedInputHandler,
   FocusedInputLayoutChangedEvent,
-  KeyboardHandlers,
+  KeyboardHandler,
 } from "./types";
 import type React from "react";
 import type { SharedValue } from "react-native-reanimated";
@@ -22,11 +22,12 @@ export type KeyboardAnimationContext = {
   animated: AnimatedContext;
   reanimated: ReanimatedContext;
   layout: SharedValue<FocusedInputLayoutChangedEvent | null>;
-  setKeyboardHandlers: (handlers: KeyboardHandlers) => void;
-  setInputHandlers: (handlers: FocusedInputHandlers) => void;
+  setKeyboardHandlers: (handlers: KeyboardHandler) => () => void;
+  setInputHandlers: (handlers: FocusedInputHandler) => () => void;
   setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
 };
 const NOOP = () => {};
+const NESTED_NOOP = () => NOOP;
 const withSharedValue = <T>(value: T): SharedValue<T> => ({
   value,
   addListener: NOOP,
@@ -48,10 +49,11 @@ const defaultContext: KeyboardAnimationContext = {
     height: DEFAULT_SHARED_VALUE,
   },
   layout: DEFAULT_LAYOUT,
-  setKeyboardHandlers: NOOP,
-  setInputHandlers: NOOP,
+  setKeyboardHandlers: NESTED_NOOP,
+  setInputHandlers: NESTED_NOOP,
   setEnabled: NOOP,
 };
+
 export const KeyboardContext = createContext(defaultContext);
 export const useKeyboardContext = () => {
   const context = useContext(KeyboardContext);

package/src/event-handler.d.ts

@@ -0,0 +1,8 @@
+declare function registerEventHandler(
+  handler: (event: never) => void,
+  eventName: string,
+  viewTag: number,
+): number;
+declare function unregisterEventHandler(id: number): void;
+
+export { registerEventHandler, unregisterEventHandler };

package/src/event-handler.js

@@ -0,0 +1,15 @@
+let REACore = null;
+
+try {
+  REACore = require("react-native-reanimated/src/core");
+} catch (e1) {
+  try {
+    REACore = require("react-native-reanimated/src/reanimated2/core");
+  } catch (e2) {
+    console.warn("Failed to load REACore from both paths");
+  }
+}
+const registerEventHandler = REACore.registerEventHandler;
+const unregisterEventHandler = REACore.unregisterEventHandler;
+
+export { registerEventHandler, unregisterEventHandler };

package/src/event-handler.web.js

@@ -0,0 +1,5 @@
+const NOOP = () => {};
+const registerEventHandler = NOOP;
+const unregisterEventHandler = NOOP;
+
+export { registerEventHandler, unregisterEventHandler };

package/src/event-mappings.ts

@@ -0,0 +1,14 @@
+import type { FocusedInputHandler, KeyboardHandler } from "./types";
+
+export const keyboardEventsMap = new Map<keyof KeyboardHandler, string>([
+  ["onStart", "onKeyboardMoveStart"],
+  ["onMove", "onKeyboardMove"],
+  ["onEnd", "onKeyboardMoveEnd"],
+  ["onInteractive", "onKeyboardMoveInteractive"],
+]);
+export const focusedInputEventsMap = new Map<keyof FocusedInputHandler, string>(
+  [
+    ["onChangeText", "onFocusedInputTextChanged"],
+    ["onSelectionChange", "onFocusedInputSelectionChanged"],
+  ],
+);

package/src/hooks/index.ts

@@ -3,7 +3,8 @@ import { useEffect } from "react";
 import { KeyboardController } from "../bindings";
 import { AndroidSoftInputModes } from "../constants";
 import { useKeyboardContext } from "../context";
-import { uuid } from "../utils";
+
+import useSyncEffect from "./useSyncEffect";
 
 import type { AnimatedContext, ReanimatedContext } from "../context";
 import type { FocusedInputHandler, KeyboardHandler } from "../types";
@@ -39,14 +40,10 @@ export function useGenericKeyboardHandler(
 ) {
   const context = useKeyboardContext();
 
-  useEffect(() => {
-    const key = uuid();
-
-    context.setKeyboardHandlers({ [key]: handler });
+  useSyncEffect(() => {
+    const cleanup = context.setKeyboardHandlers(handler);
 
-    return () => {
-      context.setKeyboardHandlers({ [key]: undefined });
-    };
+    return () => cleanup();
   }, deps);
 }
 
@@ -71,19 +68,15 @@ export function useReanimatedFocusedInput() {
 }
 
 export function useFocusedInputHandler(
-  handler?: FocusedInputHandler,
+  handler: FocusedInputHandler,
   deps?: DependencyList,
 ) {
   const context = useKeyboardContext();
 
-  useEffect(() => {
-    const key = uuid();
-
-    context.setInputHandlers({ [key]: handler });
+  useSyncEffect(() => {
+    const cleanup = context.setInputHandlers(handler);
 
-    return () => {
-      context.setInputHandlers({ [key]: undefined });
-    };
+    return () => cleanup();
   }, deps);
 }
 

package/src/hooks/useSyncEffect/index.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react";
+
+import type { DependencyList } from "react";
+
+/**
+ * @description
+ * Equivalent to `useEffect` but will run the effect synchronously, i. e. before render.
+ *
+ * @param {effect} - imperative function
+ * @param {deps} - if present, effect will only activate if the values in the list change
+ *
+ * @author Kiryl Ziusko
+ * @since 1.13.0
+ * @version 1.0.0
+ */
+const useSyncEffect: typeof useEffect = (effect, deps) => {
+  const cachedDeps = useRef<DependencyList | undefined | null>(null);
+  const areDepsEqual = deps?.every(
+    (el, index) => cachedDeps.current && el === cachedDeps.current[index],
+  );
+  const cleanupRef = useRef<(() => void) | void>();
+
+  if (!areDepsEqual || !cachedDeps.current) {
+    cleanupRef.current?.();
+    cleanupRef.current = effect();
+    cachedDeps.current = deps;
+  }
+
+  useEffect(() => {
+    return () => {
+      cleanupRef.current?.();
+    };
+  }, []);
+};
+
+export default useSyncEffect;

package/src/internal.ts

@@ -1,64 +1,44 @@
-import { useCallback, useRef } from "react";
-import { Animated } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
+import { useRef } from "react";
+import { Animated, findNodeHandle } from "react-native";
 
-import type { Handlers } from "./types";
+import { registerEventHandler, unregisterEventHandler } from "./event-handler";
 
-type UntypedHandler = Record<string, (event: never) => void>;
-type SharedHandlersReturnType<T extends UntypedHandler> = [
-  (handler: Handlers<T>) => void,
-  <K extends keyof T>(type: K, event: Parameters<T[K]>[0]) => void,
-];
+type EventHandler = (event: never) => void;
+type ComponentOrHandle = Parameters<typeof findNodeHandle>[0];
 
-/**
- * Hook for storing worklet handlers (objects with keys, where values are worklets).
- * Returns methods for setting handlers and broadcasting events in them.
- *
- * T is a generic that looks like:
- * @example
- * {
- *  onEvent: () => {},
- *  onEvent2: () => {},
- * }
- */
-export function useSharedHandlers<
-  T extends UntypedHandler,
->(): SharedHandlersReturnType<T> {
-  const handlers = useSharedValue<Handlers<T>>({});
-  const jsHandlers = useRef<Handlers<T>>({});
+export function useEventHandlerRegistration<
+  H extends Partial<Record<string, EventHandler>>,
+>(
+  map: Map<keyof H, string>,
+  viewTagRef: React.MutableRefObject<ComponentOrHandle>,
+) {
+  const onRegisterHandler = (handler: H) => {
+    const viewTag = findNodeHandle(viewTagRef.current);
+    const ids = Object.keys(handler).map((handlerName) => {
+      const eventName = map.get(handlerName as keyof H);
+      const functionToCall = handler[handlerName as keyof H];
 
-  // since js -> worklet -> js call is asynchronous, we can not write handlers
-  // straight into shared variable (using current shared value as a previous result),
-  // since there may be a race condition in a call, and closure may have out-of-dated
-  // values. As a result, some of handlers may be not written to "all handlers" object.
-  // Below we are writing all handlers to `ref` and afterwards synchronize them with
-  // shared value (since `refs` are not referring to actual value in worklets).
-  // This approach allow us to update synchronously handlers in js thread (and it assures,
-  // that it will have all of them) and then update them in worklet thread (calls are
-  // happening in FIFO order, so we will always have actual value).
-  const updateSharedHandlers = () => {
-    // eslint-disable-next-line react-compiler/react-compiler
-    handlers.value = jsHandlers.current;
-  };
-  const setHandlers = useCallback((handler: Handlers<T>) => {
-    jsHandlers.current = {
-      ...jsHandlers.current,
-      ...handler,
-    };
-    updateSharedHandlers();
-  }, []);
-  const broadcast = <K extends keyof T>(
-    type: K,
-    event: Parameters<T[K]>[0],
-  ) => {
-    "worklet";
+      if (eventName && viewTag) {
+        return registerEventHandler(
+          (event: Parameters<NonNullable<H[keyof H]>>[0]) => {
+            "worklet";
+
+            functionToCall?.(event);
+          },
+          eventName,
+          viewTag,
+        );
+      }
 
-    Object.keys(handlers.value).forEach((key) => {
-      handlers.value[key]?.[type]?.(event);
+      return null;
     });
+
+    return () => {
+      ids.forEach((id) => (id ? unregisterEventHandler(id) : null));
+    };
   };
 
-  return [setHandlers, broadcast];
+  return onRegisterHandler;
 }
 
 /**
@@ -76,7 +56,7 @@ export function useAnimatedValue(
 ): Animated.Value {
   const ref = useRef<Animated.Value | null>(null);
 
-  if (ref.current == null) {
+  if (ref.current === null) {
     ref.current = new Animated.Value(initialValue, config);
   }
 

package/src/monkey-patch.ts

@@ -1,4 +1,5 @@
 // stub for all platforms
 const NOOP = () => {};
+
 export const applyMonkeyPatch = NOOP;
 export const revertMonkeyPatch = NOOP;

package/src/reanimated.native.ts

@@ -4,10 +4,6 @@ import type {
   EventWithName,
   FocusedInputLayoutChangedEvent,
   FocusedInputLayoutHandlerHook,
-  FocusedInputSelectionChangedEvent,
-  FocusedInputSelectionHandlerHook,
-  FocusedInputTextChangedEvent,
-  FocusedInputTextHandlerHook,
   KeyboardHandlerHook,
   NativeEvent,
 } from "./types";
@@ -84,49 +80,3 @@ export const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<
     doDependenciesDiffer,
   );
 };
-
-export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
-  EventContext,
-  EventWithName<FocusedInputTextChangedEvent>
-> = (handlers, dependencies) => {
-  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
-
-  return useEvent(
-    (event) => {
-      "worklet";
-      const { onFocusedInputTextChanged } = handlers;
-
-      if (
-        onFocusedInputTextChanged &&
-        event.eventName.endsWith("onFocusedInputTextChanged")
-      ) {
-        onFocusedInputTextChanged(event, context);
-      }
-    },
-    ["onFocusedInputTextChanged"],
-    doDependenciesDiffer,
-  );
-};
-
-export const useFocusedInputSelectionHandler: FocusedInputSelectionHandlerHook<
-  EventContext,
-  EventWithName<FocusedInputSelectionChangedEvent>
-> = (handlers, dependencies) => {
-  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
-
-  return useEvent(
-    (event) => {
-      "worklet";
-      const { onFocusedInputSelectionChanged } = handlers;
-
-      if (
-        onFocusedInputSelectionChanged &&
-        event.eventName.endsWith("onFocusedInputSelectionChanged")
-      ) {
-        onFocusedInputSelectionChanged(event, context);
-      }
-    },
-    ["onFocusedInputSelectionChanged"],
-    doDependenciesDiffer,
-  );
-};

package/src/reanimated.ts

@@ -2,15 +2,12 @@ import type {
   EventWithName,
   FocusedInputLayoutChangedEvent,
   FocusedInputLayoutHandlerHook,
-  FocusedInputSelectionChangedEvent,
-  FocusedInputSelectionHandlerHook,
-  FocusedInputTextChangedEvent,
-  FocusedInputTextHandlerHook,
   KeyboardHandlerHook,
   NativeEvent,
 } from "./types";
 
 const NOOP = () => () => {};
+
 export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
   Record<string, unknown>,
   EventWithName<NativeEvent>
@@ -19,11 +16,3 @@ export const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<
   Record<string, unknown>,
   EventWithName<FocusedInputLayoutChangedEvent>
 > = NOOP;
-export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
-  Record<string, unknown>,
-  EventWithName<FocusedInputTextChangedEvent>
-> = NOOP;
-export const useFocusedInputSelectionHandler: FocusedInputSelectionHandlerHook<
-  Record<string, unknown>,
-  EventWithName<FocusedInputSelectionChangedEvent>
-> = NOOP;

package/src/specs/KeyboardGestureAreaNativeComponent.ts

@@ -2,12 +2,16 @@ import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNati
 
 import type { HostComponent } from "react-native";
 import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
-import type { WithDefault } from "react-native/Libraries/Types/CodegenTypes";
+import type {
+  Double,
+  WithDefault,
+} from "react-native/Libraries/Types/CodegenTypes";
 
 export interface NativeProps extends ViewProps {
   interpolator?: WithDefault<"linear" | "ios", "linear">;
   showOnSwipeUp?: boolean;
   enableSwipeToDismiss?: boolean;
+  offset?: Double;
 }
 
 export default codegenNativeComponent<NativeProps>("KeyboardGestureArea", {

package/src/types.ts

@@ -47,6 +47,8 @@ export type EventWithName<T> = {
 
 // native View/Module declarations
 export type KeyboardControllerProps = {
+  //ref prop
+  ref?: React.Ref<React.Component<KeyboardControllerProps>>;
   // callback props
   onKeyboardMoveStart?: (
     e: NativeSyntheticEvent<EventWithName<NativeEvent>>,
@@ -101,6 +103,10 @@ export type KeyboardGestureAreaProps = {
    * Defaults to `true`.
    */
   enableSwipeToDismiss?: boolean;
+  /**
+   * Extra distance to the keyboard.
+   */
+  offset?: number;
 } & ViewProps;
 
 export type Direction = "next" | "prev" | "current";

package/lib/commonjs/utils.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.uuid = void 0;
-const uuid = () => Math.random().toString(36).slice(-6);
-exports.uuid = uuid;
-//# sourceMappingURL=utils.js.map

package/lib/commonjs/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["uuid","Math","random","toString","slice","exports"],"sources":["utils.ts"],"sourcesContent":["export const uuid = () => Math.random().toString(36).slice(-6);\n"],"mappings":";;;;;;AAAO,MAAMA,IAAI,GAAGA,CAAA,KAAMC,IAAI,CAACC,MAAM,CAAC,CAAC,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC;AAACC,OAAA,CAAAL,IAAA,GAAAA,IAAA","ignoreList":[]}

package/lib/module/utils.js

@@ -1,2 +0,0 @@
-export const uuid = () => Math.random().toString(36).slice(-6);
-//# sourceMappingURL=utils.js.map

package/lib/module/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["uuid","Math","random","toString","slice"],"sources":["utils.ts"],"sourcesContent":["export const uuid = () => Math.random().toString(36).slice(-6);\n"],"mappings":"AAAA,OAAO,MAAMA,IAAI,GAAGA,CAAA,KAAMC,IAAI,CAACC,MAAM,CAAC,CAAC,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/utils.d.ts

@@ -1 +0,0 @@
-export declare const uuid: () => string;

package/src/utils.ts

@@ -1 +0,0 @@
-export const uuid = () => Math.random().toString(36).slice(-6);