react-native-keyboard-controller 1.21.1 → 1.21.3

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -30,34 +30,15 @@ import ScrollViewWithBottomPadding from "../ScrollViewWithBottomPadding";
 import { useSmoothKeyboardHandler } from "./useSmoothKeyboardHandler";
 import { debounce, scrollDistanceWithRespectToSnapPoints } from "./utils";
 
-import type { AnimatedScrollViewComponent } from "../ScrollViewWithBottomPadding";
-import type {
-  LayoutChangeEvent,
-  ScrollView,
-  ScrollViewProps,
-} from "react-native";
+import type { LayoutChangeEvent, ScrollView } from "react-native";
 import type {
   FocusedInputLayoutChangedEvent,
   FocusedInputSelectionChangedEvent,
+  KeyboardAwareScrollViewProps,
+  KeyboardAwareScrollViewRef,
   NativeEvent,
 } from "react-native-keyboard-controller";
 
-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;
-  /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
-  disableScrollOnKeyboardHide?: boolean;
-  /** Controls whether this `KeyboardAwareScrollView` instance should take effect. Default is `true`. */
-  enabled?: boolean;
-  /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0`. */
-  extraKeyboardSpace?: number;
-  /** Custom component for `ScrollView`. Default is `ScrollView`. */
-  ScrollViewComponent?: AnimatedScrollViewComponent;
-} & ScrollViewProps;
-export type KeyboardAwareScrollViewRef = {
-  assureFocusedInputVisible: () => void;
-} & ScrollView;
-
 // Everything begins from `onStart` handler. This handler is called every time,
 // when keyboard changes its size or when focused `TextInput` was changed. In
 // this handler we are calculating/memoizing values which later will be used
@@ -151,6 +132,7 @@ const KeyboardAwareScrollView = forwardRef<
       useSharedValue<FocusedInputSelectionChangedEvent | null>(null);
     const ghostViewSpace = useSharedValue(-1);
     const pendingSelectionForFocus = useSharedValue(false);
+    const selectionUpdatedSinceHide = useSharedValue(false);
     const scrollViewPageY = useSharedValue(0);
 
     const { height } = useWindowDimensions();
@@ -339,8 +321,9 @@ const KeyboardAwareScrollView = forwardRef<
         const latestSelection = lastSelection.value?.selection;
 
         lastSelection.value = e;
+        selectionUpdatedSinceHide.value = true;
 
-        if (e.target !== lastTarget) {
+        if (e.target !== lastTarget || pendingSelectionForFocus.value) {
           if (pendingSelectionForFocus.value) {
             // selection arrived after onStart - complete the deferred setup
             pendingSelectionForFocus.value = false;
@@ -416,25 +399,34 @@ const KeyboardAwareScrollView = forwardRef<
             keyboardWillChangeSize ||
             focusWasChanged
           ) {
-            syncKeyboardFrame(e);
             // persist scroll value
             scrollPosition.value = position.value;
             // just persist height - later will be used in interpolation
             keyboardHeight.value = e.height;
+            // and update keyboard spacer size
+            syncKeyboardFrame(e);
           }
 
           // focus was changed
           if (focusWasChanged) {
             tag.value = e.target;
 
-            if (lastSelection.value?.target === e.target) {
-              // selection arrived before onStart - use it to update layout
+            if (
+              lastSelection.value?.target === e.target &&
+              selectionUpdatedSinceHide.value
+            ) {
+              // fresh selection arrived before onStart - use it to update layout
               updateLayoutFromSelection();
               pendingSelectionForFocus.value = false;
             } else {
-              // selection hasn't arrived yet for the new target.
-              // use input layout as-is; will be refined when selection arrives.
-              if (input.value) {
+              // selection hasn't arrived yet for the new target (iOS 15),
+              // or it's stale from previous session (Android refocus same input).
+              // Use stale selection as best-effort fallback if available for same target,
+              // otherwise fall back to full input layout.
+              // Will be corrected if a fresh onSelectionChange arrives.
+              if (lastSelection.value?.target === e.target) {
+                updateLayoutFromSelection();
+              } else if (input.value) {
                 layout.value = input.value;
               }
               pendingSelectionForFocus.value = true;
@@ -483,7 +475,14 @@ const KeyboardAwareScrollView = forwardRef<
           scrollPosition.value = position.value;
 
           if (e.height === 0) {
-            lastSelection.value = null;
+            selectionUpdatedSinceHide.value = false;
+          } else if (keyboardWillAppear.value) {
+            // keyboard fully shown after appearing from hidden state — clear
+            // pending flag to prevent leaking into next focus-change session.
+            // Only when the keyboard was actually appearing (not a focus switch
+            // with same keyboard height), otherwise we'd clear the flag before
+            // onSelectionChange has a chance to process it.
+            pendingSelectionForFocus.value = false;
           }
 
           syncKeyboardFrame(e);
@@ -552,14 +551,8 @@ const KeyboardAwareScrollView = forwardRef<
       [],
     );
 
-    // animations become choppy when scrolling to the end of the `ScrollView` (when the last input is focused)
-    // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding
-    // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation
-    // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout
-    // re-calculation on every animation frame and it helps to achieve smooth animation.
-    // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342
     const padding = useDerivedValue(
-      () => (enabled ? currentKeyboardFrameHeight.value + 1 : 0),
+      () => (enabled ? currentKeyboardFrameHeight.value : 0),
       [enabled],
     );
 

package/src/components/KeyboardAwareScrollView/types.ts

@@ -0,0 +1,18 @@
+import type { AnimatedScrollViewComponent } from "../ScrollViewWithBottomPadding";
+import type { ScrollView, ScrollViewProps } from "react-native";
+
+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;
+  /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
+  disableScrollOnKeyboardHide?: boolean;
+  /** Controls whether this `KeyboardAwareScrollView` instance should take effect. Default is `true`. */
+  enabled?: boolean;
+  /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0`. */
+  extraKeyboardSpace?: number;
+  /** Custom component for `ScrollView`. Default is `ScrollView`. */
+  ScrollViewComponent?: AnimatedScrollViewComponent;
+} & ScrollViewProps;
+export type KeyboardAwareScrollViewRef = {
+  assureFocusedInputVisible: () => void;
+} & ScrollView;

package/src/components/KeyboardChatScrollView/index.tsx

@@ -69,6 +69,7 @@ const KeyboardChatScrollView = forwardRef<
       scroll,
       layout,
       size,
+      contentOffsetY,
       inverted,
       keyboardLiftBehavior,
       freeze,

package/src/components/KeyboardChatScrollView/useExtraContentPadding/index.ts

@@ -1,5 +1,8 @@
+import { useCallback } from "react";
+import { Platform } from "react-native";
 import { scrollTo, useAnimatedReaction } from "react-native-reanimated";
 
+import { IS_FABRIC } from "../../../architecture";
 import { isScrollAtEnd, shouldShiftContent } from "../useChatKeyboard/helpers";
 
 import type { KeyboardLiftBehavior } from "../useChatKeyboard/types";
@@ -19,6 +22,8 @@ type UseExtraContentPaddingOptions = {
   layout: SharedValue<{ width: number; height: number }>;
   /** Total content dimensions. */
   size: SharedValue<{ width: number; height: number }>;
+  /** IOS only — when provided, sets contentOffset atomically with contentInset. */
+  contentOffsetY?: SharedValue<number>;
   inverted: boolean;
   keyboardLiftBehavior: KeyboardLiftBehavior;
   freeze: boolean;
@@ -47,11 +52,32 @@ function useExtraContentPadding(options: UseExtraContentPaddingOptions): void {
     scroll,
     layout,
     size,
+    contentOffsetY,
     inverted,
     keyboardLiftBehavior,
     freeze,
   } = options;
 
+  const scrollToTarget = useCallback(
+    (target: number) => {
+      "worklet";
+
+      if (contentOffsetY && IS_FABRIC) {
+        // eslint-disable-next-line react-compiler/react-compiler
+        contentOffsetY.value = target;
+      } else if (Platform.OS === "android") {
+        // Defer scrollTo so the animatedProps inset commit lands first;
+        // otherwise the native ScrollView clamps to the old range.
+        requestAnimationFrame(() => {
+          scrollTo(scrollViewRef, 0, target, false);
+        });
+      } else {
+        scrollTo(scrollViewRef, 0, target, false);
+      }
+    },
+    [scrollViewRef, contentOffsetY],
+  );
+
   useAnimatedReaction(
     () => extraContentPadding.value,
     (current, previous) => {
@@ -104,7 +130,7 @@ function useExtraContentPadding(options: UseExtraContentPaddingOptions): void {
       if (inverted) {
         const target = Math.max(scroll.value - effectiveDelta, -currentTotal);
 
-        scrollTo(scrollViewRef, 0, target, false);
+        scrollToTarget(target);
       } else {
         const maxScroll = Math.max(
           size.value.height - layout.value.height + currentTotal,
@@ -112,7 +138,7 @@ function useExtraContentPadding(options: UseExtraContentPaddingOptions): void {
         );
         const target = Math.min(scroll.value + effectiveDelta, maxScroll);
 
-        scrollTo(scrollViewRef, 0, target, false);
+        scrollToTarget(target);
       }
     },
     [inverted, keyboardLiftBehavior, freeze],

package/src/components/ScrollViewWithBottomPadding/styles.ts

@@ -2,7 +2,8 @@ import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
   },
 });
 

package/src/components/index.ts

@@ -11,6 +11,6 @@ export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
 export type {
   KeyboardAwareScrollViewProps,
   KeyboardAwareScrollViewRef,
-} from "./KeyboardAwareScrollView";
+} from "./KeyboardAwareScrollView/types";
 export type { KeyboardToolbarProps } from "./KeyboardToolbar";
 export type { KeyboardChatScrollViewProps } from "./KeyboardChatScrollView/types";