react-native-keyboard-controller 1.11.2 → 1.11.3

package/lib/module/monkey-patch.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["NativeAndroidManager","DefaultNativeAndroidManager","default","getConstants","RCTStatusBarManagerCompat","require","applyMonkeyPatch","setColor","color","animated","setTranslucent","translucent","setStyle","statusBarStyle","setHidden","hidden","revertMonkeyPatch"],"sources":["monkey-patch.android.ts"],"sourcesContent":["// @ts-expect-error because there is no corresponding type definition\nimport * as NativeAndroidManager from \"react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid\";\n\nconst DefaultNativeAndroidManager = NativeAndroidManager.default;\nconst getConstants = NativeAndroidManager.default.getConstants;\nconst RCTStatusBarManagerCompat =\n  require(\"./specs/NativeStatusBarManagerCompat\").default;\n\n// On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so\n// in order to use library on all available platforms we have to monkey patch\n// default RN implementation and use modern `WindowInsetsControllerCompat`.\nexport const applyMonkeyPatch = () => {\n  NativeAndroidManager.default = {\n    getConstants,\n    setColor(color: number, animated: boolean): void {\n      RCTStatusBarManagerCompat.setColor(color, animated);\n    },\n\n    setTranslucent(translucent: boolean): void {\n      RCTStatusBarManagerCompat.setTranslucent(translucent);\n    },\n\n    /**\n     *  - statusBarStyles can be:\n     *    - 'default'\n     *    - 'dark-content'\n     */\n    setStyle(statusBarStyle?: string): void {\n      RCTStatusBarManagerCompat.setStyle(statusBarStyle);\n    },\n\n    setHidden(hidden: boolean): void {\n      RCTStatusBarManagerCompat.setHidden(hidden);\n    },\n  };\n};\nexport const revertMonkeyPatch = () => {\n  NativeAndroidManager.default = DefaultNativeAndroidManager;\n};\n"],"mappings":"AAAA;AACA,OAAO,KAAKA,oBAAoB,MAAM,2EAA2E;AAEjH,MAAMC,2BAA2B,GAAGD,oBAAoB,CAACE,OAAO;AAChE,MAAMC,YAAY,GAAGH,oBAAoB,CAACE,OAAO,CAACC,YAAY;AAC9D,MAAMC,yBAAyB,GAC7BC,OAAO,CAAC,sCAAsC,CAAC,CAACH,OAAO;;AAEzD;AACA;AACA;AACA,OAAO,MAAMI,gBAAgB,GAAGA,CAAA,KAAM;EACpCN,oBAAoB,CAACE,OAAO,GAAG;IAC7BC,YAAY;IACZI,QAAQA,CAACC,KAAa,EAAEC,QAAiB,EAAQ;MAC/CL,yBAAyB,CAACG,QAAQ,CAACC,KAAK,EAAEC,QAAQ,CAAC;IACrD,CAAC;IAEDC,cAAcA,CAACC,WAAoB,EAAQ;MACzCP,yBAAyB,CAACM,cAAc,CAACC,WAAW,CAAC;IACvD,CAAC;IAED;AACJ;AACA;AACA;AACA;IACIC,QAAQA,CAACC,cAAuB,EAAQ;MACtCT,yBAAyB,CAACQ,QAAQ,CAACC,cAAc,CAAC;IACpD,CAAC;IAEDC,SAASA,CAACC,MAAe,EAAQ;MAC/BX,yBAAyB,CAACU,SAAS,CAACC,MAAM,CAAC;IAC7C;EACF,CAAC;AACH,CAAC;AACD,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACrChB,oBAAoB,CAACE,OAAO,GAAGD,2BAA2B;AAC5D,CAAC"}
+{"version":3,"names":["NativeAndroidManager","RCTStatusBarManagerCompat","require","default","OriginalNativeAndroidManager","ModifiedNativeAndroidManager","setColor","color","animated","setTranslucent","translucent","setStyle","statusBarStyle","setHidden","hidden","applyMonkeyPatch","Object","assign","revertMonkeyPatch"],"sources":["monkey-patch.android.ts"],"sourcesContent":["// @ts-expect-error because there is no corresponding type definition\nimport * as NativeAndroidManager from \"react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid\";\n\nconst RCTStatusBarManagerCompat =\n  // eslint-disable-next-line @typescript-eslint/no-var-requires\n  require(\"./specs/NativeStatusBarManagerCompat\").default;\n\n// Copy original default manager to keep its original state and methods\nconst OriginalNativeAndroidManager = { ...NativeAndroidManager.default };\n\n// Create a new object that modifies the necessary methods\n// On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so\n// in order to use library on all available platforms we have to monkey patch\n// default RN implementation and use modern `WindowInsetsControllerCompat`.\nconst ModifiedNativeAndroidManager = {\n  ...NativeAndroidManager.default, // Spread original properties to keep existing functionality\n  setColor: (color: number, animated: boolean): void => {\n    RCTStatusBarManagerCompat.setColor(color, animated);\n  },\n  setTranslucent: (translucent: boolean): void => {\n    RCTStatusBarManagerCompat.setTranslucent(translucent);\n  },\n  /**\n   *  - statusBarStyles can be:\n   *    - 'default'\n   *    - 'dark-content'\n   */\n  setStyle: (statusBarStyle?: string): void => {\n    RCTStatusBarManagerCompat.setStyle(statusBarStyle);\n  },\n  setHidden: (hidden: boolean): void => {\n    RCTStatusBarManagerCompat.setHidden(hidden);\n  },\n};\n\n// Define a function to apply the monkey patch\nexport const applyMonkeyPatch = () => {\n  Object.assign(NativeAndroidManager.default, ModifiedNativeAndroidManager);\n};\n\n// Define a function to revert changes back to the original state\nexport const revertMonkeyPatch = () => {\n  Object.assign(NativeAndroidManager.default, OriginalNativeAndroidManager);\n};\n"],"mappings":"AAAA;AACA,OAAO,KAAKA,oBAAoB,MAAM,2EAA2E;AAEjH,MAAMC,yBAAyB;AAC7B;AACAC,OAAO,CAAC,sCAAsC,CAAC,CAACC,OAAO;;AAEzD;AACA,MAAMC,4BAA4B,GAAG;EAAE,GAAGJ,oBAAoB,CAACG;AAAQ,CAAC;;AAExE;AACA;AACA;AACA;AACA,MAAME,4BAA4B,GAAG;EACnC,GAAGL,oBAAoB,CAACG,OAAO;EAAE;EACjCG,QAAQ,EAAEA,CAACC,KAAa,EAAEC,QAAiB,KAAW;IACpDP,yBAAyB,CAACK,QAAQ,CAACC,KAAK,EAAEC,QAAQ,CAAC;EACrD,CAAC;EACDC,cAAc,EAAGC,WAAoB,IAAW;IAC9CT,yBAAyB,CAACQ,cAAc,CAACC,WAAW,CAAC;EACvD,CAAC;EACD;AACF;AACA;AACA;AACA;EACEC,QAAQ,EAAGC,cAAuB,IAAW;IAC3CX,yBAAyB,CAACU,QAAQ,CAACC,cAAc,CAAC;EACpD,CAAC;EACDC,SAAS,EAAGC,MAAe,IAAW;IACpCb,yBAAyB,CAACY,SAAS,CAACC,MAAM,CAAC;EAC7C;AACF,CAAC;;AAED;AACA,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EACpCC,MAAM,CAACC,MAAM,CAACjB,oBAAoB,CAACG,OAAO,EAAEE,4BAA4B,CAAC;AAC3E,CAAC;;AAED;AACA,OAAO,MAAMa,iBAAiB,GAAGA,CAAA,KAAM;EACrCF,MAAM,CAACC,MAAM,CAACjB,oBAAoB,CAACG,OAAO,EAAEC,4BAA4B,CAAC;AAC3E,CAAC"}

package/lib/typescript/components/KeyboardToolbar/index.d.ts

@@ -15,6 +15,11 @@ export type KeyboardToolbarProps = {
     button?: typeof Button;
     /** Custom icon component used to display next/prev buttons. */
     icon?: typeof Arrow;
+    /**
+     * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input
+     * and want to show only `Done` button. Default to `true`.
+     */
+    showArrows?: boolean;
 };
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and

package/lib/typescript/components/index.d.ts

@@ -1,4 +1,5 @@
 export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
 export { default as KeyboardStickyView } from "./KeyboardStickyView";
 export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
-export { default as KeyboardToolbar, DefaultKeyboardToolbarTheme, KeyboardToolbarProps, } from "./KeyboardToolbar";
+export { default as KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./KeyboardToolbar";
+export type { KeyboardToolbarProps } from "./KeyboardToolbar";

package/lib/typescript/index.d.ts

@@ -4,4 +4,5 @@ export * from "./context";
 export * from "./hooks";
 export * from "./constants";
 export * from "./types";
-export { KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView, KeyboardToolbar, DefaultKeyboardToolbarTheme, KeyboardToolbarProps, } from "./components";
+export { KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView, KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./components";
+export type { KeyboardToolbarProps } from "./components";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/KeyboardAvoidingView/index.tsx

@@ -1,14 +1,13 @@
 import React, { forwardRef, useCallback, useMemo } from "react";
 import { View, useWindowDimensions } from "react-native";
 import Reanimated, {
+  interpolate,
   runOnUI,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
 } from "react-native-reanimated";
 
-import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
-
 import { useKeyboardAnimation } from "./hooks";
 
 import type { LayoutRectangle, ViewProps } from "react-native";
@@ -76,7 +75,6 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
 
       return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
     }, [screenHeight, keyboardVerticalOffset]);
-    const { interpolate } = useKeyboardInterpolation();
 
     const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
       "worklet";
@@ -94,10 +92,11 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
     );
 
     const animatedStyle = useAnimatedStyle(() => {
-      const bottom = interpolate(keyboard.height.value, [
-        0,
-        relativeKeyboardHeight(),
-      ]);
+      const bottom = interpolate(
+        keyboard.progress.value,
+        [0, 1],
+        [0, relativeKeyboardHeight()],
+      );
       const bottomHeight = enabled ? bottom : 0;
 
       switch (behavior) {

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useCallback, useMemo } from "react";
-import { useWindowDimensions } from "react-native";
+import { findNodeHandle, useWindowDimensions } from "react-native";
 import Reanimated, {
   interpolate,
   scrollTo,
@@ -121,8 +121,8 @@ const KeyboardAwareScrollView = forwardRef<
       scrollViewAnimatedRef(assignedRef);
     }, []);
     const onScrollViewLayout = useCallback(
-      (e: LayoutChangeEvent & { nativeEvent: { target: number } }) => {
-        scrollViewTarget.value = e.nativeEvent.target;
+      (e: LayoutChangeEvent) => {
+        scrollViewTarget.value = findNodeHandle(scrollViewAnimatedRef.current);
 
         onLayout?.(e);
       },
@@ -319,8 +319,8 @@ const KeyboardAwareScrollView = forwardRef<
       <Reanimated.ScrollView
         ref={onRef}
         {...rest}
-        // @ts-expect-error https://github.com/facebook/react-native/pull/42785
         onLayout={onScrollViewLayout}
+        // @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
         onScrollReanimated={onScroll}
         scrollEventThrottle={16}
       >

package/src/components/KeyboardStickyView/index.tsx

@@ -1,10 +1,11 @@
 import React, { forwardRef, useMemo } from "react";
-import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
+import Reanimated, {
+  interpolate,
+  useAnimatedStyle,
+} from "react-native-reanimated";
 
 import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
 
-import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
-
 import type { View, ViewProps } from "react-native";
 
 type KeyboardStickyViewProps = {
@@ -31,11 +32,10 @@ const KeyboardStickyView = forwardRef<
     { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },
     ref,
   ) => {
-    const { height } = useReanimatedKeyboardAnimation();
-    const { interpolate } = useKeyboardInterpolation();
+    const { height, progress } = useReanimatedKeyboardAnimation();
 
     const stickyViewStyle = useAnimatedStyle(() => {
-      const offset = interpolate(-height.value, [closed, opened]);
+      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
 
       return {
         transform: [{ translateY: height.value + offset }],

package/src/components/KeyboardToolbar/index.tsx

@@ -27,6 +27,11 @@ export type KeyboardToolbarProps = {
   button?: typeof Button;
   /** Custom icon component used to display next/prev buttons. */
   icon?: typeof Arrow;
+  /**
+   * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input
+   * and want to show only `Done` button. Default to `true`.
+   */
+  showArrows?: boolean;
 };
 const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
 const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
@@ -51,6 +56,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   doneText,
   button,
   icon,
+  showArrows = true,
 }) => {
   const colorScheme = useColorScheme();
   const [inputs, setInputs] = useState({
@@ -86,26 +92,38 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   return (
     <KeyboardStickyView offset={offset}>
       <View style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
-        <ButtonContainer
-          accessibilityLabel="Previous"
-          accessibilityHint="Will move focus to previous field"
-          disabled={isPrevDisabled}
-          onPress={goToPrevField}
-          testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
-          theme={theme}
-        >
-          <IconContainer disabled={isPrevDisabled} type="prev" theme={theme} />
-        </ButtonContainer>
-        <ButtonContainer
-          accessibilityLabel="Next"
-          accessibilityHint="Will move focus to next field"
-          disabled={isNextDisabled}
-          onPress={goToNextField}
-          testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
-          theme={theme}
-        >
-          <IconContainer disabled={isNextDisabled} type="next" theme={theme} />
-        </ButtonContainer>
+        {showArrows && (
+          <>
+            <ButtonContainer
+              accessibilityLabel="Previous"
+              accessibilityHint="Will move focus to previous field"
+              disabled={isPrevDisabled}
+              onPress={goToPrevField}
+              testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
+              theme={theme}
+            >
+              <IconContainer
+                disabled={isPrevDisabled}
+                type="prev"
+                theme={theme}
+              />
+            </ButtonContainer>
+            <ButtonContainer
+              accessibilityLabel="Next"
+              accessibilityHint="Will move focus to next field"
+              disabled={isNextDisabled}
+              onPress={goToNextField}
+              testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
+              theme={theme}
+            >
+              <IconContainer
+                disabled={isNextDisabled}
+                type="next"
+                theme={theme}
+              />
+            </ButtonContainer>
+          </>
+        )}
 
         <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
           {content}

package/src/components/index.ts

@@ -4,5 +4,5 @@ export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
 export {
   default as KeyboardToolbar,
   DefaultKeyboardToolbarTheme,
-  KeyboardToolbarProps,
 } from "./KeyboardToolbar";
+export type { KeyboardToolbarProps } from "./KeyboardToolbar";

package/src/index.ts

@@ -12,5 +12,5 @@ export {
   // keyboard toolbar
   KeyboardToolbar,
   DefaultKeyboardToolbarTheme,
-  KeyboardToolbarProps,
 } from "./components";
+export type { KeyboardToolbarProps } from "./components";

package/src/monkey-patch.android.ts

@@ -1,39 +1,44 @@
 // @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 =
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   require("./specs/NativeStatusBarManagerCompat").default;
 
+// Copy original default manager to keep its original state and methods
+const OriginalNativeAndroidManager = { ...NativeAndroidManager.default };
+
+// Create a new object that modifies the necessary methods
 // 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`.
-export const applyMonkeyPatch = () => {
-  NativeAndroidManager.default = {
-    getConstants,
-    setColor(color: number, animated: boolean): void {
-      RCTStatusBarManagerCompat.setColor(color, animated);
-    },
-
-    setTranslucent(translucent: boolean): void {
-      RCTStatusBarManagerCompat.setTranslucent(translucent);
-    },
-
-    /**
-     *  - statusBarStyles can be:
-     *    - 'default'
-     *    - 'dark-content'
-     */
-    setStyle(statusBarStyle?: string): void {
-      RCTStatusBarManagerCompat.setStyle(statusBarStyle);
-    },
+const ModifiedNativeAndroidManager = {
+  ...NativeAndroidManager.default, // Spread original properties to keep existing functionality
+  setColor: (color: number, animated: boolean): void => {
+    RCTStatusBarManagerCompat.setColor(color, animated);
+  },
+  setTranslucent: (translucent: boolean): void => {
+    RCTStatusBarManagerCompat.setTranslucent(translucent);
+  },
+  /**
+   *  - 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);
-    },
-  };
+// Define a function to apply the monkey patch
+export const applyMonkeyPatch = () => {
+  Object.assign(NativeAndroidManager.default, ModifiedNativeAndroidManager);
 };
+
+// Define a function to revert changes back to the original state
 export const revertMonkeyPatch = () => {
-  NativeAndroidManager.default = DefaultNativeAndroidManager;
+  Object.assign(NativeAndroidManager.default, OriginalNativeAndroidManager);
 };

package/lib/commonjs/components/hooks/useKeyboardInterpolation.js

@@ -1,89 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _reactNativeReanimated = require("react-native-reanimated");
-var _reactNativeKeyboardController = require("react-native-keyboard-controller");
-/**
- * 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 = (0, _reactNativeReanimated.useSharedValue)(0);
-  const prevKeyboardHeight = (0, _reactNativeReanimated.useSharedValue)(0);
-  // save latest interpolated position
-  const lastInterpolation = (0, _reactNativeReanimated.useSharedValue)(0);
-  // boolean flag indicating which output range should be used
-  const shouldUseInternalInterpolation = (0, _reactNativeReanimated.useSharedValue)(false);
-  const interpolate = (keyboardPosition, output) => {
-    "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 (_reactNative.Platform.OS === "ios") {
-      return (0, _reactNativeReanimated.interpolate)(keyboardPosition, [0, nextKeyboardHeight.value], output);
-    }
-    const interpolation = (0, _reactNativeReanimated.interpolate)(keyboardPosition, [prevKeyboardHeight.value, nextKeyboardHeight.value], shouldUseInternalInterpolation.value ? [lastInterpolation.value, output[1]] : output);
-    lastInterpolation.value = interpolation;
-    return interpolation;
-  };
-  (0, _reactNativeKeyboardController.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
-  };
-};
-var _default = useKeyboardInterpolation;
-exports.default = _default;
-//# sourceMappingURL=useKeyboardInterpolation.js.map

package/lib/commonjs/components/hooks/useKeyboardInterpolation.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_reactNativeReanimated","_reactNativeKeyboardController","useKeyboardInterpolation","nextKeyboardHeight","useSharedValue","prevKeyboardHeight","lastInterpolation","shouldUseInternalInterpolation","interpolate","keyboardPosition","output","Platform","OS","interpolateREA","value","interpolation","useKeyboardHandler","onStart","e","keyboardWillBeHidden","height","onEnd","_default","exports","default"],"sources":["useKeyboardInterpolation.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n  interpolate as interpolateREA,\n  useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\ntype KeyboardInterpolationOutput = [number, number];\n\n/**\n * Hook that can be used for interpolation keyboard movement. The main concern is the thing\n * when keyboard is opened and gets resized on Android. Let's say we are interpolating from\n * closed to open [0, 200] and we want to interpolate it to [0, 230] (to achieve nice parallax effect).\n * Then let's say keyboard changes its height to 220 (and we want to interpolate the value to 250, +30\n * to keyboard height). If we interpolate based on `progress` value, then we will have a jump on first frame:\n * the last interpolated position was 230, now we will interpolate to 250, but first frame will be calculated\n * as 200 / 220 * 250 = 227 (and last interpolated position was 230) so we will have a jump.\n *\n * This hook handles it, and when keyboard changes its size it does an interpolation as:\n * [200, 220] -> [230, 250], i. e. we preserve last interpolated value and use it as initial value for interpolation\n * and because of that we will not have a jump and animation will start from the last frame and will be smooth.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/315\n */\nconst useKeyboardInterpolation = () => {\n  // keyboard heights\n  const nextKeyboardHeight = useSharedValue(0);\n  const prevKeyboardHeight = useSharedValue(0);\n  // save latest interpolated position\n  const lastInterpolation = useSharedValue(0);\n  // boolean flag indicating which output range should be used\n  const shouldUseInternalInterpolation = useSharedValue(false);\n\n  const interpolate = (\n    keyboardPosition: number,\n    output: KeyboardInterpolationOutput,\n  ) => {\n    \"worklet\";\n\n    // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when\n    // keyboard resized we will not have intermediate values and transition will be instant\n    // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n    if (Platform.OS === \"ios\") {\n      return interpolateREA(\n        keyboardPosition,\n        [0, nextKeyboardHeight.value],\n        output,\n      );\n    }\n\n    const interpolation = interpolateREA(\n      keyboardPosition,\n      [prevKeyboardHeight.value, nextKeyboardHeight.value],\n      shouldUseInternalInterpolation.value\n        ? [lastInterpolation.value, output[1]]\n        : output,\n    );\n    lastInterpolation.value = interpolation;\n\n    return interpolation;\n  };\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        \"worklet\";\n\n        const keyboardWillBeHidden = e.height === 0;\n\n        // keyboard will be hidden\n        if (keyboardWillBeHidden) {\n          shouldUseInternalInterpolation.value = false;\n          prevKeyboardHeight.value = 0;\n        }\n\n        // keyboard will change its size\n        if (\n          // keyboard is shown on screen\n          nextKeyboardHeight.value !== 0 &&\n          // it really changes size (handles iOS case when after interactive keyboard gets shown again)\n          nextKeyboardHeight.value !== e.height &&\n          // keyboard is not hiding\n          !keyboardWillBeHidden\n        ) {\n          prevKeyboardHeight.value = nextKeyboardHeight.value;\n          shouldUseInternalInterpolation.value = true;\n        }\n\n        // keyboard will show or change size\n        if (!keyboardWillBeHidden) {\n          nextKeyboardHeight.value = e.height;\n        }\n      },\n      onEnd: (e) => {\n        \"worklet\";\n\n        // handles case show -> resize -> hide -> show\n        // here we reset value to 0 when keyboard is hidden\n        nextKeyboardHeight.value = e.height;\n      },\n    },\n    [],\n  );\n\n  return { interpolate };\n};\n\nexport default useKeyboardInterpolation;\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AAKA,IAAAE,8BAAA,GAAAF,OAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,wBAAwB,GAAGA,CAAA,KAAM;EACrC;EACA,MAAMC,kBAAkB,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EAC5C,MAAMC,kBAAkB,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;EAC5C;EACA,MAAME,iBAAiB,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;EAC3C;EACA,MAAMG,8BAA8B,GAAG,IAAAH,qCAAc,EAAC,KAAK,CAAC;EAE5D,MAAMI,WAAW,GAAGA,CAClBC,gBAAwB,EACxBC,MAAmC,KAChC;IACH,SAAS;;IAET;IACA;IACA;IACA,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;MACzB,OAAO,IAAAC,kCAAc,EACnBJ,gBAAgB,EAChB,CAAC,CAAC,EAAEN,kBAAkB,CAACW,KAAK,CAAC,EAC7BJ,MACF,CAAC;IACH;IAEA,MAAMK,aAAa,GAAG,IAAAF,kCAAc,EAClCJ,gBAAgB,EAChB,CAACJ,kBAAkB,CAACS,KAAK,EAAEX,kBAAkB,CAACW,KAAK,CAAC,EACpDP,8BAA8B,CAACO,KAAK,GAChC,CAACR,iBAAiB,CAACQ,KAAK,EAAEJ,MAAM,CAAC,CAAC,CAAC,CAAC,GACpCA,MACN,CAAC;IACDJ,iBAAiB,CAACQ,KAAK,GAAGC,aAAa;IAEvC,OAAOA,aAAa;EACtB,CAAC;EAED,IAAAC,iDAAkB,EAChB;IACEC,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,MAAMC,oBAAoB,GAAGD,CAAC,CAACE,MAAM,KAAK,CAAC;;MAE3C;MACA,IAAID,oBAAoB,EAAE;QACxBZ,8BAA8B,CAACO,KAAK,GAAG,KAAK;QAC5CT,kBAAkB,CAACS,KAAK,GAAG,CAAC;MAC9B;;MAEA;MACA;MACE;MACAX,kBAAkB,CAACW,KAAK,KAAK,CAAC;MAC9B;MACAX,kBAAkB,CAACW,KAAK,KAAKI,CAAC,CAACE,MAAM;MACrC;MACA,CAACD,oBAAoB,EACrB;QACAd,kBAAkB,CAACS,KAAK,GAAGX,kBAAkB,CAACW,KAAK;QACnDP,8BAA8B,CAACO,KAAK,GAAG,IAAI;MAC7C;;MAEA;MACA,IAAI,CAACK,oBAAoB,EAAE;QACzBhB,kBAAkB,CAACW,KAAK,GAAGI,CAAC,CAACE,MAAM;MACrC;IACF,CAAC;IACDC,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAET;MACA;MACAf,kBAAkB,CAACW,KAAK,GAAGI,CAAC,CAACE,MAAM;IACrC;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEZ;EAAY,CAAC;AACxB,CAAC;AAAC,IAAAc,QAAA,GAEapB,wBAAwB;AAAAqB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/lib/module/components/hooks/useKeyboardInterpolation.js

@@ -1,82 +0,0 @@
-import { Platform } from "react-native";
-import { interpolate as interpolateREA, useSharedValue } from "react-native-reanimated";
-import { useKeyboardHandler } from "react-native-keyboard-controller";
-/**
- * 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, output) => {
-    "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);
-    }
-    const interpolation = interpolateREA(keyboardPosition, [prevKeyboardHeight.value, nextKeyboardHeight.value], shouldUseInternalInterpolation.value ? [lastInterpolation.value, output[1]] : output);
-    lastInterpolation.value = interpolation;
-    return interpolation;
-  };
-  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;
-//# sourceMappingURL=useKeyboardInterpolation.js.map

package/lib/module/components/hooks/useKeyboardInterpolation.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Platform","interpolate","interpolateREA","useSharedValue","useKeyboardHandler","useKeyboardInterpolation","nextKeyboardHeight","prevKeyboardHeight","lastInterpolation","shouldUseInternalInterpolation","keyboardPosition","output","OS","value","interpolation","onStart","e","keyboardWillBeHidden","height","onEnd"],"sources":["useKeyboardInterpolation.ts"],"sourcesContent":["import { Platform } from \"react-native\";\nimport {\n  interpolate as interpolateREA,\n  useSharedValue,\n} from \"react-native-reanimated\";\n\nimport { useKeyboardHandler } from \"react-native-keyboard-controller\";\n\ntype KeyboardInterpolationOutput = [number, number];\n\n/**\n * Hook that can be used for interpolation keyboard movement. The main concern is the thing\n * when keyboard is opened and gets resized on Android. Let's say we are interpolating from\n * closed to open [0, 200] and we want to interpolate it to [0, 230] (to achieve nice parallax effect).\n * Then let's say keyboard changes its height to 220 (and we want to interpolate the value to 250, +30\n * to keyboard height). If we interpolate based on `progress` value, then we will have a jump on first frame:\n * the last interpolated position was 230, now we will interpolate to 250, but first frame will be calculated\n * as 200 / 220 * 250 = 227 (and last interpolated position was 230) so we will have a jump.\n *\n * This hook handles it, and when keyboard changes its size it does an interpolation as:\n * [200, 220] -> [230, 250], i. e. we preserve last interpolated value and use it as initial value for interpolation\n * and because of that we will not have a jump and animation will start from the last frame and will be smooth.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/315\n */\nconst useKeyboardInterpolation = () => {\n  // keyboard heights\n  const nextKeyboardHeight = useSharedValue(0);\n  const prevKeyboardHeight = useSharedValue(0);\n  // save latest interpolated position\n  const lastInterpolation = useSharedValue(0);\n  // boolean flag indicating which output range should be used\n  const shouldUseInternalInterpolation = useSharedValue(false);\n\n  const interpolate = (\n    keyboardPosition: number,\n    output: KeyboardInterpolationOutput,\n  ) => {\n    \"worklet\";\n\n    // on iOS it's safe to interpolate between 0 and `fullKeyboardSize` because when\n    // keyboard resized we will not have intermediate values and transition will be instant\n    // see: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327\n    if (Platform.OS === \"ios\") {\n      return interpolateREA(\n        keyboardPosition,\n        [0, nextKeyboardHeight.value],\n        output,\n      );\n    }\n\n    const interpolation = interpolateREA(\n      keyboardPosition,\n      [prevKeyboardHeight.value, nextKeyboardHeight.value],\n      shouldUseInternalInterpolation.value\n        ? [lastInterpolation.value, output[1]]\n        : output,\n    );\n    lastInterpolation.value = interpolation;\n\n    return interpolation;\n  };\n\n  useKeyboardHandler(\n    {\n      onStart: (e) => {\n        \"worklet\";\n\n        const keyboardWillBeHidden = e.height === 0;\n\n        // keyboard will be hidden\n        if (keyboardWillBeHidden) {\n          shouldUseInternalInterpolation.value = false;\n          prevKeyboardHeight.value = 0;\n        }\n\n        // keyboard will change its size\n        if (\n          // keyboard is shown on screen\n          nextKeyboardHeight.value !== 0 &&\n          // it really changes size (handles iOS case when after interactive keyboard gets shown again)\n          nextKeyboardHeight.value !== e.height &&\n          // keyboard is not hiding\n          !keyboardWillBeHidden\n        ) {\n          prevKeyboardHeight.value = nextKeyboardHeight.value;\n          shouldUseInternalInterpolation.value = true;\n        }\n\n        // keyboard will show or change size\n        if (!keyboardWillBeHidden) {\n          nextKeyboardHeight.value = e.height;\n        }\n      },\n      onEnd: (e) => {\n        \"worklet\";\n\n        // handles case show -> resize -> hide -> show\n        // here we reset value to 0 when keyboard is hidden\n        nextKeyboardHeight.value = e.height;\n      },\n    },\n    [],\n  );\n\n  return { interpolate };\n};\n\nexport default useKeyboardInterpolation;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SACEC,WAAW,IAAIC,cAAc,EAC7BC,cAAc,QACT,yBAAyB;AAEhC,SAASC,kBAAkB,QAAQ,kCAAkC;AAIrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;EACrC;EACA,MAAMC,kBAAkB,GAAGH,cAAc,CAAC,CAAC,CAAC;EAC5C,MAAMI,kBAAkB,GAAGJ,cAAc,CAAC,CAAC,CAAC;EAC5C;EACA,MAAMK,iBAAiB,GAAGL,cAAc,CAAC,CAAC,CAAC;EAC3C;EACA,MAAMM,8BAA8B,GAAGN,cAAc,CAAC,KAAK,CAAC;EAE5D,MAAMF,WAAW,GAAGA,CAClBS,gBAAwB,EACxBC,MAAmC,KAChC;IACH,SAAS;;IAET;IACA;IACA;IACA,IAAIX,QAAQ,CAACY,EAAE,KAAK,KAAK,EAAE;MACzB,OAAOV,cAAc,CACnBQ,gBAAgB,EAChB,CAAC,CAAC,EAAEJ,kBAAkB,CAACO,KAAK,CAAC,EAC7BF,MACF,CAAC;IACH;IAEA,MAAMG,aAAa,GAAGZ,cAAc,CAClCQ,gBAAgB,EAChB,CAACH,kBAAkB,CAACM,KAAK,EAAEP,kBAAkB,CAACO,KAAK,CAAC,EACpDJ,8BAA8B,CAACI,KAAK,GAChC,CAACL,iBAAiB,CAACK,KAAK,EAAEF,MAAM,CAAC,CAAC,CAAC,CAAC,GACpCA,MACN,CAAC;IACDH,iBAAiB,CAACK,KAAK,GAAGC,aAAa;IAEvC,OAAOA,aAAa;EACtB,CAAC;EAEDV,kBAAkB,CAChB;IACEW,OAAO,EAAGC,CAAC,IAAK;MACd,SAAS;;MAET,MAAMC,oBAAoB,GAAGD,CAAC,CAACE,MAAM,KAAK,CAAC;;MAE3C;MACA,IAAID,oBAAoB,EAAE;QACxBR,8BAA8B,CAACI,KAAK,GAAG,KAAK;QAC5CN,kBAAkB,CAACM,KAAK,GAAG,CAAC;MAC9B;;MAEA;MACA;MACE;MACAP,kBAAkB,CAACO,KAAK,KAAK,CAAC;MAC9B;MACAP,kBAAkB,CAACO,KAAK,KAAKG,CAAC,CAACE,MAAM;MACrC;MACA,CAACD,oBAAoB,EACrB;QACAV,kBAAkB,CAACM,KAAK,GAAGP,kBAAkB,CAACO,KAAK;QACnDJ,8BAA8B,CAACI,KAAK,GAAG,IAAI;MAC7C;;MAEA;MACA,IAAI,CAACI,oBAAoB,EAAE;QACzBX,kBAAkB,CAACO,KAAK,GAAGG,CAAC,CAACE,MAAM;MACrC;IACF,CAAC;IACDC,KAAK,EAAGH,CAAC,IAAK;MACZ,SAAS;;MAET;MACA;MACAV,kBAAkB,CAACO,KAAK,GAAGG,CAAC,CAACE,MAAM;IACrC;EACF,CAAC,EACD,EACF,CAAC;EAED,OAAO;IAAEjB;EAAY,CAAC;AACxB,CAAC;AAED,eAAeI,wBAAwB"}

package/lib/typescript/components/hooks/useKeyboardInterpolation.d.ts

@@ -1,20 +0,0 @@
-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
- */
-declare const useKeyboardInterpolation: () => {
-    interpolate: (keyboardPosition: number, output: KeyboardInterpolationOutput) => number;
-};
-export default useKeyboardInterpolation;