react-native-keyboard-controller 1.21.3 → 1.21.4

package/src/bindings.ts

@@ -27,6 +27,9 @@ export const KeyboardControllerNative: KeyboardControllerNativeModule = {
     Promise.resolve({ x: 0, y: 0, width: 0, height: 0 }),
   addListener: NOOP,
   removeListeners: NOOP,
+  getConstants: () => ({
+    keyboardBorderRadius: 0,
+  }),
 };
 /**
  * An event emitter that provides a way to subscribe to next keyboard events:

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -12,6 +12,7 @@ import Reanimated, {
   scrollTo,
   useAnimatedReaction,
   useAnimatedRef,
+  useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
 } from "react-native-reanimated";
@@ -104,6 +105,7 @@ const KeyboardAwareScrollView = forwardRef<
       disableScrollOnKeyboardHide = false,
       enabled = true,
       extraKeyboardSpace = 0,
+      mode = "insets",
       ScrollViewComponent = Reanimated.ScrollView,
       snapToOffsets,
       ...rest
@@ -219,30 +221,39 @@ const KeyboardAwareScrollView = forwardRef<
       },
       [bottomOffset, enabled, height, snapToOffsets],
     );
-    const removeGhostPadding = useCallback((e: number) => {
-      "worklet";
+    const removeGhostPadding = useCallback(
+      (e: number) => {
+        "worklet";
 
-      // new `ScrollViewWithBottomPadding` behavior: if we hide keyboard and we are in the end of `ScrollView`
-      // then we always need to scroll back, because we apply a padding that doesn't change layout, so we will
-      // not have auto scroll back in this case
-      if (!keyboardWillAppear.value && ghostViewSpace.value > 0) {
-        scrollTo(
-          scrollViewAnimatedRef,
-          0,
-          scrollPosition.value -
-            interpolate(
-              e,
-              [initialKeyboardSize.value, keyboardHeight.value],
-              [ghostViewSpace.value, 0],
-            ),
-          false,
-        );
+        // layout mode: the spacer view participates in layout, so the ScrollView
+        // reflows naturally when it shrinks — no manual scroll correction needed.
+        if (mode === "layout") {
+          return false;
+        }
 
-        return true;
-      }
+        // insets mode: `ScrollViewWithBottomPadding` extends scrollable area without
+        // changing layout, so when the keyboard hides and we're at the end of the
+        // ScrollView we must manually scroll back.
+        if (!keyboardWillAppear.value && ghostViewSpace.value > 0) {
+          scrollTo(
+            scrollViewAnimatedRef,
+            0,
+            scrollPosition.value -
+              interpolate(
+                e,
+                [initialKeyboardSize.value, keyboardHeight.value],
+                [ghostViewSpace.value, 0],
+              ),
+            false,
+          );
 
-      return false;
-    }, []);
+          return true;
+        }
+
+        return false;
+      },
+      [mode],
+    );
     const performScrollWithPositionRestoration = useCallback(
       (newPosition: number) => {
         "worklet";
@@ -403,8 +414,14 @@ const KeyboardAwareScrollView = forwardRef<
             scrollPosition.value = position.value;
             // just persist height - later will be used in interpolation
             keyboardHeight.value = e.height;
-            // and update keyboard spacer size
-            syncKeyboardFrame(e);
+
+            // insets mode: set the full contentInset upfront so that maybeScroll
+            // calculations are correct from the very first onMove frame.
+            // layout mode: do NOT set it here — the spacer must grow frame-by-frame
+            // in onMove to avoid a premature full-height jump before the keyboard moves.
+            if (mode === "insets") {
+              syncKeyboardFrame(e);
+            }
           }
 
           // focus was changed
@@ -445,13 +462,15 @@ const KeyboardAwareScrollView = forwardRef<
             }
           }
 
-          ghostViewSpace.value =
-            position.value +
-            scrollViewLayout.value.height -
-            scrollViewContentSize.value.height;
+          if (mode === "insets") {
+            ghostViewSpace.value =
+              position.value +
+              scrollViewLayout.value.height -
+              scrollViewContentSize.value.height;
 
-          if (ghostViewSpace.value > 0) {
-            scrollPosition.value = position.value;
+            if (ghostViewSpace.value > 0) {
+              scrollPosition.value = position.value;
+            }
           }
         },
         onMove: (e) => {
@@ -461,6 +480,11 @@ const KeyboardAwareScrollView = forwardRef<
             return;
           }
 
+          // layout mode: drive the spacer view animation frame-by-frame
+          if (mode === "layout") {
+            syncKeyboardFrame(e);
+          }
+
           // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
           if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
             maybeScroll(e.height);
@@ -489,6 +513,7 @@ const KeyboardAwareScrollView = forwardRef<
         },
       },
       [
+        mode,
         maybeScroll,
         removeGhostPadding,
         disableScrollOnKeyboardHide,
@@ -555,6 +580,31 @@ const KeyboardAwareScrollView = forwardRef<
       () => (enabled ? currentKeyboardFrameHeight.value : 0),
       [enabled],
     );
+    // layout mode only: a spacer view whose paddingBottom grows with the keyboard.
+    // The `+ 1` ensures the scroll view never reaches its absolute end during animation,
+    // avoiding the layout recalculation that triggers on every frame at the boundary.
+    // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342
+    const layoutSpacerStyle = useAnimatedStyle(
+      () =>
+        enabled && mode === "layout"
+          ? { paddingBottom: currentKeyboardFrameHeight.value + 1 }
+          : {},
+      [enabled, mode],
+    );
+
+    if (mode === "layout") {
+      return (
+        <ScrollViewComponent
+          ref={onRef}
+          {...rest}
+          scrollEventThrottle={16}
+          onLayout={onScrollViewLayout}
+        >
+          {children}
+          {enabled && <Reanimated.View style={layoutSpacerStyle} />}
+        </ScrollViewComponent>
+      );
+    }
 
     return (
       <ScrollViewWithBottomPadding

package/src/components/KeyboardAwareScrollView/types.ts

@@ -1,6 +1,8 @@
 import type { AnimatedScrollViewComponent } from "../ScrollViewWithBottomPadding";
 import type { ScrollView, ScrollViewProps } from "react-native";
 
+export type KeyboardAwareScrollViewMode = "insets" | "layout";
+
 export type KeyboardAwareScrollViewProps = {
   /** The distance between the keyboard and the caret inside a focused `TextInput` when the keyboard is shown. Default is `0`. */
   bottomOffset?: number;
@@ -10,6 +12,15 @@ export type KeyboardAwareScrollViewProps = {
   enabled?: boolean;
   /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0`. */
   extraKeyboardSpace?: number;
+  /**
+   * Controls how keyboard space is created at the bottom of the `ScrollView`.
+   *
+   * - `"insets"` *(default)*: Extends the scrollable area via `contentInset` (iOS) and `ClippingScrollView` (Android). No layout reflow occurs — content positions remain stable during keyboard animation. Recommended for most use cases.
+   * - `"layout"`: Appends a spacer `View` as the last child of the `ScrollView`. The spacer participates in layout, so flex-based arrangements (e.g. `justifyContent: "space-between"`, `gap`) reflow naturally when the keyboard appears. Use this when you need content to physically rearrange around the keyboard space.
+   *
+   * Default is `"insets"`.
+   */
+  mode?: KeyboardAwareScrollViewMode;
   /** Custom component for `ScrollView`. Default is `ScrollView`. */
   ScrollViewComponent?: AnimatedScrollViewComponent;
 } & ScrollViewProps;

package/src/components/KeyboardToolbar/constants.ts

@@ -1,4 +1,4 @@
-import { Platform } from "react-native";
+import { KEYBOARD_BORDER_RADIUS } from "../../constants";
 
 import type { HEX } from "./types";
 
@@ -10,6 +10,5 @@ export const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
 
 export const KEYBOARD_TOOLBAR_HEIGHT = 42;
 export const DEFAULT_OPACITY: HEX = "FF";
-export const KEYBOARD_HAS_ROUNDED_CORNERS =
-  Platform.OS === "ios" && parseInt(Platform.Version, 10) >= 26;
+export const KEYBOARD_HAS_ROUNDED_CORNERS = KEYBOARD_BORDER_RADIUS > 0;
 export const OPENED_OFFSET = KEYBOARD_HAS_ROUNDED_CORNERS ? -11 : 0;

package/src/components/index.ts

@@ -9,6 +9,7 @@ export { default as KeyboardChatScrollView } from "./KeyboardChatScrollView";
 export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
 export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
 export type {
+  KeyboardAwareScrollViewMode,
   KeyboardAwareScrollViewProps,
   KeyboardAwareScrollViewRef,
 } from "./KeyboardAwareScrollView/types";

package/src/constants.ts

@@ -1,3 +1,5 @@
+import { KeyboardControllerNative } from "./bindings";
+
 // copied from `android.view.WindowManager.LayoutParams`
 export enum AndroidSoftInputModes {
   SOFT_INPUT_ADJUST_NOTHING = 48,
@@ -17,3 +19,5 @@ export enum AndroidSoftInputModes {
   SOFT_INPUT_STATE_UNSPECIFIED = 0,
   SOFT_INPUT_STATE_VISIBLE = 4,
 }
+export const KEYBOARD_BORDER_RADIUS =
+  KeyboardControllerNative.getConstants().keyboardBorderRadius;

package/src/index.ts

@@ -20,6 +20,7 @@ export type {
   KeyboardChatScrollViewProps,
   KeyboardAvoidingViewProps,
   KeyboardStickyViewProps,
+  KeyboardAwareScrollViewMode,
   KeyboardAwareScrollViewProps,
   KeyboardAwareScrollViewRef,
   KeyboardToolbarProps,

package/src/specs/NativeKeyboardController.ts

@@ -3,7 +3,9 @@ import { TurboModuleRegistry } from "react-native";
 import type { TurboModule } from "react-native";
 
 export interface Spec extends TurboModule {
-  readonly getConstants: () => {};
+  readonly getConstants: () => {
+    keyboardBorderRadius: number;
+  };
 
   // methods
   setInputMode(mode: number): void;

package/src/types/module.ts

@@ -130,4 +130,8 @@ export type KeyboardControllerNativeModule = {
   // native event module stuff
   addListener: (eventName: string) => void;
   removeListeners: (count: number) => void;
+  // constants
+  getConstants: () => {
+    keyboardBorderRadius: number;
+  };
 };