refactor: don't use private reanimated API (#1209)

## 📜 Description

Added a support for Expo snack.

## 💡 Motivation and Context

In this PR I re-worked the approach how I attach worklet handlers to
`KeyboardControllerView`. Prior to
#538
we simply broadcasted events for stored worklet handlers inside a global
object. But this approach had downsides, such as slow flow of execution,
so I re-worked it in
#538
and instantly introduced issues like:
#551
and
#555

While I managed somehow to fix it, the new approach wasn't ideal:
- we still used internal API that was relying on FS structure;
- this is highly internal API that can be changed anytime and will not
assure that lib works across all reanimated versions;
- in Expo Go I see strange errors, but I tend to think they are derived
from the same issue - my code can not lookup a module and we get a crash
🤷‍♂️

I kept the idea to re-work this piece of code and in this PR I'm doing
it. I can not use public API only, but the new approach is actually
smarter. The new idea is that we **still** use `registerEvent`

Should fix errors like:

<img width="600" height="1266" alt="image"
src="https://github.com/user-attachments/assets/272de55e-91a5-443a-b252-32e5a0f1a50c"
/>

Actually correct solution for:
#555

In future I'll be able to add interactive code samples into
documentation, so people can run demos straight in the browser.

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### JS

- remove `event-handler` files;
- remove `event-mapping` file;
- use `useEvent`/`useHandler` hook for `useKeyboardHandler` and
`useFocusedInputHandler` hooks;
- use `registerForEvents`/`unregisterFromEvents` methods from
`WorkletEventHandler` (instance returned by `useEvent` hook);

> I also had to use `never` types, or cast to my types using `as unknown
as`, since I anyway access reanimated internals. But it's safer to use
internals in this way, than before 🤞

## 🤔 How Has This Been Tested?

Tested manually on:
- iPhone 16 Pro (new arch, iOS 26.0);
- e2e tests;

## 📸 Screenshots (if appropriate):

<img width="1721" height="878" alt="image"
src="https://github.com/user-attachments/assets/30c8dc65-a7f2-4682-838f-aab4c22189fc"
/>

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

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 {
@@ -19,10 +18,8 @@ import {
 
 import type { KeyboardAnimationContext } from "./context";
 import type {
-  FocusedInputHandler,
   FocusedInputLayoutChangedEvent,
   KeyboardControllerProps,
-  KeyboardHandler,
   NativeEvent,
 } from "./types";
 import type { ViewStyle } from "react-native";
@@ -130,14 +127,8 @@ 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(viewTagRef);
+  const setInputHandlers = useEventHandlerRegistration(viewTagRef);
   // memo
   const context = useMemo<KeyboardAnimationContext>(
     () => ({

src/context.ts

@@ -1,13 +1,12 @@
 import { createContext, useContext } from "react";
 import { Animated } from "react-native";
 
-import type {
-  FocusedInputHandler,
-  FocusedInputLayoutChangedEvent,
-  KeyboardHandler,
-} from "./types";
+import type { FocusedInputLayoutChangedEvent } from "./types";
 import type React from "react";
-import type { SharedValue } from "react-native-reanimated";
+import type {
+  EventHandlerProcessed,
+  SharedValue,
+} from "react-native-reanimated";
 
 export type AnimatedContext = {
   /**
@@ -37,9 +36,13 @@ export type KeyboardAnimationContext = {
   /** Layout of the focused `TextInput` represented as `SharedValue`. */
   layout: SharedValue<FocusedInputLayoutChangedEvent | null>;
   /** Method for setting workletized keyboard handlers. */
-  setKeyboardHandlers: (handlers: KeyboardHandler) => () => void;
+  setKeyboardHandlers: (
+    handlers: EventHandlerProcessed<never, never>,
+  ) => () => void;
   /** Method for setting workletized handlers for tracking focused input events. */
-  setInputHandlers: (handlers: FocusedInputHandler) => () => void;
+  setInputHandlers: (
+    handlers: EventHandlerProcessed<never, never>,
+  ) => () => void;
   /** Method to enable/disable KeyboardController library. */
   setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
 };

src/event-handler.d.ts

@@ -1,12 +1,18 @@
 import { useEffect, useLayoutEffect } from "react";
+import { useEvent, useHandler } from "react-native-reanimated";
 
 import { AndroidSoftInputModes } from "../constants";
 import { useKeyboardContext } from "../context";
 import { KeyboardController } from "../module";
 
 import type { AnimatedContext, ReanimatedContext } from "../context";
-import type { FocusedInputHandler, KeyboardHandler } from "../types";
-import type { DependencyList } from "react";
+import type {
+  FocusedInputHandler,
+  FocusedInputSelectionChangedEvent,
+  FocusedInputTextChangedEvent,
+  KeyboardHandler,
+  NativeEvent,
+} from "../types";
 
 /**
  * Hook that sets the Android soft input mode to adjust resize on mount and
@@ -107,12 +113,43 @@ export const useReanimatedKeyboardAnimation = (): ReanimatedContext => {
  */
 export function useGenericKeyboardHandler(
   handler: KeyboardHandler,
-  deps?: DependencyList,
+  deps?: unknown[],
 ) {
   const context = useKeyboardContext();
 
+  const { doDependenciesDiffer } = useHandler(handler, deps);
+
+  const eventHandler = useEvent<NativeEvent>(
+    (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",
+    ],
+    doDependenciesDiffer,
+  );
+
   useLayoutEffect(() => {
-    const cleanup = context.setKeyboardHandlers(handler);
+    const cleanup = context.setKeyboardHandlers(eventHandler);
 
     return () => cleanup();
   }, deps);
@@ -149,10 +186,7 @@ export function useGenericKeyboardHandler(
  * }
  * ```
  */
-export function useKeyboardHandler(
-  handler: KeyboardHandler,
-  deps?: DependencyList,
-) {
+export function useKeyboardHandler(handler: KeyboardHandler, deps?: unknown[]) {
   useResizeMode();
   useGenericKeyboardHandler(handler, deps);
 }
@@ -224,12 +258,32 @@ export function useReanimatedFocusedInput() {
  */
 export function useFocusedInputHandler(
   handler: FocusedInputHandler,
-  deps?: DependencyList,
+  deps?: unknown[],
 ) {
   const context = useKeyboardContext();
 
+  const { doDependenciesDiffer } = useHandler<never, never>(handler, deps);
+
+  const eventHandler = useEvent<
+    FocusedInputSelectionChangedEvent | FocusedInputTextChangedEvent
+  >(
+    (event) => {
+      "worklet";
+
+      if (event.eventName.endsWith("onFocusedInputTextChanged")) {
+        handler.onChangeText?.(event as FocusedInputTextChangedEvent);
+      }
+
+      if (event.eventName.endsWith("onFocusedInputSelectionChanged")) {
+        handler.onSelectionChange?.(event as FocusedInputSelectionChangedEvent);
+      }
+    },
+    ["onFocusedInputTextChanged", "onFocusedInputSelectionChanged"],
+    doDependenciesDiffer,
+  );
+
   useLayoutEffect(() => {
-    const cleanup = context.setInputHandlers(handler);
+    const cleanup = context.setInputHandlers(eventHandler);
 
     return () => cleanup();
   }, deps);

src/event-handler.js

@@ -1,16 +1,26 @@
 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;
+import type { EventHandlerProcessed } from "react-native-reanimated";
+
 type ComponentOrHandle = Parameters<typeof findNodeHandle>[0];
 
+type WorkletHandler = {
+  registerForEvents: (viewTag: number) => void;
+  unregisterFromEvents: (viewTag: number) => void;
+};
+
+type WorkletHandlerOrWorkletHandlerObject =
+  | WorkletHandler
+  | {
+      workletEventHandler: WorkletHandler;
+    };
+
 /**
  * An internal hook that helps to register workletized event handlers.
  *
- * @param map - Map of event handlers and their names.
  * @param viewTagRef - Ref to the view that produces events.
  * @returns A function that registers supplied event handlers.
  * @example
@@ -21,14 +31,12 @@ type ComponentOrHandle = Parameters<typeof findNodeHandle>[0];
  * );
  * ```
  */
-export function useEventHandlerRegistration<
-  H extends Partial<Record<string, EventHandler>>,
->(
-  map: Map<keyof H, string>,
+export function useEventHandlerRegistration(
   viewTagRef: React.MutableRefObject<ComponentOrHandle>,
 ) {
-  const onRegisterHandler = (handler: H) => {
-    const ids: (number | null)[] = [];
+  const onRegisterHandler = (handler: EventHandlerProcessed<never, never>) => {
+    const currentHandler =
+      handler as unknown as WorkletHandlerOrWorkletHandlerObject;
     const attachWorkletHandlers = () => {
       const viewTag = findNodeHandle(viewTagRef.current);
 
@@ -38,26 +46,13 @@ 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;
-        }),
-      );
+      if (viewTag) {
+        if ("workletEventHandler" in currentHandler) {
+          currentHandler.workletEventHandler.registerForEvents(viewTag);
+        } else {
+          currentHandler.registerForEvents(viewTag);
+        }
+      }
     };
 
     if (viewTagRef.current) {
@@ -68,7 +63,15 @@ export function useEventHandlerRegistration<
     }
 
     return () => {
-      ids.forEach((id) => (id ? unregisterEventHandler(id) : null));
+      const viewTag = findNodeHandle(viewTagRef.current);
+
+      if (viewTag) {
+        if ("workletEventHandler" in currentHandler) {
+          currentHandler.workletEventHandler.unregisterFromEvents(viewTag);
+        } else {
+          currentHandler.unregisterFromEvents(viewTag);
+        }
+      }
     };
   };