react-native-keyboard-controller 1.10.0 → 1.10.2

package/src/components/KeyboardAvoidingView/index.tsx

@@ -1,27 +1,28 @@
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { View, useWindowDimensions } from 'react-native';
+import React, { forwardRef, useCallback, useMemo } from "react";
+import { View, useWindowDimensions } from "react-native";
 import Reanimated, {
-  interpolate,
   runOnUI,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
 
-import { useKeyboardAnimation } from './hooks';
+import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
 
-import type { LayoutRectangle, ViewProps } from 'react-native';
+import { useKeyboardAnimation } from "./hooks";
+
+import type { LayoutRectangle, ViewProps } from "react-native";
 
 type Props = {
   /**
    * Specify how to react to the presence of the keyboard.
    */
-  behavior?: 'height' | 'position' | 'padding';
+  behavior?: "height" | "position" | "padding";
 
   /**
    * Style of the content container when `behavior` is 'position'.
    */
-  contentContainerStyle?: ViewProps['style'];
+  contentContainerStyle?: ViewProps["style"];
 
   /**
    * Controls whether this `KeyboardAvoidingView` instance should take effect.
@@ -59,7 +60,7 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
       onLayout: onLayoutProps,
       ...props
     },
-    ref
+    ref,
   ) => {
     const initialFrame = useSharedValue<LayoutRectangle | null>(null);
     const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
@@ -68,39 +69,39 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
     const { height: screenHeight } = useWindowDimensions();
 
     const relativeKeyboardHeight = useCallback(() => {
-      'worklet';
+      "worklet";
 
       const keyboardY =
         screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
 
       return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
     }, [screenHeight, keyboardVerticalOffset]);
+    const { interpolate } = useKeyboardInterpolation();
 
     const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
-      'worklet';
+      "worklet";
 
       if (keyboard.isClosed.value) {
         initialFrame.value = layout;
       }
     }, []);
-    const onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(
+    const onLayout = useCallback<NonNullable<ViewProps["onLayout"]>>(
       (e) => {
         runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
         onLayoutProps?.(e);
       },
-      [onLayoutProps]
+      [onLayoutProps],
     );
 
     const animatedStyle = useAnimatedStyle(() => {
-      const bottom = interpolate(
-        keyboard.progress.value,
-        [0, 1],
-        [0, relativeKeyboardHeight()]
-      );
+      const bottom = interpolate(keyboard.height.value, [
+        0,
+        relativeKeyboardHeight(),
+      ]);
       const bottomHeight = enabled ? bottom : 0;
 
       switch (behavior) {
-        case 'height':
+        case "height":
           if (!keyboard.isClosed.value) {
             return {
               height: frame.value.height - bottomHeight,
@@ -110,21 +111,21 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
 
           return {};
 
-        case 'position':
+        case "position":
           return { bottom: bottomHeight };
 
-        case 'padding':
+        case "padding":
           return { paddingBottom: bottomHeight };
 
         default:
           return {};
       }
     }, [behavior, enabled, relativeKeyboardHeight]);
-    const isPositionBehavior = behavior === 'position';
+    const isPositionBehavior = behavior === "position";
     const containerStyle = isPositionBehavior ? contentContainerStyle : style;
     const combinedStyles = useMemo(
       () => [containerStyle, animatedStyle],
-      [containerStyle, animatedStyle]
+      [containerStyle, animatedStyle],
     );
 
     if (isPositionBehavior) {
@@ -145,7 +146,7 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
         {children}
       </Reanimated.View>
     );
-  }
+  },
 );
 
 export default KeyboardAvoidingView;

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo } from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { useCallback, useMemo } from "react";
+import { useWindowDimensions } from "react-native";
 import Reanimated, {
   interpolate,
   scrollTo,
@@ -8,19 +8,19 @@ import Reanimated, {
   useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
 
 import {
   useFocusedInputHandler,
   useReanimatedFocusedInput,
-} from 'react-native-keyboard-controller';
+} from "react-native-keyboard-controller";
 
-import { useSmoothKeyboardHandler } from './useSmoothKeyboardHandler';
-import { debounce } from './utils';
+import { useSmoothKeyboardHandler } from "./useSmoothKeyboardHandler";
+import { debounce } from "./utils";
 
-import type { FC } from 'react';
-import type { ScrollViewProps } from 'react-native';
-import type { FocusedInputLayoutChangedEvent } from 'react-native-keyboard-controller';
+import type { FC } from "react";
+import type { ScrollViewProps } from "react-native";
+import type { FocusedInputLayoutChangedEvent } from "react-native-keyboard-controller";
 
 type KeyboardAwareScrollViewProps = {
   bottomOffset?: number;
@@ -72,6 +72,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
   const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
   const scrollPosition = useSharedValue(0);
   const position = useSharedValue(0);
+  const currentKeyboardFrameHeight = useSharedValue(0);
   const keyboardHeight = useSharedValue(0);
   const tag = useSharedValue(-1);
   const initialKeyboardSize = useSharedValue(0);
@@ -87,7 +88,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
         position.value = e.contentOffset.y;
       },
     },
-    []
+    [],
   );
 
   /**
@@ -95,7 +96,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
    */
   const maybeScroll = useCallback(
     (e: number, animated: boolean = false) => {
-      'worklet';
+      "worklet";
 
       const visibleRect = height - keyboardHeight.value;
       const absoluteY = layout.value?.layout.absoluteY || 0;
@@ -106,7 +107,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
         const interpolatedScrollTo = interpolate(
           e,
           [initialKeyboardSize.value, keyboardHeight.value],
-          [0, keyboardHeight.value - (height - point) + bottomOffset]
+          [0, keyboardHeight.value - (height - point) + bottomOffset],
         );
         const targetScrollY =
           Math.max(interpolatedScrollTo, 0) + scrollPosition.value;
@@ -123,17 +124,17 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
           scrollViewAnimatedRef,
           0,
           topOfScreen - positionOnScreen,
-          animated
+          animated,
         );
       }
 
       return 0;
     },
-    [bottomOffset]
+    [bottomOffset],
   );
 
   const onChangeText = useCallback(() => {
-    'worklet';
+    "worklet";
 
     // if typing a text caused layout shift, then we need to ignore this handler
     // because this event will be handled in `useAnimatedReaction` below
@@ -152,20 +153,20 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
   }, [maybeScroll]);
   const onChangeTextHandler = useMemo(
     () => debounce(onChangeText, 200),
-    [onChangeText]
+    [onChangeText],
   );
 
   useFocusedInputHandler(
     {
       onChangeText: onChangeTextHandler,
     },
-    [onChangeTextHandler]
+    [onChangeTextHandler],
   );
 
   useSmoothKeyboardHandler(
     {
       onStart: (e) => {
-        'worklet';
+        "worklet";
 
         const keyboardWillChangeSize =
           keyboardHeight.value !== e.height && e.height > 0;
@@ -209,18 +210,20 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
         }
       },
       onMove: (e) => {
-        'worklet';
+        "worklet";
+
+        currentKeyboardFrameHeight.value = e.height;
 
         maybeScroll(e.height);
       },
       onEnd: (e) => {
-        'worklet';
+        "worklet";
 
         keyboardHeight.value = e.height;
         scrollPosition.value = position.value;
       },
     },
-    [height, maybeScroll]
+    [height, maybeScroll],
   );
 
   useAnimatedReaction(
@@ -237,14 +240,14 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
         layout.value = prevLayout;
       }
     },
-    []
+    [],
   );
 
   const view = useAnimatedStyle(
     () => ({
-      paddingBottom: keyboardHeight.value,
+      paddingBottom: currentKeyboardFrameHeight.value,
     }),
-    []
+    [],
   );
 
   return (
@@ -254,7 +257,8 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
       onScroll={onScroll}
       scrollEventThrottle={16}
     >
-      <Reanimated.View style={view}>{children}</Reanimated.View>
+      {children}
+      <Reanimated.View style={view} />
     </Reanimated.ScrollView>
   );
 };

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,11 @@
-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 "react-native-keyboard-controller";
 
-import type { View, ViewProps } from 'react-native';
+import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
+
+import type { View, ViewProps } from "react-native";
 
 type KeyboardStickyViewProps = {
   /**
@@ -30,12 +29,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 +44,7 @@ const KeyboardStickyView = forwardRef<
 
     const styles = useMemo(
       () => [style, stickyViewStyle],
-      [style, stickyViewStyle]
+      [style, stickyViewStyle],
     );
 
     return (
@@ -52,7 +52,7 @@ const KeyboardStickyView = forwardRef<
         {children}
       </Reanimated.View>
     );
-  }
+  },
 );
 
 export default KeyboardStickyView;

package/src/components/hooks/useKeyboardInterpolation.ts

@@ -0,0 +1,108 @@
+import { Platform } from "react-native";
+import {
+  interpolate as interpolateREA,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { useKeyboardHandler } from "react-native-keyboard-controller";
+
+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";
+
+    // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when
+    // keyboard resized we will not have intermediate values and transition will be instant
+    // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
+    if (Platform.OS === "ios") {
+      return interpolateREA(
+        keyboardPosition,
+        [0, nextKeyboardHeight.value],
+        output,
+      );
+    }
+
+    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();