react-native-keyboard-controller 1.7.0 → 1.9.0

package/src/animated.tsx

@@ -1,17 +1,24 @@
-import React, { useMemo } from 'react';
-import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Animated, Platform, StyleSheet } from 'react-native';
 import Reanimated, { useSharedValue } from 'react-native-reanimated';
 
-import { 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 type { ViewStyle } from 'react-native';
 
 const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
   Animated.createAnimatedComponent(
@@ -54,28 +61,41 @@ type KeyboardProviderProps = {
    * @platform android
    */
   navigationBarTranslucent?: boolean;
+  /**
+   * A boolean prop indicating whether the module is enabled. It indicate only initial state,
+   * i. e. if you try to change this prop after component mount it will not have any effect.
+   * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.
+   * Defaults to `true`.
+   */
+  enabled?: boolean;
 };
 
 export const KeyboardProvider = ({
   children,
   statusBarTranslucent,
   navigationBarTranslucent,
+  enabled: initiallyEnabled = true,
 }: KeyboardProviderProps) => {
+  const [enabled, setEnabled] = useState(initiallyEnabled);
   // animated values
   const progress = useAnimatedValue(0);
   const height = useAnimatedValue(0);
   // 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(
+  const context = useMemo<KeyboardAnimationContext>(
     () => ({
+      enabled,
       animated: { progress: progress, height: Animated.multiply(height, -1) },
       reanimated: { progress: progressSV, height: heightSV },
+      layout,
       setHandlers,
+      setEnabled,
     }),
-    []
+    [enabled]
   );
   const style = useMemo(
     () => [
@@ -108,7 +128,7 @@ export const KeyboardProvider = ({
       heightSV.value = -event.height;
     }
   };
-  const handler = useAnimatedKeyboardHandler(
+  const keyboardHandler = useAnimatedKeyboardHandler(
     {
       onKeyboardMoveStart: (event: NativeEvent) => {
         'worklet';
@@ -136,14 +156,38 @@ export const KeyboardProvider = ({
     },
     []
   );
+  const inputHandler = useFocusedInputHandler(
+    {
+      onFocusedInputLayoutChanged: (e) => {
+        'worklet';
+
+        if (e.target !== -1) {
+          layout.value = e;
+        } else {
+          layout.value = null;
+        }
+      },
+    },
+    []
+  );
+  // effects
+  useEffect(() => {
+    if (enabled) {
+      applyMonkeyPatch();
+    } else {
+      revertMonkeyPatch();
+    }
+  }, [enabled]);
 
   return (
     <KeyboardContext.Provider value={context}>
       <KeyboardControllerViewAnimated
-        onKeyboardMoveReanimated={handler}
+        enabled={enabled}
+        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,10 +1,12 @@
 import { useSharedValue } from 'react-native-reanimated';
+
 import { useKeyboardHandler } from '../../hooks';
 
 export const useKeyboardAnimation = () => {
   const heightWhenOpened = useSharedValue(0);
   const height = useSharedValue(0);
   const progress = useSharedValue(0);
+  const isClosed = useSharedValue(true);
 
   useKeyboardHandler(
     {
@@ -12,6 +14,7 @@ export const useKeyboardAnimation = () => {
         'worklet';
 
         if (e.height > 0) {
+          isClosed.value = false;
           heightWhenOpened.value = e.height;
         }
       },
@@ -21,9 +24,14 @@ export const useKeyboardAnimation = () => {
         progress.value = e.progress;
         height.value = e.height;
       },
+      onEnd: (e) => {
+        'worklet';
+
+        isClosed.value = e.height === 0;
+      },
     },
     []
   );
 
-  return { height, progress, heightWhenOpened };
+  return { height, progress, heightWhenOpened, isClosed };
 };

package/src/components/KeyboardAvoidingView/index.tsx

@@ -1,19 +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, {
+  interpolate,
+  runOnUI,
   useAnimatedStyle,
-  useWorkletCallback,
-  useSharedValue,
   useDerivedValue,
-  interpolate,
+  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.
@@ -76,11 +75,14 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
       return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
     }, [screenHeight, keyboardVerticalOffset]);
 
+    const onLayoutWorklet = useWorkletCallback((layout: LayoutRectangle) => {
+      if (keyboard.isClosed.value) {
+        initialFrame.value = layout;
+      }
+    });
     const onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(
       (e) => {
-        if (initialFrame.value === null) {
-          initialFrame.value = e.nativeEvent.layout;
-        }
+        runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
         onLayoutProps?.(e);
       },
       [onLayoutProps]
@@ -96,7 +98,7 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
 
       switch (behavior) {
         case 'height':
-          if (bottomHeight > 0) {
+          if (!keyboard.isClosed.value) {
             return {
               height: frame.value.height - bottomHeight,
               flex: 0,

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 { 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;
@@ -13,18 +14,26 @@ export type ReanimatedContext = {
   height: SharedValue<number>;
 };
 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: {
     progress: new Animated.Value(0),
     height: new Animated.Value(0),
@@ -33,7 +42,9 @@ const defaultContext: KeyboardAnimationContext = {
     progress: DEFAULT_SHARED_VALUE,
     height: DEFAULT_SHARED_VALUE,
   },
-  setHandlers: () => {},
+  layout: DEFAULT_LAYOUT,
+  setHandlers: NOOP,
+  setEnabled: NOOP,
 };
 export const KeyboardContext = createContext(defaultContext);
 export const useKeyboardContext = () => {

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(() => {
@@ -59,3 +57,15 @@ export function useKeyboardHandler(
   useResizeMode();
   useGenericKeyboardHandler(handler, deps);
 }
+
+export function useKeyboardController() {
+  const context = useKeyboardContext();
+
+  return { setEnabled: context.setEnabled, enabled: context.enabled };
+}
+
+export function useReanimatedFocusedInput() {
+  const context = useKeyboardContext();
+
+  return { input: context.layout };
+}

package/src/index.ts

@@ -1,5 +1,3 @@
-import './monkey-patch';
-
 export * from './bindings';
 export * from './animated';
 export * from './replicas';
@@ -8,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/monkey-patch.android.ts

@@ -1,33 +1,39 @@
 // @ts-expect-error because there is no corresponding type definition
 import * as NativeAndroidManager from 'react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid';
 
+const DefaultNativeAndroidManager = NativeAndroidManager.default;
 const getConstants = NativeAndroidManager.default.getConstants;
+const RCTStatusBarManagerCompat =
+  require('./specs/NativeStatusBarManagerCompat').default;
 
 // On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so
 // in order to use library on all available platforms we have to monkey patch
 // default RN implementation and use modern `WindowInsetsControllerCompat`.
-const RCTStatusBarManagerCompat =
-  require('./specs/NativeStatusBarManagerCompat').default;
-NativeAndroidManager.default = {
-  getConstants,
-  setColor(color: number, animated: boolean): void {
-    RCTStatusBarManagerCompat.setColor(color, animated);
-  },
+export const applyMonkeyPatch = () => {
+  NativeAndroidManager.default = {
+    getConstants,
+    setColor(color: number, animated: boolean): void {
+      RCTStatusBarManagerCompat.setColor(color, animated);
+    },
 
-  setTranslucent(translucent: boolean): void {
-    RCTStatusBarManagerCompat.setTranslucent(translucent);
-  },
+    setTranslucent(translucent: boolean): void {
+      RCTStatusBarManagerCompat.setTranslucent(translucent);
+    },
 
-  /**
-   *  - statusBarStyles can be:
-   *    - 'default'
-   *    - 'dark-content'
-   */
-  setStyle(statusBarStyle?: string): void {
-    RCTStatusBarManagerCompat.setStyle(statusBarStyle);
-  },
+    /**
+     *  - statusBarStyles can be:
+     *    - 'default'
+     *    - 'dark-content'
+     */
+    setStyle(statusBarStyle?: string): void {
+      RCTStatusBarManagerCompat.setStyle(statusBarStyle);
+    },
 
-  setHidden(hidden: boolean): void {
-    RCTStatusBarManagerCompat.setHidden(hidden);
-  },
+    setHidden(hidden: boolean): void {
+      RCTStatusBarManagerCompat.setHidden(hidden);
+    },
+  };
+};
+export const revertMonkeyPatch = () => {
+  NativeAndroidManager.default = DefaultNativeAndroidManager;
 };

package/src/monkey-patch.ts

@@ -1 +1,4 @@
 // stub for all platforms
+const NOOP = () => {};
+export const applyMonkeyPatch = NOOP;
+export const revertMonkeyPatch = NOOP;

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,8 +15,21 @@ 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;
   statusBarTranslucent?: boolean;
   navigationBarTranslucent?: boolean;
   // callbacks
@@ -23,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: () => {};