react-native-keyboard-controller 1.8.0 → 1.9.0

package/src/animated.tsx

@@ -1,18 +1,24 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
+import { Animated, Platform, StyleSheet } from 'react-native';
 import Reanimated, { useSharedValue } from 'react-native-reanimated';
 
-import { KeyboardAnimationContext, KeyboardContext } from './context';
-import { useSharedHandlers, useAnimatedValue } from './internal';
 import { KeyboardControllerView } from './bindings';
-import { useAnimatedKeyboardHandler } from './reanimated';
+import { KeyboardContext } from './context';
+import { useAnimatedValue, useSharedHandlers } from './internal';
+import { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';
+import {
+  useAnimatedKeyboardHandler,
+  useFocusedInputHandler,
+} from './reanimated';
 
+import type { KeyboardAnimationContext } from './context';
 import type {
+  FocusedInputLayoutChangedEvent,
   KeyboardControllerProps,
   KeyboardHandler,
   NativeEvent,
 } from './types';
-import { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';
+import type { ViewStyle } from 'react-native';
 
 const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
   Animated.createAnimatedComponent(
@@ -77,6 +83,7 @@ export const KeyboardProvider = ({
   // shared values
   const progressSV = useSharedValue(0);
   const heightSV = useSharedValue(0);
+  const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
   const { setHandlers, broadcast } = useSharedHandlers<KeyboardHandler>();
   // memo
   const context = useMemo<KeyboardAnimationContext>(
@@ -84,6 +91,7 @@ export const KeyboardProvider = ({
       enabled,
       animated: { progress: progress, height: Animated.multiply(height, -1) },
       reanimated: { progress: progressSV, height: heightSV },
+      layout,
       setHandlers,
       setEnabled,
     }),
@@ -120,7 +128,7 @@ export const KeyboardProvider = ({
       heightSV.value = -event.height;
     }
   };
-  const handler = useAnimatedKeyboardHandler(
+  const keyboardHandler = useAnimatedKeyboardHandler(
     {
       onKeyboardMoveStart: (event: NativeEvent) => {
         'worklet';
@@ -148,6 +156,20 @@ export const KeyboardProvider = ({
     },
     []
   );
+  const inputHandler = useFocusedInputHandler(
+    {
+      onFocusedInputLayoutChanged: (e) => {
+        'worklet';
+
+        if (e.target !== -1) {
+          layout.value = e;
+        } else {
+          layout.value = null;
+        }
+      },
+    },
+    []
+  );
   // effects
   useEffect(() => {
     if (enabled) {
@@ -161,10 +183,11 @@ export const KeyboardProvider = ({
     <KeyboardContext.Provider value={context}>
       <KeyboardControllerViewAnimated
         enabled={enabled}
-        onKeyboardMoveReanimated={handler}
+        onKeyboardMoveReanimated={keyboardHandler}
         onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}
         onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}
         onKeyboardMoveInteractive={onKeyboardMove}
+        onFocusedInputLayoutChangedReanimated={inputHandler}
         navigationBarTranslucent={navigationBarTranslucent}
         statusBarTranslucent={statusBarTranslucent}
         // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923

package/src/bindings.native.ts

@@ -1,4 +1,4 @@
-import { Platform, NativeEventEmitter } from 'react-native';
+import { NativeEventEmitter, Platform } from 'react-native';
 
 import type {
   KeyboardControllerModule,

package/src/bindings.ts

@@ -1,10 +1,12 @@
-import { EmitterSubscription, View } from 'react-native';
+import { View } from 'react-native';
+
 import type {
   KeyboardControllerModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
   KeyboardGestureAreaProps,
 } from './types';
+import type { EmitterSubscription } from 'react-native';
 
 const NOOP = () => {};
 export const KeyboardController: KeyboardControllerModule = {

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -1,4 +1,5 @@
 import { useSharedValue } from 'react-native-reanimated';
+
 import { useKeyboardHandler } from '../../hooks';
 
 export const useKeyboardAnimation = () => {

package/src/components/KeyboardAvoidingView/index.tsx

@@ -1,20 +1,18 @@
 import React, { forwardRef, useCallback, useMemo } from 'react';
-import {
-  LayoutRectangle,
-  useWindowDimensions,
-  View,
-  ViewProps,
-} from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 import Reanimated, {
-  useAnimatedStyle,
-  useWorkletCallback,
-  useSharedValue,
-  useDerivedValue,
   interpolate,
   runOnUI,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  useWorkletCallback,
 } from 'react-native-reanimated';
+
 import { useKeyboardAnimation } from './hooks';
 
+import type { LayoutRectangle, ViewProps } from 'react-native';
+
 type Props = {
   /**
    * Specify how to react to the presence of the keyboard.

package/src/components/KeyboardStickyView/index.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef, useMemo } from 'react';
+import Reanimated, {
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+import { useReanimatedKeyboardAnimation } from '../../hooks';
+
+import type { View, ViewProps } from 'react-native';
+
+type KeyboardStickyViewProps = {
+  /**
+   * Specify additional offset to the view for given keyboard state.
+   */
+  offset?: {
+    /**
+     * Adds additional `translateY` when keyboard is close. By default `0`.
+     */
+    closed?: number;
+    /**
+     * Adds additional `translateY` when keyboard is open. By default `0`.
+     */
+    opened?: number;
+  };
+} & ViewProps;
+
+const KeyboardStickyView = forwardRef<
+  View,
+  React.PropsWithChildren<KeyboardStickyViewProps>
+>(
+  (
+    { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },
+    ref
+  ) => {
+    const { height, progress } = useReanimatedKeyboardAnimation();
+
+    const stickyViewStyle = useAnimatedStyle(() => {
+      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
+
+      return {
+        transform: [{ translateY: height.value + offset }],
+      };
+    }, [closed, opened]);
+
+    const styles = useMemo(
+      () => [style, stickyViewStyle],
+      [style, stickyViewStyle]
+    );
+
+    return (
+      <Reanimated.View
+        // @ts-expect-error because `ref` from reanimated is not compatible with react-native
+        ref={ref}
+        style={styles}
+        {...props}
+      >
+        {children}
+      </Reanimated.View>
+    );
+  }
+);
+
+export default KeyboardStickyView;

package/src/components/index.ts

@@ -1 +1,2 @@
 export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';
+export { default as KeyboardStickyView } from './KeyboardStickyView';

package/src/constants.ts

@@ -12,6 +12,8 @@ export enum AndroidSoftInputModes {
   SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,
   SOFT_INPUT_STATE_HIDDEN = 2,
   SOFT_INPUT_STATE_UNCHANGED = 1,
+  // temporarily disable this rule to avoid breaking changes.
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
   SOFT_INPUT_STATE_UNSPECIFIED = 0,
   SOFT_INPUT_STATE_VISIBLE = 4,
 }

package/src/context.ts

@@ -1,8 +1,9 @@
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react';
 import { Animated } from 'react-native';
 
+import type { FocusedInputLayoutChangedEvent, KeyboardHandlers } from './types';
+import type React from 'react';
 import type { SharedValue } from 'react-native-reanimated';
-import type { KeyboardHandlers } from './types';
 
 export type AnimatedContext = {
   progress: Animated.Value;
@@ -16,16 +17,21 @@ export type KeyboardAnimationContext = {
   enabled: boolean;
   animated: AnimatedContext;
   reanimated: ReanimatedContext;
+  layout: SharedValue<FocusedInputLayoutChangedEvent | null>;
   setHandlers: (handlers: KeyboardHandlers) => void;
   setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
 };
 const NOOP = () => {};
-const DEFAULT_SHARED_VALUE: SharedValue<number> = {
-  value: 0,
+const withSharedValue = <T>(value: T): SharedValue<T> => ({
+  value,
   addListener: NOOP,
   removeListener: NOOP,
   modify: NOOP,
-};
+});
+const DEFAULT_SHARED_VALUE = withSharedValue(0);
+const DEFAULT_LAYOUT = withSharedValue<FocusedInputLayoutChangedEvent | null>(
+  null
+);
 const defaultContext: KeyboardAnimationContext = {
   enabled: true,
   animated: {
@@ -36,6 +42,7 @@ const defaultContext: KeyboardAnimationContext = {
     progress: DEFAULT_SHARED_VALUE,
     height: DEFAULT_SHARED_VALUE,
   },
+  layout: DEFAULT_LAYOUT,
   setHandlers: NOOP,
   setEnabled: NOOP,
 };

package/src/hooks.ts

@@ -1,15 +1,13 @@
-import { DependencyList, useEffect } from 'react';
+import { useEffect } from 'react';
 
-import {
-  AnimatedContext,
-  ReanimatedContext,
-  useKeyboardContext,
-} from './context';
 import { KeyboardController } from './bindings';
 import { AndroidSoftInputModes } from './constants';
+import { useKeyboardContext } from './context';
 import { uuid } from './utils';
 
+import type { AnimatedContext, ReanimatedContext } from './context';
 import type { KeyboardHandler } from './types';
+import type { DependencyList } from 'react';
 
 export const useResizeMode = () => {
   useEffect(() => {
@@ -65,3 +63,9 @@ export function useKeyboardController() {
 
   return { setEnabled: context.setEnabled, enabled: context.enabled };
 }
+
+export function useReanimatedFocusedInput() {
+  const context = useKeyboardContext();
+
+  return { input: context.layout };
+}

package/src/index.ts

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

package/src/internal.ts

@@ -15,7 +15,9 @@ import type { Handlers, NativeEvent } from './types';
  *  onEvent2: () => {},
  * }
  */
-export function useSharedHandlers<T extends Record<string, Function>>() {
+export function useSharedHandlers<
+  T extends Record<string, (event: NativeEvent) => void>
+>() {
   const handlers = useSharedValue<Handlers<T>>({});
   const jsHandlers = useRef<Handlers<T>>({});
 

package/src/reanimated.native.ts

@@ -1,6 +1,12 @@
 import { useEvent, useHandler } from 'react-native-reanimated';
 
-import type { EventWithName, KeyboardHandlerHook, NativeEvent } from './types';
+import type {
+  EventWithName,
+  FocusedInputHandlerHook,
+  FocusedInputLayoutChangedEvent,
+  KeyboardHandlerHook,
+  NativeEvent,
+} from './types';
 
 export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
   Record<string, unknown>,
@@ -49,3 +55,26 @@ export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
     doDependenciesDiffer
   );
 };
+
+export const useFocusedInputHandler: FocusedInputHandlerHook<
+  Record<string, unknown>,
+  EventWithName<FocusedInputLayoutChangedEvent>
+> = (handlers, dependencies) => {
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
+
+  return useEvent(
+    (event) => {
+      'worklet';
+      const { onFocusedInputLayoutChanged } = handlers;
+
+      if (
+        onFocusedInputLayoutChanged &&
+        event.eventName.endsWith('onFocusedInputLayoutChanged')
+      ) {
+        onFocusedInputLayoutChanged(event, context);
+      }
+    },
+    ['onFocusedInputLayoutChanged'],
+    doDependenciesDiffer
+  );
+};

package/src/reanimated.ts

@@ -1,6 +1,17 @@
-import type { EventWithName, KeyboardHandlerHook, NativeEvent } from './types';
+import type {
+  EventWithName,
+  FocusedInputHandlerHook,
+  FocusedInputLayoutChangedEvent,
+  KeyboardHandlerHook,
+  NativeEvent,
+} from './types';
 
+const NOOP = () => () => {};
 export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
   Record<string, unknown>,
   EventWithName<NativeEvent>
-> = () => () => {};
+> = NOOP;
+export const useFocusedInputHandler: FocusedInputHandlerHook<
+  Record<string, unknown>,
+  EventWithName<FocusedInputLayoutChangedEvent>
+> = NOOP;

package/src/replicas.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Keyboard, Platform } from 'react-native';
 import {
   runOnUI,
@@ -8,10 +8,10 @@ import {
   useWorkletCallback,
   withSpring,
 } from 'react-native-reanimated';
-import { useReanimatedKeyboardAnimation } from './hooks';
 
 import { KeyboardController } from './bindings';
 import { AndroidSoftInputModes } from './constants';
+import { useReanimatedKeyboardAnimation } from './hooks';
 
 const availableOSEventType = Platform.OS === 'ios' ? 'Will' : 'Did';
 

package/src/specs/KeyboardControllerViewNativeComponent.ts

@@ -1,3 +1,5 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
 import type { HostComponent } from 'react-native';
 import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {
@@ -5,7 +7,6 @@ import type {
   Double,
   Int32,
 } from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 type KeyboardMoveEvent = Readonly<{
   height: Double;
@@ -14,6 +15,18 @@ type KeyboardMoveEvent = Readonly<{
   target: Int32;
 }>;
 
+type FocusedInputLayoutChangedEvent = Readonly<{
+  target: Int32;
+  layout: {
+    x: Double;
+    y: Double;
+    width: Double;
+    height: Double;
+    absoluteX: Double;
+    absoluteY: Double;
+  };
+}>;
+
 export interface NativeProps extends ViewProps {
   // props
   enabled?: boolean;
@@ -24,6 +37,7 @@ export interface NativeProps extends ViewProps {
   onKeyboardMove?: DirectEventHandler<KeyboardMoveEvent>;
   onKeyboardMoveEnd?: DirectEventHandler<KeyboardMoveEvent>;
   onKeyboardMoveInteractive?: DirectEventHandler<KeyboardMoveEvent>;
+  onFocusedInputLayoutChanged?: DirectEventHandler<FocusedInputLayoutChangedEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/specs/KeyboardGestureAreaNativeComponent.ts

@@ -1,7 +1,8 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
 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 codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 export interface NativeProps extends ViewProps {
   interpolator?: WithDefault<'linear' | 'ios', 'linear'>;

package/src/specs/NativeKeyboardController.ts

@@ -1,6 +1,7 @@
-import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
 
+import type { TurboModule } from 'react-native';
+
 export interface Spec extends TurboModule {
   readonly getConstants: () => {};
 

package/src/specs/NativeStatusBarManagerCompat.ts

@@ -1,6 +1,7 @@
-import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
 
+import type { TurboModule } from 'react-native';
+
 export interface Spec extends TurboModule {
   readonly getConstants: () => {};
 

package/src/types.ts

@@ -11,6 +11,17 @@ export type NativeEvent = {
   duration: number;
   target: number;
 };
+export type FocusedInputLayoutChangedEvent = {
+  target: number;
+  layout: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    absoluteX: number;
+    absoluteY: number;
+  };
+};
 export type EventWithName<T> = {
   eventName: string;
 } & T;
@@ -30,10 +41,16 @@ export type KeyboardControllerProps = {
   onKeyboardMoveInteractive?: (
     e: NativeSyntheticEvent<EventWithName<NativeEvent>>
   ) => void;
-  // fake prop used to activate reanimated bindings
+  onFocusedInputLayoutChanged?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>
+  ) => void;
+  // fake props used to activate reanimated bindings
   onKeyboardMoveReanimated?: (
     e: NativeSyntheticEvent<EventWithName<NativeEvent>>
   ) => void;
+  onFocusedInputLayoutChangedReanimated?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>
+  ) => void;
   statusBarTranslucent?: boolean;
   navigationBarTranslucent?: boolean;
 } & ViewProps;
@@ -91,6 +108,15 @@ export type KeyboardHandlerHook<TContext, Event> = (
   },
   dependencies?: unknown[]
 ) => (e: NativeSyntheticEvent<Event>) => void;
+export type FocusedInputHandlerHook<TContext, Event> = (
+  handlers: {
+    onFocusedInputLayoutChanged?: (
+      e: FocusedInputLayoutChangedEvent,
+      context: TContext
+    ) => void;
+  },
+  dependencies?: unknown[]
+) => (e: NativeSyntheticEvent<Event>) => void;
 
 // package types
 export type Handlers<T> = Record<string, T | undefined>;