react-native-keyboard-controller 1.10.0 → 1.10.1

package/src/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.ts

@@ -1,18 +1,18 @@
-import { Platform } from 'react-native';
+import { Platform } from "react-native";
 import {
   Easing,
   useAnimatedReaction,
   useSharedValue,
   withTiming,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
 
-import { useKeyboardHandler } from 'react-native-keyboard-controller';
+import { useKeyboardHandler } from "react-native-keyboard-controller";
 
 const IS_ANDROID_ELEVEN_OR_HIGHER =
-  Platform.OS === 'android' && Platform.Version >= 30;
+  Platform.OS === "android" && Platform.Version >= 30;
 // on these platforms keyboard transitions will be smooth
 const IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =
-  IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === 'ios';
+  IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === "ios";
 // on Android Telegram is not using androidx.core values and uses custom interpolation
 // duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39
 // and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40
@@ -22,7 +22,7 @@ const TELEGRAM_ANDROID_TIMING_CONFIG = {
     0.19919472913616398,
     0.010644531250000006,
     0.27920937042459737,
-    0.91025390625
+    0.91025390625,
   ),
 };
 
@@ -32,7 +32,7 @@ const TELEGRAM_ANDROID_TIMING_CONFIG = {
  */
 export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
   handler,
-  deps
+  deps,
 ) => {
   const target = useSharedValue(-1);
   const persistedHeight = useSharedValue(0);
@@ -64,13 +64,13 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
         handler.onEnd?.(evt);
       }
     },
-    [handler]
+    [handler],
   );
 
   useKeyboardHandler(
     {
       onStart: (e) => {
-        'worklet';
+        "worklet";
 
         // immediately dispatch onStart/onEnd events if onStart dispatched with the same height
         // and don't wait for animation 250ms
@@ -95,21 +95,21 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
         if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
           animatedKeyboardHeight.value = withTiming(
             e.height,
-            TELEGRAM_ANDROID_TIMING_CONFIG
+            TELEGRAM_ANDROID_TIMING_CONFIG,
           );
         }
 
         handler.onStart?.(e);
       },
       onMove: (e) => {
-        'worklet';
+        "worklet";
 
         if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
           handler.onMove?.(e);
         }
       },
       onEnd: (e) => {
-        'worklet';
+        "worklet";
 
         if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
           handler.onEnd?.(e);
@@ -118,6 +118,6 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
         persistedHeight.value = e.height;
       },
     },
-    deps
+    deps,
   );
 };

package/src/components/KeyboardAwareScrollView/utils.ts

@@ -1,15 +1,15 @@
 export const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(
   worklet: F,
-  wait = 0
+  wait = 0,
 ) => {
-  'worklet';
+  "worklet";
 
   const value = {
     time: 0,
   };
 
   return (...args: Parameters<F>): ReturnType<F> | void => {
-    'worklet';
+    "worklet";
 
     const t = Date.now();
     const now = t - value.time;

package/src/components/KeyboardStickyView/index.tsx

@@ -1,12 +1,10 @@
-import React, { forwardRef, useMemo } from 'react';
-import Reanimated, {
-  interpolate,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import React, { forwardRef, useMemo } from "react";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 
-import { useReanimatedKeyboardAnimation } from '../../hooks';
+import { useReanimatedKeyboardAnimation } from "../../hooks";
+import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
 
-import type { View, ViewProps } from 'react-native';
+import type { View, ViewProps } from "react-native";
 
 type KeyboardStickyViewProps = {
   /**
@@ -30,12 +28,13 @@ const KeyboardStickyView = forwardRef<
 >(
   (
     { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },
-    ref
+    ref,
   ) => {
-    const { height, progress } = useReanimatedKeyboardAnimation();
+    const { height } = useReanimatedKeyboardAnimation();
+    const { interpolate } = useKeyboardInterpolation();
 
     const stickyViewStyle = useAnimatedStyle(() => {
-      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
+      const offset = interpolate(-height.value, [closed, opened]);
 
       return {
         transform: [{ translateY: height.value + offset }],
@@ -44,7 +43,7 @@ const KeyboardStickyView = forwardRef<
 
     const styles = useMemo(
       () => [style, stickyViewStyle],
-      [style, stickyViewStyle]
+      [style, stickyViewStyle],
     );
 
     return (
@@ -52,7 +51,7 @@ const KeyboardStickyView = forwardRef<
         {children}
       </Reanimated.View>
     );
-  }
+  },
 );
 
 export default KeyboardStickyView;

package/src/components/hooks/useKeyboardInterpolation.ts

@@ -0,0 +1,96 @@
+import {
+  interpolate as interpolateREA,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { useKeyboardHandler } from "../../hooks";
+
+type KeyboardInterpolationOutput = [number, number];
+
+/**
+ * Hook that can be used for interpolation keyboard movement. The main concern is the thing
+ * when keyboard is opened and gets resized on Android. Let's say we are interpolating from
+ * closed to open [0, 200] and we want to interpolate it to [0, 230] (to achieve nice parallax effect).
+ * Then let's say keyboard changes its height to 220 (and we want to interpolate the value to 250, +30
+ * to keyboard height). If we interpolate based on `progress` value, then we will have a jump on first frame:
+ * the last interpolated position was 230, now we will interpolate to 250, but first frame will be calculated
+ * as 200 / 220 * 250 = 227 (and last interpolated position was 230) so we will have a jump.
+ *
+ * This hook handles it, and when keyboard changes its size it does an interpolation as:
+ * [200, 220] -> [230, 250], i. e. we preserve last interpolated value and use it as initial value for interpolation
+ * and because of that we will not have a jump and animation will start from the last frame and will be smooth.
+ *
+ * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/315
+ */
+const useKeyboardInterpolation = () => {
+  // keyboard heights
+  const nextKeyboardHeight = useSharedValue(0);
+  const prevKeyboardHeight = useSharedValue(0);
+  // save latest interpolated position
+  const lastInterpolation = useSharedValue(0);
+  // boolean flag indicating which output range should be used
+  const shouldUseInternalInterpolation = useSharedValue(false);
+
+  const interpolate = (
+    keyboardPosition: number,
+    output: KeyboardInterpolationOutput,
+  ) => {
+    "worklet";
+
+    lastInterpolation.value = interpolateREA(
+      keyboardPosition,
+      [prevKeyboardHeight.value, nextKeyboardHeight.value],
+      shouldUseInternalInterpolation.value
+        ? [lastInterpolation.value, output[1]]
+        : output,
+    );
+
+    return lastInterpolation.value;
+  };
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        "worklet";
+
+        const keyboardWillBeHidden = e.height === 0;
+
+        // keyboard will be hidden
+        if (keyboardWillBeHidden) {
+          shouldUseInternalInterpolation.value = false;
+          prevKeyboardHeight.value = 0;
+        }
+
+        // keyboard will change its size
+        if (
+          // keyboard is shown on screen
+          nextKeyboardHeight.value !== 0 &&
+          // it really changes size (handles iOS case when after interactive keyboard gets shown again)
+          nextKeyboardHeight.value !== e.height &&
+          // keyboard is not hiding
+          !keyboardWillBeHidden
+        ) {
+          prevKeyboardHeight.value = nextKeyboardHeight.value;
+          shouldUseInternalInterpolation.value = true;
+        }
+
+        // keyboard will show or change size
+        if (!keyboardWillBeHidden) {
+          nextKeyboardHeight.value = e.height;
+        }
+      },
+      onEnd: (e) => {
+        "worklet";
+
+        // handles case show -> resize -> hide -> show
+        // here we reset value to 0 when keyboard is hidden
+        nextKeyboardHeight.value = e.height;
+      },
+    },
+    [],
+  );
+
+  return { interpolate };
+};
+
+export default useKeyboardInterpolation;

package/src/components/index.ts

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

package/src/context.ts

@@ -1,13 +1,13 @@
-import { createContext, useContext } from 'react';
-import { Animated } from 'react-native';
+import { createContext, useContext } from "react";
+import { Animated } from "react-native";
 
 import type {
   FocusedInputHandlers,
   FocusedInputLayoutChangedEvent,
   KeyboardHandlers,
-} from './types';
-import type React from 'react';
-import type { SharedValue } from 'react-native-reanimated';
+} from "./types";
+import type React from "react";
+import type { SharedValue } from "react-native-reanimated";
 
 export type AnimatedContext = {
   progress: Animated.Value;
@@ -35,7 +35,7 @@ const withSharedValue = <T>(value: T): SharedValue<T> => ({
 });
 const DEFAULT_SHARED_VALUE = withSharedValue(0);
 const DEFAULT_LAYOUT = withSharedValue<FocusedInputLayoutChangedEvent | null>(
-  null
+  null,
 );
 const defaultContext: KeyboardAnimationContext = {
   enabled: true,
@@ -58,7 +58,7 @@ export const useKeyboardContext = () => {
 
   if (__DEV__ && context === defaultContext) {
     console.warn(
-      "Couldn't find real values for `KeyboardContext`. Please make sure you're inside of `KeyboardProvider` - otherwise functionality of `react-native-keyboard-controller` will not work."
+      "Couldn't find real values for `KeyboardContext`. Please make sure you're inside of `KeyboardProvider` - otherwise functionality of `react-native-keyboard-controller` will not work.",
     );
   }
 

package/src/hooks.ts

@@ -1,18 +1,18 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
-import { KeyboardController } from './bindings';
-import { AndroidSoftInputModes } from './constants';
-import { useKeyboardContext } from './context';
-import { uuid } from './utils';
+import { KeyboardController } from "./bindings";
+import { AndroidSoftInputModes } from "./constants";
+import { useKeyboardContext } from "./context";
+import { uuid } from "./utils";
 
-import type { AnimatedContext, ReanimatedContext } from './context';
-import type { FocusedInputHandler, KeyboardHandler } from './types';
-import type { DependencyList } from 'react';
+import type { AnimatedContext, ReanimatedContext } from "./context";
+import type { FocusedInputHandler, KeyboardHandler } from "./types";
+import type { DependencyList } from "react";
 
 export const useResizeMode = () => {
   useEffect(() => {
     KeyboardController.setInputMode(
-      AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE
+      AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE,
     );
 
     return () => KeyboardController.setDefaultMode();
@@ -35,7 +35,7 @@ export const useReanimatedKeyboardAnimation = (): ReanimatedContext => {
 
 export function useGenericKeyboardHandler(
   handler: KeyboardHandler,
-  deps?: DependencyList
+  deps?: DependencyList,
 ) {
   const context = useKeyboardContext();
 
@@ -52,7 +52,7 @@ export function useGenericKeyboardHandler(
 
 export function useKeyboardHandler(
   handler: KeyboardHandler,
-  deps?: DependencyList
+  deps?: DependencyList,
 ) {
   useResizeMode();
   useGenericKeyboardHandler(handler, deps);
@@ -72,7 +72,7 @@ export function useReanimatedFocusedInput() {
 
 export function useFocusedInputHandler(
   handler?: FocusedInputHandler,
-  deps?: DependencyList
+  deps?: DependencyList,
 ) {
   const context = useKeyboardContext();
 

package/src/index.ts

@@ -1,13 +1,13 @@
-export * from './bindings';
-export * from './animated';
-export * from './replicas';
-export * from './context';
-export * from './hooks';
-export * from './constants';
-export * from './types';
+export * from "./bindings";
+export * from "./animated";
+export * from "./replicas";
+export * from "./context";
+export * from "./hooks";
+export * from "./constants";
+export * from "./types";
 
 export {
   KeyboardAvoidingView,
   KeyboardStickyView,
   KeyboardAwareScrollView,
-} from './components';
+} from "./components";

package/src/internal.ts

@@ -1,13 +1,13 @@
-import { useCallback, useRef } from 'react';
-import { Animated } from 'react-native';
-import { useSharedValue } from 'react-native-reanimated';
+import { useCallback, useRef } from "react";
+import { Animated } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
 
-import type { Handlers } 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
+  <K extends keyof T>(type: K, event: Parameters<T[K]>[0]) => void,
 ];
 
 /**
@@ -22,7 +22,7 @@ type SharedHandlersReturnType<T extends UntypedHandler> = [
  * }
  */
 export function useSharedHandlers<
-  T extends UntypedHandler
+  T extends UntypedHandler,
 >(): SharedHandlersReturnType<T> {
   const handlers = useSharedValue<Handlers<T>>({});
   const jsHandlers = useRef<Handlers<T>>({});
@@ -48,9 +48,9 @@ export function useSharedHandlers<
   }, []);
   const broadcast = <K extends keyof T>(
     type: K,
-    event: Parameters<T[K]>[0]
+    event: Parameters<T[K]>[0],
   ) => {
-    'worklet';
+    "worklet";
 
     Object.keys(handlers.value).forEach((key) => {
       handlers.value[key]?.[type]?.(event);
@@ -71,7 +71,7 @@ export function useSharedHandlers<
  */
 export function useAnimatedValue(
   initialValue: number,
-  config?: Animated.AnimatedConfig
+  config?: Animated.AnimatedConfig,
 ): Animated.Value {
   const ref = useRef<Animated.Value | null>(null);
 

package/src/monkey-patch.android.ts

@@ -1,10 +1,10 @@
 // @ts-expect-error because there is no corresponding type definition
-import * as NativeAndroidManager from 'react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid';
+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;
+  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

package/src/reanimated.native.ts

@@ -1,4 +1,4 @@
-import { useEvent, useHandler } from 'react-native-reanimated';
+import { useEvent, useHandler } from "react-native-reanimated";
 
 import type {
   EventWithName,
@@ -8,7 +8,7 @@ import type {
   FocusedInputTextHandlerHook,
   KeyboardHandlerHook,
   NativeEvent,
-} from './types';
+} from "./types";
 
 export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
   Record<string, unknown>,
@@ -18,7 +18,7 @@ export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
 
   return useEvent(
     (event) => {
-      'worklet';
+      "worklet";
       const {
         onKeyboardMoveStart,
         onKeyboardMove,
@@ -28,33 +28,33 @@ export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
 
       if (
         onKeyboardMoveStart &&
-        event.eventName.endsWith('onKeyboardMoveStart')
+        event.eventName.endsWith("onKeyboardMoveStart")
       ) {
         onKeyboardMoveStart(event, context);
       }
 
-      if (onKeyboardMove && event.eventName.endsWith('onKeyboardMove')) {
+      if (onKeyboardMove && event.eventName.endsWith("onKeyboardMove")) {
         onKeyboardMove(event, context);
       }
 
-      if (onKeyboardMoveEnd && event.eventName.endsWith('onKeyboardMoveEnd')) {
+      if (onKeyboardMoveEnd && event.eventName.endsWith("onKeyboardMoveEnd")) {
         onKeyboardMoveEnd(event, context);
       }
 
       if (
         onKeyboardMoveInteractive &&
-        event.eventName.endsWith('onKeyboardMoveInteractive')
+        event.eventName.endsWith("onKeyboardMoveInteractive")
       ) {
         onKeyboardMoveInteractive(event, context);
       }
     },
     [
-      'onKeyboardMoveStart',
-      'onKeyboardMove',
-      'onKeyboardMoveEnd',
-      'onKeyboardMoveInteractive',
+      "onKeyboardMoveStart",
+      "onKeyboardMove",
+      "onKeyboardMoveEnd",
+      "onKeyboardMoveInteractive",
     ],
-    doDependenciesDiffer
+    doDependenciesDiffer,
   );
 };
 
@@ -66,18 +66,18 @@ export const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<
 
   return useEvent(
     (event) => {
-      'worklet';
+      "worklet";
       const { onFocusedInputLayoutChanged } = handlers;
 
       if (
         onFocusedInputLayoutChanged &&
-        event.eventName.endsWith('onFocusedInputLayoutChanged')
+        event.eventName.endsWith("onFocusedInputLayoutChanged")
       ) {
         onFocusedInputLayoutChanged(event, context);
       }
     },
-    ['onFocusedInputLayoutChanged'],
-    doDependenciesDiffer
+    ["onFocusedInputLayoutChanged"],
+    doDependenciesDiffer,
   );
 };
 
@@ -89,17 +89,17 @@ export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
 
   return useEvent(
     (event) => {
-      'worklet';
+      "worklet";
       const { onFocusedInputTextChanged } = handlers;
 
       if (
         onFocusedInputTextChanged &&
-        event.eventName.endsWith('onFocusedInputTextChanged')
+        event.eventName.endsWith("onFocusedInputTextChanged")
       ) {
         onFocusedInputTextChanged(event, context);
       }
     },
-    ['onFocusedInputTextChanged'],
-    doDependenciesDiffer
+    ["onFocusedInputTextChanged"],
+    doDependenciesDiffer,
   );
 };

package/src/reanimated.ts

@@ -6,7 +6,7 @@ import type {
   FocusedInputTextHandlerHook,
   KeyboardHandlerHook,
   NativeEvent,
-} from './types';
+} from "./types";
 
 const NOOP = () => () => {};
 export const useAnimatedKeyboardHandler: KeyboardHandlerHook<

package/src/replicas.ts

@@ -1,18 +1,18 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Animated, Easing, Keyboard, Platform } from 'react-native';
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Animated, Easing, Keyboard, Platform } from "react-native";
 import {
   runOnUI,
   useAnimatedReaction,
   useDerivedValue,
   useSharedValue,
   withSpring,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
 
-import { KeyboardController } from './bindings';
-import { AndroidSoftInputModes } from './constants';
-import { useReanimatedKeyboardAnimation } from './hooks';
+import { KeyboardController } from "./bindings";
+import { AndroidSoftInputModes } from "./constants";
+import { useReanimatedKeyboardAnimation } from "./hooks";
 
-const availableOSEventType = Platform.OS === 'ios' ? 'Will' : 'Did';
+const availableOSEventType = Platform.OS === "ios" ? "Will" : "Did";
 
 // cubic-bezier(.17,.67,.34,.94)
 export const defaultAndroidEasing = Easing.bezier(0.4, 0.0, 0.2, 1);
@@ -37,12 +37,12 @@ export const useKeyboardAnimationReplica = (): KeyboardAnimation => {
       height: height.current,
       progress: progress.current,
     }),
-    []
+    [],
   );
 
   useEffect(() => {
     KeyboardController.setInputMode(
-      AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE
+      AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE,
     );
 
     return () => KeyboardController.setDefaultMode();
@@ -59,7 +59,7 @@ export const useKeyboardAnimationReplica = (): KeyboardAnimation => {
         }).start();
 
         return () => listener.remove();
-      }
+      },
     );
   }, []);
   useEffect(() => {
@@ -74,7 +74,7 @@ export const useKeyboardAnimationReplica = (): KeyboardAnimation => {
         }).start();
 
         return () => listener.remove();
-      }
+      },
     );
   }, []);
 
@@ -111,7 +111,7 @@ export const useReanimatedKeyboardAnimationReplica = () => {
   const progress = useDerivedValue(() => height.value / heightEvent.value);
 
   const handler = useCallback((_height: number) => {
-    'worklet';
+    "worklet";
 
     heightEvent.value = _height;
   }, []);
@@ -128,14 +128,14 @@ export const useReanimatedKeyboardAnimationReplica = () => {
         height.value = withSpring(_keyboardHeight, IOS_SPRING_CONFIG);
       }
     },
-    []
+    [],
   );
 
   useEffect(() => {
-    const show = Keyboard.addListener('keyboardWillShow', (e) => {
+    const show = Keyboard.addListener("keyboardWillShow", (e) => {
       runOnUI(handler)(-e.endCoordinates.height);
     });
-    const hide = Keyboard.addListener('keyboardWillHide', () => {
+    const hide = Keyboard.addListener("keyboardWillHide", () => {
       runOnUI(handler)(0);
     });
 
@@ -149,6 +149,6 @@ export const useReanimatedKeyboardAnimationReplica = () => {
 };
 
 export const useGradualKeyboardAnimation =
-  Platform.OS === 'ios'
+  Platform.OS === "ios"
     ? useReanimatedKeyboardAnimationReplica
     : useReanimatedKeyboardAnimation;