react-native-keyboard-controller 1.11.7 → 1.12.0

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

@@ -2,7 +2,7 @@ import React from "react";
 import Arrow from "./Arrow";
 import Button from "./Button";
 import { colors } from "./colors";
-import type { KeyboardToolbarTheme } from "./types";
+import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { ReactNode } from "react";
 export type KeyboardToolbarProps = {
     /** An element that is shown in the middle of the toolbar. */
@@ -20,6 +20,26 @@ export type KeyboardToolbarProps = {
      * and want to show only `Done` button. Default to `true`.
      */
     showArrows?: boolean;
+    /**
+     * A callback that is called when the user presses the next button along with the default action.
+     */
+    onNextCallback?: () => void;
+    /**
+     * A callback that is called when the user presses the previous button along with the default action.
+     */
+    onPrevCallback?: () => void;
+    /**
+     * A callback that is called when the user presses the done button along with the default action.
+     */
+    onDoneCallback?: () => void;
+    /**
+     * A component that applies blur effect to the toolbar.
+     */
+    blur?: JSX.Element | null;
+    /**
+     * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
+     */
+    opacity?: HEX;
 };
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and

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

@@ -5,7 +5,7 @@ type Theme = {
     /** Color for arrow when it's disabled */
     disabled: ColorValue;
     /** Keyboard toolbar background color */
-    background: ColorValue;
+    background: string;
     /** Color for ripple effect (on button touch) on Android */
     ripple: ColorValue;
 };
@@ -13,4 +13,6 @@ export type KeyboardToolbarTheme = {
     light: Theme;
     dark: Theme;
 };
+type HexSymbol = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "A" | "B" | "C" | "D" | "E" | "F" | "a" | "b" | "c" | "d" | "e" | "f";
+export type HEX = `${HexSymbol}${HexSymbol}`;
 export {};

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

@@ -2,4 +2,7 @@ export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
 export { default as KeyboardStickyView } from "./KeyboardStickyView";
 export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
 export { default as KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./KeyboardToolbar";
+export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
+export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
+export type { KeyboardAwareScrollViewProps } from "./KeyboardAwareScrollView";
 export type { KeyboardToolbarProps } from "./KeyboardToolbar";

package/lib/typescript/index.d.ts

@@ -5,4 +5,4 @@ export * from "./hooks";
 export * from "./constants";
 export * from "./types";
 export { KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView, KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./components";
-export type { KeyboardToolbarProps } from "./components";
+export type { KeyboardAvoidingViewProps, KeyboardStickyViewProps, KeyboardAwareScrollViewProps, KeyboardToolbarProps, } from "./components";

package/lib/typescript/reanimated.d.ts

@@ -1,4 +1,5 @@
-import type { EventWithName, FocusedInputLayoutChangedEvent, FocusedInputLayoutHandlerHook, FocusedInputTextChangedEvent, FocusedInputTextHandlerHook, KeyboardHandlerHook, NativeEvent } from "./types";
+import type { EventWithName, FocusedInputLayoutChangedEvent, FocusedInputLayoutHandlerHook, FocusedInputSelectionChangedEvent, FocusedInputSelectionHandlerHook, FocusedInputTextChangedEvent, FocusedInputTextHandlerHook, KeyboardHandlerHook, NativeEvent } from "./types";
 export declare const useAnimatedKeyboardHandler: KeyboardHandlerHook<Record<string, unknown>, EventWithName<NativeEvent>>;
 export declare const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<Record<string, unknown>, EventWithName<FocusedInputLayoutChangedEvent>>;
 export declare const useFocusedInputTextHandler: FocusedInputTextHandlerHook<Record<string, unknown>, EventWithName<FocusedInputTextChangedEvent>>;
+export declare const useFocusedInputSelectionHandler: FocusedInputSelectionHandlerHook<Record<string, unknown>, EventWithName<FocusedInputSelectionChangedEvent>>;

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

@@ -1,4 +1,7 @@
-import type { EventWithName, FocusedInputLayoutChangedEvent, FocusedInputLayoutHandlerHook, FocusedInputTextChangedEvent, FocusedInputTextHandlerHook, KeyboardHandlerHook, NativeEvent } from "./types";
-export declare const useAnimatedKeyboardHandler: KeyboardHandlerHook<Record<string, unknown>, EventWithName<NativeEvent>>;
-export declare const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<Record<string, unknown>, EventWithName<FocusedInputLayoutChangedEvent>>;
-export declare const useFocusedInputTextHandler: FocusedInputTextHandlerHook<Record<string, unknown>, EventWithName<FocusedInputTextChangedEvent>>;
+import type { EventWithName, FocusedInputLayoutChangedEvent, FocusedInputLayoutHandlerHook, FocusedInputSelectionChangedEvent, FocusedInputSelectionHandlerHook, FocusedInputTextChangedEvent, FocusedInputTextHandlerHook, KeyboardHandlerHook, NativeEvent } from "./types";
+type EventContext = Record<string, unknown>;
+export declare const useAnimatedKeyboardHandler: KeyboardHandlerHook<EventContext, EventWithName<NativeEvent>>;
+export declare const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<EventContext, EventWithName<FocusedInputLayoutChangedEvent>>;
+export declare const useFocusedInputTextHandler: FocusedInputTextHandlerHook<EventContext, EventWithName<FocusedInputTextChangedEvent>>;
+export declare const useFocusedInputSelectionHandler: FocusedInputSelectionHandlerHook<EventContext, EventWithName<FocusedInputSelectionChangedEvent>>;
+export {};

package/lib/typescript/specs/KeyboardControllerViewNativeComponent.d.ts

@@ -22,6 +22,21 @@ type FocusedInputLayoutChangedEvent = Readonly<{
 type FocusedInputTextChangedEvent = Readonly<{
     text: string;
 }>;
+type FocusedInputSelectionChangedEvent = Readonly<{
+    target: Int32;
+    selection: {
+        start: {
+            x: Double;
+            y: Double;
+            position: Int32;
+        };
+        end: {
+            x: Double;
+            y: Double;
+            position: Int32;
+        };
+    };
+}>;
 export interface NativeProps extends ViewProps {
     enabled?: boolean;
     statusBarTranslucent?: boolean;
@@ -32,6 +47,7 @@ export interface NativeProps extends ViewProps {
     onKeyboardMoveInteractive?: DirectEventHandler<KeyboardMoveEvent>;
     onFocusedInputLayoutChanged?: DirectEventHandler<FocusedInputLayoutChangedEvent>;
     onFocusedInputTextChanged?: DirectEventHandler<FocusedInputTextChangedEvent>;
+    onFocusedInputSelectionChanged?: DirectEventHandler<FocusedInputSelectionChangedEvent>;
 }
 declare const _default: HostComponent<NativeProps>;
 export default _default;

package/lib/typescript/types.d.ts

@@ -20,6 +20,21 @@ export type FocusedInputLayoutChangedEvent = {
 export type FocusedInputTextChangedEvent = {
     text: string;
 };
+export type FocusedInputSelectionChangedEvent = {
+    target: number;
+    selection: {
+        start: {
+            x: number;
+            y: number;
+            position: number;
+        };
+        end: {
+            x: number;
+            y: number;
+            position: number;
+        };
+    };
+};
 export type EventWithName<T> = {
     eventName: string;
 } & T;
@@ -30,9 +45,11 @@ export type KeyboardControllerProps = {
     onKeyboardMoveInteractive?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onFocusedInputLayoutChanged?: (e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>) => void;
     onFocusedInputTextChanged?: (e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>) => void;
+    onFocusedInputSelectionChanged?: (e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>) => void;
     onKeyboardMoveReanimated?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onFocusedInputLayoutChangedReanimated?: (e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>) => void;
     onFocusedInputTextChangedReanimated?: (e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>) => void;
+    onFocusedInputSelectionChangedReanimated?: (e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>) => void;
     statusBarTranslucent?: boolean;
     navigationBarTranslucent?: boolean;
     enabled?: boolean;
@@ -90,6 +107,9 @@ export type FocusedInputLayoutHandlerHook<TContext, Event> = (handlers: {
 export type FocusedInputTextHandlerHook<TContext, Event> = (handlers: {
     onFocusedInputTextChanged?: (e: FocusedInputTextChangedEvent, context: TContext) => void;
 }, dependencies?: unknown[]) => (e: NativeSyntheticEvent<Event>) => void;
+export type FocusedInputSelectionHandlerHook<TContext, Event> = (handlers: {
+    onFocusedInputSelectionChanged?: (e: FocusedInputSelectionChangedEvent, context: TContext) => void;
+}, dependencies?: unknown[]) => (e: NativeSyntheticEvent<Event>) => void;
 export type Handlers<T> = Record<string, T | undefined>;
 export type KeyboardHandler = Partial<{
     onStart: (e: NativeEvent) => void;
@@ -100,5 +120,6 @@ export type KeyboardHandler = Partial<{
 export type KeyboardHandlers = Handlers<KeyboardHandler>;
 export type FocusedInputHandler = Partial<{
     onChangeText: (e: FocusedInputTextChangedEvent) => void;
+    onSelectionChange: (e: FocusedInputSelectionChangedEvent) => void;
 }>;
 export type FocusedInputHandlers = Handlers<FocusedInputHandler>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.11.7",
+  "version": "1.12.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -47,6 +47,7 @@
     "focused input",
     "text changed",
     "avoiding view",
+    "avoid keyboard",
     "sticky view",
     "keyboard aware scroll view",
     "keyboard toolbar",
@@ -87,9 +88,9 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.8.8",
     "react": "18.2.0",
-    "react-native": "0.73.6",
+    "react-native": "0.74.0",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-reanimated": "3.8.0",
+    "react-native-reanimated": "3.9.0",
     "release-it": "^14.2.2",
     "typescript": "5.0.4"
   },

package/src/animated.tsx

@@ -9,6 +9,7 @@ import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
 import {
   useAnimatedKeyboardHandler,
   useFocusedInputLayoutHandler,
+  useFocusedInputSelectionHandler,
   useFocusedInputTextHandler,
 } from "./reanimated";
 
@@ -191,6 +192,16 @@ export const KeyboardProvider = ({
     },
     [],
   );
+  const inputSelectionHandler = useFocusedInputSelectionHandler(
+    {
+      onFocusedInputSelectionChanged: (e) => {
+        "worklet";
+
+        broadcastInputEvents("onSelectionChange", e);
+      },
+    },
+    [],
+  );
   // effects
   useEffect(() => {
     if (enabled) {
@@ -210,6 +221,7 @@ export const KeyboardProvider = ({
         onKeyboardMoveInteractive={onKeyboardMove}
         onFocusedInputLayoutChangedReanimated={inputLayoutHandler}
         onFocusedInputTextChangedReanimated={inputTextHandler}
+        onFocusedInputSelectionChangedReanimated={inputSelectionHandler}
         navigationBarTranslucent={navigationBarTranslucent}
         statusBarTranslucent={statusBarTranslucent}
         style={styles.container}

package/src/components/KeyboardAvoidingView/index.tsx

@@ -12,7 +12,7 @@ import { useKeyboardAnimation } from "./hooks";
 
 import type { LayoutRectangle, ViewProps } from "react-native";
 
-type Props = {
+export type KeyboardAvoidingViewProps = {
   /**
    * Specify how to react to the presence of the keyboard.
    */
@@ -47,7 +47,10 @@ const defaultLayout: LayoutRectangle = {
  * View that moves out of the way when the keyboard appears by automatically
  * adjusting its height, position, or bottom padding.
  */
-const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
+const KeyboardAvoidingView = forwardRef<
+  View,
+  React.PropsWithChildren<KeyboardAvoidingViewProps>
+>(
   (
     {
       behavior,

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -24,7 +24,7 @@ import type {
 } from "react-native";
 import type { FocusedInputLayoutChangedEvent } from "react-native-keyboard-controller";
 
-type KeyboardAwareScrollViewProps = {
+export type KeyboardAwareScrollViewProps = {
   /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
   bottomOffset?: number;
   /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
@@ -303,7 +303,7 @@ const KeyboardAwareScrollView = forwardRef<
       () =>
         enabled
           ? {
-              // animations become laggy when scrolling to the end of the `ScrollView` (when the last input is focused)
+              // animations become choppy when scrolling to the end of the `ScrollView` (when the last input is focused)
               // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding
               // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation
               // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout

package/src/components/KeyboardStickyView/index.tsx

@@ -8,7 +8,7 @@ import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller
 
 import type { View, ViewProps } from "react-native";
 
-type KeyboardStickyViewProps = {
+export type KeyboardStickyViewProps = {
   /**
    * Specify additional offset to the view for given keyboard state.
    */

package/src/components/KeyboardToolbar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 
 import {
@@ -13,7 +13,7 @@ import Arrow from "./Arrow";
 import Button from "./Button";
 import { colors } from "./colors";
 
-import type { KeyboardToolbarTheme } from "./types";
+import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { ReactNode } from "react";
 
 export type KeyboardToolbarProps = {
@@ -32,6 +32,26 @@ export type KeyboardToolbarProps = {
    * and want to show only `Done` button. Default to `true`.
    */
   showArrows?: boolean;
+  /**
+   * A callback that is called when the user presses the next button along with the default action.
+   */
+  onNextCallback?: () => void;
+  /**
+   * A callback that is called when the user presses the previous button along with the default action.
+   */
+  onPrevCallback?: () => void;
+  /**
+   * A callback that is called when the user presses the done button along with the default action.
+   */
+  onDoneCallback?: () => void;
+  /**
+   * A component that applies blur effect to the toolbar.
+   */
+  blur?: JSX.Element | null;
+  /**
+   * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
+   */
+  opacity?: HEX;
 };
 const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
 const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
@@ -40,6 +60,7 @@ const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
 const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
 
 const KEYBOARD_TOOLBAR_HEIGHT = 42;
+const DEFAULT_OPACITY: HEX = "FF";
 const offset = { closed: KEYBOARD_TOOLBAR_HEIGHT };
 
 const dismissKeyboard = () => KeyboardController.dismiss();
@@ -57,6 +78,11 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   button,
   icon,
   showArrows = true,
+  onNextCallback,
+  onPrevCallback,
+  onDoneCallback,
+  blur = null,
+  opacity = DEFAULT_OPACITY,
 }) => {
   const colorScheme = useColorScheme();
   const [inputs, setInputs] = useState({
@@ -81,24 +107,38 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
     () => [
       styles.toolbar,
       {
-        backgroundColor: theme[colorScheme].background,
+        backgroundColor: `${theme[colorScheme].background}${opacity}`,
       },
     ],
-    [colorScheme, theme],
+    [colorScheme, opacity, theme],
   );
   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]);
+
   return (
     <KeyboardStickyView offset={offset}>
       <View style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
+        {blur}
         {showArrows && (
           <>
             <ButtonContainer
               accessibilityLabel="Previous"
               accessibilityHint="Will move focus to previous field"
               disabled={isPrevDisabled}
-              onPress={goToPrevField}
+              onPress={onPressPrev}
               testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
               theme={theme}
             >
@@ -112,7 +152,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
               accessibilityLabel="Next"
               accessibilityHint="Will move focus to next field"
               disabled={isNextDisabled}
-              onPress={goToNextField}
+              onPress={onPressNext}
               testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
               theme={theme}
             >
@@ -131,7 +171,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
         <ButtonContainer
           accessibilityLabel="Done"
           accessibilityHint="Will close the keyboard"
-          onPress={dismissKeyboard}
+          onPress={onPressDone}
           testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
           rippleRadius={28}
           style={styles.doneButtonContainer}

package/src/components/KeyboardToolbar/types.ts

@@ -6,7 +6,7 @@ type Theme = {
   /** Color for arrow when it's disabled */
   disabled: ColorValue;
   /** Keyboard toolbar background color */
-  background: ColorValue;
+  background: string;
   /** Color for ripple effect (on button touch) on Android */
   ripple: ColorValue;
 };
@@ -14,3 +14,27 @@ export type KeyboardToolbarTheme = {
   light: Theme;
   dark: Theme;
 };
+type HexSymbol =
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "A"
+  | "B"
+  | "C"
+  | "D"
+  | "E"
+  | "F"
+  | "a"
+  | "b"
+  | "c"
+  | "d"
+  | "e"
+  | "f";
+export type HEX = `${HexSymbol}${HexSymbol}`;

package/src/components/index.ts

@@ -5,4 +5,7 @@ export {
   default as KeyboardToolbar,
   DefaultKeyboardToolbarTheme,
 } from "./KeyboardToolbar";
+export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
+export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
+export type { KeyboardAwareScrollViewProps } from "./KeyboardAwareScrollView";
 export type { KeyboardToolbarProps } from "./KeyboardToolbar";

package/src/index.ts

@@ -13,4 +13,9 @@ export {
   KeyboardToolbar,
   DefaultKeyboardToolbarTheme,
 } from "./components";
-export type { KeyboardToolbarProps } from "./components";
+export type {
+  KeyboardAvoidingViewProps,
+  KeyboardStickyViewProps,
+  KeyboardAwareScrollViewProps,
+  KeyboardToolbarProps,
+} from "./components";

package/src/reanimated.native.ts

@@ -4,14 +4,18 @@ import type {
   EventWithName,
   FocusedInputLayoutChangedEvent,
   FocusedInputLayoutHandlerHook,
+  FocusedInputSelectionChangedEvent,
+  FocusedInputSelectionHandlerHook,
   FocusedInputTextChangedEvent,
   FocusedInputTextHandlerHook,
   KeyboardHandlerHook,
   NativeEvent,
 } from "./types";
 
+type EventContext = Record<string, unknown>;
+
 export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
-  Record<string, unknown>,
+  EventContext,
   EventWithName<NativeEvent>
 > = (handlers, dependencies) => {
   const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
@@ -59,7 +63,7 @@ export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
 };
 
 export const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<
-  Record<string, unknown>,
+  EventContext,
   EventWithName<FocusedInputLayoutChangedEvent>
 > = (handlers, dependencies) => {
   const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
@@ -82,7 +86,7 @@ export const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<
 };
 
 export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
-  Record<string, unknown>,
+  EventContext,
   EventWithName<FocusedInputTextChangedEvent>
 > = (handlers, dependencies) => {
   const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
@@ -103,3 +107,26 @@ export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
     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,6 +2,8 @@ import type {
   EventWithName,
   FocusedInputLayoutChangedEvent,
   FocusedInputLayoutHandlerHook,
+  FocusedInputSelectionChangedEvent,
+  FocusedInputSelectionHandlerHook,
   FocusedInputTextChangedEvent,
   FocusedInputTextHandlerHook,
   KeyboardHandlerHook,
@@ -21,3 +23,7 @@ export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
   Record<string, unknown>,
   EventWithName<FocusedInputTextChangedEvent>
 > = NOOP;
+export const useFocusedInputSelectionHandler: FocusedInputSelectionHandlerHook<
+  Record<string, unknown>,
+  EventWithName<FocusedInputSelectionChangedEvent>
+> = NOOP;

package/src/specs/KeyboardControllerViewNativeComponent.ts

@@ -32,6 +32,22 @@ type FocusedInputTextChangedEvent = Readonly<{
   text: string;
 }>;
 
+type FocusedInputSelectionChangedEvent = Readonly<{
+  target: Int32;
+  selection: {
+    start: {
+      x: Double;
+      y: Double;
+      position: Int32;
+    };
+    end: {
+      x: Double;
+      y: Double;
+      position: Int32;
+    };
+  };
+}>;
+
 export interface NativeProps extends ViewProps {
   // props
   enabled?: boolean;
@@ -46,6 +62,7 @@ export interface NativeProps extends ViewProps {
   /// focused input
   onFocusedInputLayoutChanged?: DirectEventHandler<FocusedInputLayoutChangedEvent>;
   onFocusedInputTextChanged?: DirectEventHandler<FocusedInputTextChangedEvent>;
+  onFocusedInputSelectionChanged?: DirectEventHandler<FocusedInputSelectionChangedEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/types.ts

@@ -26,6 +26,21 @@ export type FocusedInputLayoutChangedEvent = {
 export type FocusedInputTextChangedEvent = {
   text: string;
 };
+export type FocusedInputSelectionChangedEvent = {
+  target: number;
+  selection: {
+    start: {
+      x: number;
+      y: number;
+      position: number;
+    };
+    end: {
+      x: number;
+      y: number;
+      position: number;
+    };
+  };
+};
 export type EventWithName<T> = {
   eventName: string;
 } & T;
@@ -51,6 +66,9 @@ export type KeyboardControllerProps = {
   onFocusedInputTextChanged?: (
     e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>,
   ) => void;
+  onFocusedInputSelectionChanged?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>,
+  ) => void;
   // fake props used to activate reanimated bindings
   onKeyboardMoveReanimated?: (
     e: NativeSyntheticEvent<EventWithName<NativeEvent>>,
@@ -61,6 +79,9 @@ export type KeyboardControllerProps = {
   onFocusedInputTextChangedReanimated?: (
     e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>,
   ) => void;
+  onFocusedInputSelectionChangedReanimated?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>,
+  ) => void;
   // props
   statusBarTranslucent?: boolean;
   navigationBarTranslucent?: boolean;
@@ -153,6 +174,15 @@ export type FocusedInputTextHandlerHook<TContext, Event> = (
   },
   dependencies?: unknown[],
 ) => (e: NativeSyntheticEvent<Event>) => void;
+export type FocusedInputSelectionHandlerHook<TContext, Event> = (
+  handlers: {
+    onFocusedInputSelectionChanged?: (
+      e: FocusedInputSelectionChangedEvent,
+      context: TContext,
+    ) => void;
+  },
+  dependencies?: unknown[],
+) => (e: NativeSyntheticEvent<Event>) => void;
 
 // package types
 export type Handlers<T> = Record<string, T | undefined>;
@@ -165,5 +195,6 @@ export type KeyboardHandler = Partial<{
 export type KeyboardHandlers = Handlers<KeyboardHandler>;
 export type FocusedInputHandler = Partial<{
   onChangeText: (e: FocusedInputTextChangedEvent) => void;
+  onSelectionChange: (e: FocusedInputSelectionChangedEvent) => void;
 }>;
 export type FocusedInputHandlers = Handlers<FocusedInputHandler>;