feat: use contentInset for KeyboardAwareScrollView (#797)

## 📜 Description

Use `ScrollViewWithBottomPadding` component for
`KeyboardAwareScrollView` to optimize performance and fix other issues
that were caused by the fact of usage additional view inside
`ScrollView`.

## 💡 Motivation and Context

In this PR I'm moving away from the idea of having a fake view in the
end of the `ScrollView` and instead start to use
`ScrollViewWithBottomPadding` component to achieve a desired visual
effect.

The additional view causes many issues such as:
- unintended layout shift if `flex: 1` style is used;
- broken auto-grow for multiline input;
- unexpected styling issues if you use `gap`/`justifyContent:
"space-between"` and other properties.

In this PR I'm switching to the component that has been added in
#1294
With its new power I can achieve cross-platform behavior and:
- without layout modification add a scrollable padding;
- get the same behavior on both iOS/Android;
- don't use any hidden children that can break something.

This PR has been opened for a long time, but finally can be merged
because I got working version on Android.

Closes
#794
#645
#929
#168

Potentially:
#748
software-mansion/react-native-reanimated#5567
#719

Unlocks one item from
#883

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### JS

- added `useScrollState` hook;
- use `ScrollViewWithBottomPadding` component in
`KeyboardAwareScrollView`;
- added `removeGhostPadding` in `KeyboardAwareScrollView` and use it
there.

### E2E

- update assets for `KeyboardToolbarClosed` test-case.

## 🤔 How Has This Been Tested?

Tested manually on:
- iPhone 17 Pro (iOS 26.2, simulator);
- Pixel 7 Pro (API 36, real device);
- e2e_emulator_28 (API 28, emulator);;
- all e2e devices;

## 📸 Screenshots (if appropriate):

|iOS|Android|
|---|--------|
|<video
src="https://github.com/user-attachments/assets/adb98eb9-6ac0-436f-a5cc-3c795722401e">|<video
src="https://github.com/user-attachments/assets/07c4b5db-da79-4167-9d3e-c064817bf6f3">|

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

Author: kirillzyusko

android/src/main/java/com/reactnativekeyboardcontroller/views/ClippingScrollViewDecoratorView.kt

@@ -24,10 +24,10 @@ class ClippingScrollViewDecoratorView(
   }
 
   private fun decorateScrollView() {
-    val scrollView = getChildAt(0) as? ScrollView
+    val scrollView = getChildAt(0) as? ScrollView ?: return
 
-    scrollView?.clipToPadding = false
-    scrollView?.setPadding(
+    scrollView.clipToPadding = false
+    scrollView.setPadding(
       scrollView.paddingLeft,
       scrollView.paddingTop,
       scrollView.paddingRight,

e2e/kit/assets/android/e2e_emulator_28/ToolbarKeyboardClosed.png

@@ -12,8 +12,7 @@ import Reanimated, {
   scrollTo,
   useAnimatedReaction,
   useAnimatedRef,
-  useAnimatedStyle,
-  useScrollViewOffset,
+  useDerivedValue,
   useSharedValue,
 } from "react-native-reanimated";
 
@@ -24,10 +23,13 @@ import {
 } from "../../hooks";
 import { findNodeHandle } from "../../utils/findNodeHandle";
 import useCombinedRef from "../hooks/useCombinedRef";
+import useScrollState from "../hooks/useScrollState";
+import ScrollViewWithBottomPadding from "../ScrollViewWithBottomPadding";
 
 import { useSmoothKeyboardHandler } from "./useSmoothKeyboardHandler";
 import { debounce, scrollDistanceWithRespectToSnapPoints } from "./utils";
 
+import type { AnimatedScrollViewComponent } from "../ScrollViewWithBottomPadding";
 import type {
   LayoutChangeEvent,
   ScrollView,
@@ -49,7 +51,7 @@ export type KeyboardAwareScrollViewProps = {
   /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0`. */
   extraKeyboardSpace?: number;
   /** Custom component for `ScrollView`. Default is `ScrollView`. */
-  ScrollViewComponent?: React.ComponentType<ScrollViewProps>;
+  ScrollViewComponent?: AnimatedScrollViewComponent;
 } & ScrollViewProps;
 export type KeyboardAwareScrollViewRef = {
   assureFocusedInputVisible: () => void;
@@ -131,7 +133,11 @@ const KeyboardAwareScrollView = forwardRef<
     const onRef = useCombinedRef(scrollViewAnimatedRef, scrollViewRef);
     const scrollViewTarget = useSharedValue<number | null>(null);
     const scrollPosition = useSharedValue(0);
-    const position = useScrollViewOffset(scrollViewAnimatedRef);
+    const {
+      offset: position,
+      layout: scrollViewLayout,
+      size: scrollViewContentSize,
+    } = useScrollState(scrollViewAnimatedRef);
     const currentKeyboardFrameHeight = useSharedValue(0);
     const keyboardHeight = useSharedValue(0);
     const keyboardWillAppear = useSharedValue(false);
@@ -142,6 +148,7 @@ const KeyboardAwareScrollView = forwardRef<
     const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
     const lastSelection =
       useSharedValue<FocusedInputSelectionChangedEvent | null>(null);
+    const ghostViewSpace = useSharedValue(-1);
 
     const { height } = useWindowDimensions();
 
@@ -213,6 +220,30 @@ const KeyboardAwareScrollView = forwardRef<
       },
       [bottomOffset, enabled, height, snapToOffsets],
     );
+    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,
+        );
+
+        return true;
+      }
+
+      return false;
+    }, []);
     const performScrollWithPositionRestoration = useCallback(
       (newPosition: number) => {
         "worklet";
@@ -372,12 +403,25 @@ const KeyboardAwareScrollView = forwardRef<
             // will pick up correct values
             position.value += maybeScroll(e.height, true);
           }
+
+          ghostViewSpace.value =
+            position.value +
+            scrollViewLayout.value.height -
+            scrollViewContentSize.value.height;
+
+          if (ghostViewSpace.value > 0) {
+            scrollPosition.value = position.value;
+          }
         },
         onMove: (e) => {
           "worklet";
 
           syncKeyboardFrame(e);
 
+          if (removeGhostPadding(e.height)) {
+            return;
+          }
+
           // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
           if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
             maybeScroll(e.height);
@@ -386,13 +430,20 @@ const KeyboardAwareScrollView = forwardRef<
         onEnd: (e) => {
           "worklet";
 
+          removeGhostPadding(e.height);
+
           keyboardHeight.value = e.height;
           scrollPosition.value = position.value;
 
           syncKeyboardFrame(e);
         },
       },
-      [maybeScroll, disableScrollOnKeyboardHide, syncKeyboardFrame],
+      [
+        maybeScroll,
+        removeGhostPadding,
+        disableScrollOnKeyboardHide,
+        syncKeyboardFrame,
+      ],
     );
 
     const synchronize = useCallback(async () => {
@@ -443,32 +494,28 @@ const KeyboardAwareScrollView = forwardRef<
       [],
     );
 
-    const view = useAnimatedStyle(
-      () =>
-        enabled
-          ? {
-              // 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
-              paddingBottom: currentKeyboardFrameHeight.value + 1,
-            }
-          : {},
+    // 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],
     );
 
     return (
-      <ScrollViewComponent
+      <ScrollViewWithBottomPadding
         ref={onRef}
         {...rest}
+        bottomPadding={padding}
         scrollEventThrottle={16}
+        ScrollViewComponent={ScrollViewComponent}
         onLayout={onScrollViewLayout}
       >
         {children}
-        {enabled && <Reanimated.View style={view} />}
-      </ScrollViewComponent>
+      </ScrollViewWithBottomPadding>
     );
   },
 );