react-native-keyboard-controller 1.12.6 → 1.13.0

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,63 +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 = () => {
-    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;
 }
 
 /**
@@ -75,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);