react-native-keyboard-controller 1.10.0 → 1.10.1

package/lib/typescript/specs/NativeStatusBarManagerCompat.d.ts

@@ -1,4 +1,4 @@
-import type { TurboModule } from 'react-native';
+import type { TurboModule } from "react-native";
 export interface Spec extends TurboModule {
     readonly getConstants: () => {};
     setHidden(hidden: boolean): void;

package/lib/typescript/types.d.ts

@@ -1,4 +1,4 @@
-import type { EmitterSubscription, NativeSyntheticEvent, ViewProps } from 'react-native';
+import type { EmitterSubscription, NativeSyntheticEvent, ViewProps } from "react-native";
 export type NativeEvent = {
     progress: number;
     height: number;
@@ -37,7 +37,7 @@ export type KeyboardControllerProps = {
     enabled?: boolean;
 } & ViewProps;
 export type KeyboardGestureAreaProps = {
-    interpolator: 'ios' | 'linear';
+    interpolator: "ios" | "linear";
     /**
      * Whether to allow to show a keyboard from dismissed state by swipe up.
      * Default to `false`.
@@ -57,7 +57,7 @@ export type KeyboardControllerModule = {
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;
 };
-export type KeyboardControllerEvents = 'keyboardWillShow' | 'keyboardDidShow' | 'keyboardWillHide' | 'keyboardDidHide';
+export type KeyboardControllerEvents = "keyboardWillShow" | "keyboardDidShow" | "keyboardWillHide" | "keyboardDidHide";
 export type KeyboardEventData = {
     height: number;
     duration: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -27,6 +27,7 @@
     "!**/__mocks__"
   ],
   "scripts": {
+    "format": "prettier '**/*' --ignore-unknown --write",
     "test": "jest",
     "typescript": "tsc --noEmit --project tsconfig.build.json",
     "lint": "eslint --quiet \"**/*.{js,ts,tsx}\"",
@@ -62,7 +63,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
-    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/eslint-config": "^0.74.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@types/jest": "^29.2.1",
     "@types/react": "^18.0.24",
@@ -71,15 +72,15 @@
     "clang-format": "^1.8.0",
     "commitlint": "^11.0.0",
     "eslint": "^8.19.0",
-    "eslint-config-prettier": "^7.0.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.4.2",
-    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-prettier": "^4.2.1",
     "husky": "^6.0.0",
     "jest": "^29.2.1",
     "pod-install": "^0.1.0",
-    "prettier": "^2.4.1",
+    "prettier": "^2.8.8",
     "react": "18.2.0",
     "react-native": "0.72.4",
     "react-native-builder-bob": "^0.18.0",
@@ -123,10 +124,7 @@
   },
   "prettier": {
     "quoteProps": "consistent",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
+    "trailingComma": "all"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/animated.tsx

@@ -1,31 +1,31 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Animated, Platform, StyleSheet } from 'react-native';
-import Reanimated, { useSharedValue } from 'react-native-reanimated';
+import React, { useEffect, useMemo, useState } from "react";
+import { Animated, Platform, StyleSheet } from "react-native";
+import Reanimated, { useSharedValue } from "react-native-reanimated";
 
-import { KeyboardControllerView } from './bindings';
-import { KeyboardContext } from './context';
-import { useAnimatedValue, useSharedHandlers } from './internal';
-import { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';
+import { KeyboardControllerView } from "./bindings";
+import { KeyboardContext } from "./context";
+import { useAnimatedValue, useSharedHandlers } from "./internal";
+import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
 import {
   useAnimatedKeyboardHandler,
   useFocusedInputLayoutHandler,
   useFocusedInputTextHandler,
-} from './reanimated';
+} from "./reanimated";
 
-import type { KeyboardAnimationContext } from './context';
+import type { KeyboardAnimationContext } from "./context";
 import type {
   FocusedInputHandler,
   FocusedInputLayoutChangedEvent,
   KeyboardControllerProps,
   KeyboardHandler,
   NativeEvent,
-} from './types';
-import type { ViewStyle } from 'react-native';
+} from "./types";
+import type { ViewStyle } from "react-native";
 
 const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
   Animated.createAnimatedComponent(
-    KeyboardControllerView
-  ) as React.FC<KeyboardControllerProps>
+    KeyboardControllerView,
+  ) as React.FC<KeyboardControllerProps>,
 );
 
 type Styles = {
@@ -38,8 +38,8 @@ const styles = StyleSheet.create<Styles>({
     flex: 1,
   },
   hidden: {
-    display: 'none',
-    position: 'absolute',
+    display: "none",
+    position: "absolute",
   },
 });
 
@@ -102,14 +102,14 @@ export const KeyboardProvider = ({
       setInputHandlers,
       setEnabled,
     }),
-    [enabled]
+    [enabled],
   );
   const style = useMemo(
     () => [
       styles.hidden,
       { transform: [{ translateX: height }, { translateY: progress }] },
     ],
-    []
+    [],
   );
   const onKeyboardMove = useMemo(
     () =>
@@ -122,13 +122,13 @@ export const KeyboardProvider = ({
             },
           },
         ],
-        { useNativeDriver: true }
+        { useNativeDriver: true },
       ),
-    []
+    [],
   );
   // handlers
   const updateSharedValues = (event: NativeEvent, platforms: string[]) => {
-    'worklet';
+    "worklet";
 
     if (platforms.includes(Platform.OS)) {
       progressSV.value = event.progress;
@@ -138,35 +138,35 @@ export const KeyboardProvider = ({
   const keyboardHandler = useAnimatedKeyboardHandler(
     {
       onKeyboardMoveStart: (event: NativeEvent) => {
-        'worklet';
+        "worklet";
 
-        broadcastKeyboardEvents('onStart', event);
-        updateSharedValues(event, ['ios']);
+        broadcastKeyboardEvents("onStart", event);
+        updateSharedValues(event, ["ios"]);
       },
       onKeyboardMove: (event: NativeEvent) => {
-        'worklet';
+        "worklet";
 
-        broadcastKeyboardEvents('onMove', event);
-        updateSharedValues(event, ['android']);
+        broadcastKeyboardEvents("onMove", event);
+        updateSharedValues(event, ["android"]);
       },
       onKeyboardMoveEnd: (event: NativeEvent) => {
-        'worklet';
+        "worklet";
 
-        broadcastKeyboardEvents('onEnd', event);
+        broadcastKeyboardEvents("onEnd", event);
       },
       onKeyboardMoveInteractive: (event: NativeEvent) => {
-        'worklet';
+        "worklet";
 
-        updateSharedValues(event, ['android', 'ios']);
-        broadcastKeyboardEvents('onInteractive', event);
+        updateSharedValues(event, ["android", "ios"]);
+        broadcastKeyboardEvents("onInteractive", event);
       },
     },
-    []
+    [],
   );
   const inputLayoutHandler = useFocusedInputLayoutHandler(
     {
       onFocusedInputLayoutChanged: (e) => {
-        'worklet';
+        "worklet";
 
         if (e.target !== -1) {
           layout.value = e;
@@ -175,17 +175,17 @@ export const KeyboardProvider = ({
         }
       },
     },
-    []
+    [],
   );
   const inputTextHandler = useFocusedInputTextHandler(
     {
       onFocusedInputTextChanged: (e) => {
-        'worklet';
+        "worklet";
 
-        broadcastInputEvents('onChangeText', e);
+        broadcastInputEvents("onChangeText", e);
       },
     },
-    []
+    [],
   );
   // effects
   useEffect(() => {
@@ -201,8 +201,8 @@ export const KeyboardProvider = ({
       <KeyboardControllerViewAnimated
         enabled={enabled}
         onKeyboardMoveReanimated={keyboardHandler}
-        onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}
-        onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}
+        onKeyboardMoveStart={Platform.OS === "ios" ? onKeyboardMove : undefined}
+        onKeyboardMove={Platform.OS === "android" ? onKeyboardMove : undefined}
         onKeyboardMoveInteractive={onKeyboardMove}
         onFocusedInputLayoutChangedReanimated={inputLayoutHandler}
         onFocusedInputTextChangedReanimated={inputTextHandler}

package/src/bindings.native.ts

@@ -1,20 +1,20 @@
-import { NativeEventEmitter, Platform } from 'react-native';
+import { NativeEventEmitter, Platform } from "react-native";
 
 import type {
   KeyboardControllerModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
   KeyboardGestureAreaProps,
-} from './types';
+} from "./types";
 
 const LINKING_ERROR =
   `The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo Go\n';
+  Platform.select({ ios: "- You have run 'pod install'\n", default: "" }) +
+  "- You rebuilt the app after installing the package\n" +
+  "- You are not using Expo Go\n";
 
 const RCTKeyboardController =
-  require('./specs/NativeKeyboardController').default;
+  require("./specs/NativeKeyboardController").default;
 export const KeyboardController = (
   RCTKeyboardController
     ? RCTKeyboardController
@@ -24,7 +24,7 @@ export const KeyboardController = (
           get() {
             throw new Error(LINKING_ERROR);
           },
-        }
+        },
       )
 ) as KeyboardControllerModule;
 
@@ -32,11 +32,11 @@ const eventEmitter = new NativeEventEmitter(KeyboardController);
 
 export const KeyboardEvents: KeyboardEventsModule = {
   addListener: (name, cb) =>
-    eventEmitter.addListener('KeyboardController::' + name, cb),
+    eventEmitter.addListener("KeyboardController::" + name, cb),
 };
 export const KeyboardControllerView: React.FC<KeyboardControllerProps> =
-  require('./specs/KeyboardControllerViewNativeComponent').default;
+  require("./specs/KeyboardControllerViewNativeComponent").default;
 export const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =
-  Platform.OS === 'android' && Platform.Version >= 30
-    ? require('./specs/KeyboardGestureAreaNativeComponent').default
+  Platform.OS === "android" && Platform.Version >= 30
+    ? require("./specs/KeyboardGestureAreaNativeComponent").default
     : ({ children }: KeyboardGestureAreaProps) => children;

package/src/bindings.ts

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

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -1,6 +1,6 @@
-import { useSharedValue } from 'react-native-reanimated';
+import { useSharedValue } from "react-native-reanimated";
 
-import { useKeyboardHandler } from '../../hooks';
+import { useKeyboardHandler } from "../../hooks";
 
 export const useKeyboardAnimation = () => {
   const heightWhenOpened = useSharedValue(0);
@@ -11,7 +11,7 @@ export const useKeyboardAnimation = () => {
   useKeyboardHandler(
     {
       onStart: (e) => {
-        'worklet';
+        "worklet";
 
         if (e.height > 0) {
           isClosed.value = false;
@@ -19,18 +19,21 @@ export const useKeyboardAnimation = () => {
         }
       },
       onMove: (e) => {
-        'worklet';
+        "worklet";
 
         progress.value = e.progress;
         height.value = e.height;
       },
       onEnd: (e) => {
-        'worklet';
+        "worklet";
 
         isClosed.value = e.height === 0;
+
+        progress.value = e.progress;
+        height.value = e.height;
       },
     },
-    []
+    [],
   );
 
   return { height, progress, heightWhenOpened, isClosed };

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;
@@ -87,7 +87,7 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
         position.value = e.contentOffset.y;
       },
     },
-    []
+    [],
   );
 
   /**
@@ -95,7 +95,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 +106,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 +123,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 +152,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 +209,18 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
         }
       },
       onMove: (e) => {
-        'worklet';
+        "worklet";
 
         maybeScroll(e.height);
       },
       onEnd: (e) => {
-        'worklet';
+        "worklet";
 
         keyboardHeight.value = e.height;
         scrollPosition.value = position.value;
       },
     },
-    [height, maybeScroll]
+    [height, maybeScroll],
   );
 
   useAnimatedReaction(
@@ -237,14 +237,14 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
         layout.value = prevLayout;
       }
     },
-    []
+    [],
   );
 
   const view = useAnimatedStyle(
     () => ({
       paddingBottom: keyboardHeight.value,
     }),
-    []
+    [],
   );
 
   return (