feat: don't use private reanimated API

Author: kirillzyusko

src/animated.tsx

@@ -9,7 +9,6 @@ import Reanimated, { useSharedValue } from "react-native-reanimated";
 
 import { KeyboardControllerView } from "./bindings";
 import { KeyboardContext } from "./context";
-import { focusedInputEventsMap, keyboardEventsMap } from "./event-mappings";
 import { useAnimatedValue, useEventHandlerRegistration } from "./internal";
 import { KeyboardController } from "./module";
 import {
@@ -130,14 +129,10 @@ export const KeyboardProvider = (props: KeyboardProviderProps) => {
   const progressSV = useSharedValue(0);
   const heightSV = useSharedValue(0);
   const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
-  const setKeyboardHandlers = useEventHandlerRegistration<KeyboardHandler>(
-    keyboardEventsMap,
-    viewTagRef,
-  );
-  const setInputHandlers = useEventHandlerRegistration<FocusedInputHandler>(
-    focusedInputEventsMap,
-    viewTagRef,
-  );
+  const setKeyboardHandlers =
+    useEventHandlerRegistration<KeyboardHandler>(viewTagRef);
+  const setInputHandlers =
+    useEventHandlerRegistration<FocusedInputHandler>(viewTagRef);
   // memo
   const context = useMemo<KeyboardAnimationContext>(
     () => ({

src/event-handler.d.ts

@@ -1,4 +1,5 @@
 import { useEffect, useLayoutEffect } from "react";
+import { useEvent } from "react-native-reanimated";
 
 import { AndroidSoftInputModes } from "../constants";
 import { useKeyboardContext } from "../context";
@@ -111,8 +112,36 @@ export function useGenericKeyboardHandler(
 ) {
   const context = useKeyboardContext();
 
+  const eventHandler = useEvent(
+    (event) => {
+      "worklet";
+
+      if (event.eventName.endsWith("onKeyboardMoveStart")) {
+        handler.onStart?.(event);
+      }
+
+      if (event.eventName.endsWith("onKeyboardMove")) {
+        handler.onMove?.(event);
+      }
+
+      if (event.eventName.endsWith("onKeyboardMoveEnd")) {
+        handler.onEnd?.(event);
+      }
+
+      if (event.eventName.endsWith("onKeyboardMoveInteractive")) {
+        handler.onInteractive?.(event);
+      }
+    },
+    [
+      "onKeyboardMoveStart",
+      "onKeyboardMove",
+      "onKeyboardMoveEnd",
+      "onKeyboardMoveInteractive",
+    ],
+  );
+
   useLayoutEffect(() => {
-    const cleanup = context.setKeyboardHandlers(handler);
+    const cleanup = context.setKeyboardHandlers(eventHandler);
 
     return () => cleanup();
   }, deps);
@@ -228,8 +257,23 @@ export function useFocusedInputHandler(
 ) {
   const context = useKeyboardContext();
 
+  const eventHandler = useEvent(
+    (event) => {
+      "worklet";
+
+      if (event.eventName.endsWith("onFocusedInputTextChanged")) {
+        handler.onChangeText?.(event);
+      }
+
+      if (event.eventName.endsWith("onFocusedInputSelectionChanged")) {
+        handler.onSelectionChange?.(event);
+      }
+    },
+    ["onFocusedInputTextChanged", "onFocusedInputSelectionChanged"],
+  );
+
   useLayoutEffect(() => {
-    const cleanup = context.setInputHandlers(handler);
+    const cleanup = context.setInputHandlers(eventHandler);
 
     return () => cleanup();
   }, deps);

src/event-handler.js

@@ -1,7 +1,6 @@
 import { useRef } from "react";
 import { Animated } from "react-native";
 
-import { registerEventHandler, unregisterEventHandler } from "./event-handler";
 import { findNodeHandle } from "./utils/findNodeHandle";
 
 type EventHandler = (event: never) => void;
@@ -23,12 +22,8 @@ type ComponentOrHandle = Parameters<typeof findNodeHandle>[0];
  */
 export function useEventHandlerRegistration<
   H extends Partial<Record<string, EventHandler>>,
->(
-  map: Map<keyof H, string>,
-  viewTagRef: React.MutableRefObject<ComponentOrHandle>,
-) {
+>(viewTagRef: React.MutableRefObject<ComponentOrHandle>) {
   const onRegisterHandler = (handler: H) => {
-    const ids: (number | null)[] = [];
     const attachWorkletHandlers = () => {
       const viewTag = findNodeHandle(viewTagRef.current);
 
@@ -38,26 +33,8 @@ export function useEventHandlerRegistration<
         );
       }
 
-      ids.push(
-        ...Object.keys(handler).map((handlerName) => {
-          const eventName = map.get(handlerName as keyof H);
-          const functionToCall = handler[handlerName as keyof H];
-
-          if (eventName && viewTag) {
-            return registerEventHandler(
-              (event: Parameters<NonNullable<H[keyof H]>>[0]) => {
-                "worklet";
-
-                functionToCall?.(event);
-              },
-              eventName,
-              viewTag,
-            );
-          }
-
-          return null;
-        }),
-      );
+      // TODO: must be a compat layer? Property `workletEventHandler` from `ref` may be missing. Should be on useEvent layer?
+      handler.workletEventHandler.registerForEvents(viewTag);
     };
 
     if (viewTagRef.current) {
@@ -68,7 +45,9 @@ export function useEventHandlerRegistration<
     }
 
     return () => {
-      ids.forEach((id) => (id ? unregisterEventHandler(id) : null));
+      const viewTag = findNodeHandle(viewTagRef.current);
+
+      handler.workletEventHandler.unregisterFromEvents(viewTag);
     };
   };