react-native-keyboard-controller 1.9.5 → 1.10.0

package/src/context.ts

@@ -1,7 +1,11 @@
 import { createContext, useContext } from 'react';
 import { Animated } from 'react-native';
 
-import type { FocusedInputLayoutChangedEvent, KeyboardHandlers } from './types';
+import type {
+  FocusedInputHandlers,
+  FocusedInputLayoutChangedEvent,
+  KeyboardHandlers,
+} from './types';
 import type React from 'react';
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -18,7 +22,8 @@ export type KeyboardAnimationContext = {
   animated: AnimatedContext;
   reanimated: ReanimatedContext;
   layout: SharedValue<FocusedInputLayoutChangedEvent | null>;
-  setHandlers: (handlers: KeyboardHandlers) => void;
+  setKeyboardHandlers: (handlers: KeyboardHandlers) => void;
+  setInputHandlers: (handlers: FocusedInputHandlers) => void;
   setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
 };
 const NOOP = () => {};
@@ -43,7 +48,8 @@ const defaultContext: KeyboardAnimationContext = {
     height: DEFAULT_SHARED_VALUE,
   },
   layout: DEFAULT_LAYOUT,
-  setHandlers: NOOP,
+  setKeyboardHandlers: NOOP,
+  setInputHandlers: NOOP,
   setEnabled: NOOP,
 };
 export const KeyboardContext = createContext(defaultContext);

package/src/hooks.ts

@@ -6,7 +6,7 @@ import { useKeyboardContext } from './context';
 import { uuid } from './utils';
 
 import type { AnimatedContext, ReanimatedContext } from './context';
-import type { KeyboardHandler } from './types';
+import type { FocusedInputHandler, KeyboardHandler } from './types';
 import type { DependencyList } from 'react';
 
 export const useResizeMode = () => {
@@ -42,10 +42,10 @@ export function useGenericKeyboardHandler(
   useEffect(() => {
     const key = uuid();
 
-    context.setHandlers({ [key]: handler });
+    context.setKeyboardHandlers({ [key]: handler });
 
     return () => {
-      context.setHandlers({ [key]: undefined });
+      context.setKeyboardHandlers({ [key]: undefined });
     };
   }, deps);
 }
@@ -69,3 +69,20 @@ export function useReanimatedFocusedInput() {
 
   return { input: context.layout };
 }
+
+export function useFocusedInputHandler(
+  handler?: FocusedInputHandler,
+  deps?: DependencyList
+) {
+  const context = useKeyboardContext();
+
+  useEffect(() => {
+    const key = uuid();
+
+    context.setInputHandlers({ [key]: handler });
+
+    return () => {
+      context.setInputHandlers({ [key]: undefined });
+    };
+  }, deps);
+}

package/src/index.ts

@@ -6,4 +6,8 @@ export * from './hooks';
 export * from './constants';
 export * from './types';
 
-export { KeyboardAvoidingView, KeyboardStickyView } from './components';
+export {
+  KeyboardAvoidingView,
+  KeyboardStickyView,
+  KeyboardAwareScrollView,
+} from './components';

package/src/internal.ts

@@ -2,7 +2,13 @@ import { useCallback, useRef } from 'react';
 import { Animated } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
 
-import type { Handlers, NativeEvent } from './types';
+import type { Handlers } from './types';
+
+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
+];
 
 /**
  * Hook for storing worklet handlers (objects with keys, where values are worklets).
@@ -16,8 +22,8 @@ import type { Handlers, NativeEvent } from './types';
  * }
  */
 export function useSharedHandlers<
-  T extends Record<string, (event: NativeEvent) => void>
->() {
+  T extends UntypedHandler
+>(): SharedHandlersReturnType<T> {
   const handlers = useSharedValue<Handlers<T>>({});
   const jsHandlers = useRef<Handlers<T>>({});
 
@@ -40,15 +46,18 @@ export function useSharedHandlers<
     };
     updateSharedHandlers();
   }, []);
-  const broadcast = (type: keyof T, event: NativeEvent) => {
+  const broadcast = <K extends keyof T>(
+    type: K,
+    event: Parameters<T[K]>[0]
+  ) => {
     'worklet';
 
-    Object.keys(handlers.value).forEach((key) =>
-      handlers.value[key]?.[type]?.(event)
-    );
+    Object.keys(handlers.value).forEach((key) => {
+      handlers.value[key]?.[type]?.(event);
+    });
   };
 
-  return { setHandlers, broadcast };
+  return [setHandlers, broadcast];
 }
 
 /**

package/src/reanimated.native.ts

@@ -2,8 +2,10 @@ import { useEvent, useHandler } from 'react-native-reanimated';
 
 import type {
   EventWithName,
-  FocusedInputHandlerHook,
   FocusedInputLayoutChangedEvent,
+  FocusedInputLayoutHandlerHook,
+  FocusedInputTextChangedEvent,
+  FocusedInputTextHandlerHook,
   KeyboardHandlerHook,
   NativeEvent,
 } from './types';
@@ -56,7 +58,7 @@ export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
   );
 };
 
-export const useFocusedInputHandler: FocusedInputHandlerHook<
+export const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<
   Record<string, unknown>,
   EventWithName<FocusedInputLayoutChangedEvent>
 > = (handlers, dependencies) => {
@@ -78,3 +80,26 @@ export const useFocusedInputHandler: FocusedInputHandlerHook<
     doDependenciesDiffer
   );
 };
+
+export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
+  Record<string, unknown>,
+  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
+  );
+};

package/src/reanimated.ts

@@ -1,7 +1,9 @@
 import type {
   EventWithName,
-  FocusedInputHandlerHook,
   FocusedInputLayoutChangedEvent,
+  FocusedInputLayoutHandlerHook,
+  FocusedInputTextChangedEvent,
+  FocusedInputTextHandlerHook,
   KeyboardHandlerHook,
   NativeEvent,
 } from './types';
@@ -11,7 +13,11 @@ export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
   Record<string, unknown>,
   EventWithName<NativeEvent>
 > = NOOP;
-export const useFocusedInputHandler: FocusedInputHandlerHook<
+export const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<
   Record<string, unknown>,
   EventWithName<FocusedInputLayoutChangedEvent>
 > = NOOP;
+export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
+  Record<string, unknown>,
+  EventWithName<FocusedInputTextChangedEvent>
+> = NOOP;

package/src/replicas.ts

@@ -1,11 +1,10 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Keyboard, Platform } from 'react-native';
 import {
   runOnUI,
   useAnimatedReaction,
   useDerivedValue,
   useSharedValue,
-  useWorkletCallback,
   withSpring,
 } from 'react-native-reanimated';
 
@@ -111,7 +110,9 @@ export const useReanimatedKeyboardAnimationReplica = () => {
 
   const progress = useDerivedValue(() => height.value / heightEvent.value);
 
-  const handler = useWorkletCallback((_height: number) => {
+  const handler = useCallback((_height: number) => {
+    'worklet';
+
     heightEvent.value = _height;
   }, []);
 

package/src/specs/KeyboardControllerViewNativeComponent.ts

@@ -27,17 +27,24 @@ type FocusedInputLayoutChangedEvent = Readonly<{
   };
 }>;
 
+type FocusedInputTextChangedEvent = Readonly<{
+  text: string;
+}>;
+
 export interface NativeProps extends ViewProps {
   // props
   enabled?: boolean;
   statusBarTranslucent?: boolean;
   navigationBarTranslucent?: boolean;
   // callbacks
+  /// keyboard
   onKeyboardMoveStart?: DirectEventHandler<KeyboardMoveEvent>;
   onKeyboardMove?: DirectEventHandler<KeyboardMoveEvent>;
   onKeyboardMoveEnd?: DirectEventHandler<KeyboardMoveEvent>;
   onKeyboardMoveInteractive?: DirectEventHandler<KeyboardMoveEvent>;
+  /// focused input
   onFocusedInputLayoutChanged?: DirectEventHandler<FocusedInputLayoutChangedEvent>;
+  onFocusedInputTextChanged?: DirectEventHandler<FocusedInputTextChangedEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/specs/NativeKeyboardController.ts

@@ -8,6 +8,7 @@ export interface Spec extends TurboModule {
   // methods
   setInputMode(mode: number): void;
   setDefaultMode(): void;
+  dismiss(): void;
 
   // event emitter
   addListener: (eventName: string) => void;

package/src/types.ts

@@ -22,13 +22,16 @@ export type FocusedInputLayoutChangedEvent = {
     absoluteY: number;
   };
 };
+export type FocusedInputTextChangedEvent = {
+  text: string;
+};
 export type EventWithName<T> = {
   eventName: string;
 } & T;
 
 // native View/Module declarations
 export type KeyboardControllerProps = {
-  enabled?: boolean;
+  // callback props
   onKeyboardMoveStart?: (
     e: NativeSyntheticEvent<EventWithName<NativeEvent>>
   ) => void;
@@ -44,6 +47,9 @@ export type KeyboardControllerProps = {
   onFocusedInputLayoutChanged?: (
     e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>
   ) => void;
+  onFocusedInputTextChanged?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>
+  ) => void;
   // fake props used to activate reanimated bindings
   onKeyboardMoveReanimated?: (
     e: NativeSyntheticEvent<EventWithName<NativeEvent>>
@@ -51,8 +57,13 @@ export type KeyboardControllerProps = {
   onFocusedInputLayoutChangedReanimated?: (
     e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>
   ) => void;
+  onFocusedInputTextChangedReanimated?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>
+  ) => void;
+  // props
   statusBarTranslucent?: boolean;
   navigationBarTranslucent?: boolean;
+  enabled?: boolean;
 } & ViewProps;
 
 export type KeyboardGestureAreaProps = {
@@ -74,6 +85,8 @@ export type KeyboardControllerModule = {
   // android only
   setDefaultMode: () => void;
   setInputMode: (mode: number) => void;
+  // all platforms
+  dismiss: () => void;
   // native event module stuff
   addListener: (eventName: string) => void;
   removeListeners: (count: number) => void;
@@ -108,7 +121,7 @@ export type KeyboardHandlerHook<TContext, Event> = (
   },
   dependencies?: unknown[]
 ) => (e: NativeSyntheticEvent<Event>) => void;
-export type FocusedInputHandlerHook<TContext, Event> = (
+export type FocusedInputLayoutHandlerHook<TContext, Event> = (
   handlers: {
     onFocusedInputLayoutChanged?: (
       e: FocusedInputLayoutChangedEvent,
@@ -117,6 +130,15 @@ export type FocusedInputHandlerHook<TContext, Event> = (
   },
   dependencies?: unknown[]
 ) => (e: NativeSyntheticEvent<Event>) => void;
+export type FocusedInputTextHandlerHook<TContext, Event> = (
+  handlers: {
+    onFocusedInputTextChanged?: (
+      e: FocusedInputTextChangedEvent,
+      context: TContext
+    ) => void;
+  },
+  dependencies?: unknown[]
+) => (e: NativeSyntheticEvent<Event>) => void;
 
 // package types
 export type Handlers<T> = Record<string, T | undefined>;
@@ -127,3 +149,7 @@ export type KeyboardHandler = Partial<{
   onInteractive: (e: NativeEvent) => void;
 }>;
 export type KeyboardHandlers = Handlers<KeyboardHandler>;
+export type FocusedInputHandler = Partial<{
+  onChangeText: (e: FocusedInputTextChangedEvent) => void;
+}>;
+export type FocusedInputHandlers = Handlers<FocusedInputHandler>;