feat: add ScrollViewWithBottomPadding component (#1294)

## 📜 Description

Added `ScrollViewWithBottomPadding` component.

## 💡 Motivation and Context

This PR is a logical continuation of
#1289

In this PR I'm building a foundational component that adds scrollable
padding on both iOS/Android without modifying layout. As a result it
gives super smooth keyboard interactions, because we don't recalculate
layout on each frame and we still add scrollable space. Also we achieve
it without additional views, which is also super helpful, since we don't
accidentally break styling.

This component will power next-gen implementation of
`KeyboardAwareScrollView` and future `ChatKit` component.

## 📢 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 `ScrollViewWithBottomPadding` component;

## 🤔 How Has This Been Tested?

Tested manually in example project. At the moment not used in the
package, but will be eventually used in `KeyboardAwareScrollView` and
`ChatKit`.

## 📸 Screenshots (if appropriate):

|KeyboardAwareScrollView|Non inverted chat list|
|--------------------------|---------------------|
|<video
src="https://github.com/user-attachments/assets/0f7efef7-ec15-4fe6-96cb-40334f0c91ad">|<video
src="https://github.com/user-attachments/assets/92093e87-434a-4c82-91d5-1c7e9706e5f0">|

## 📝 Checklist

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

Author: kirillzyusko

src/components/ScrollViewWithBottomPadding/index.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef } from "react";
+import { Platform } from "react-native";
+import Reanimated, { useAnimatedProps } from "react-native-reanimated";
+
+import { ClippingScrollView } from "../../bindings";
+
+import styles from "./styles";
+
+import type { ScrollViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+
+const ReanimatedClippingScrollView =
+  Platform.OS === "android"
+    ? Reanimated.createAnimatedComponent(ClippingScrollView)
+    : ClippingScrollView;
+
+type AnimatedScrollViewProps = React.ComponentProps<
+  typeof Reanimated.ScrollView
+>;
+
+export type AnimatedScrollViewComponent = React.ForwardRefExoticComponent<
+  AnimatedScrollViewProps & React.RefAttributes<Reanimated.ScrollView>
+>;
+
+type ScrollViewWithBottomPaddingProps = {
+  ScrollViewComponent: AnimatedScrollViewComponent;
+  children?: React.ReactNode;
+  bottomPadding: SharedValue<number>;
+} & ScrollViewProps;
+
+const ScrollViewWithBottomPadding = forwardRef<
+  Reanimated.ScrollView,
+  ScrollViewWithBottomPaddingProps
+>(
+  (
+    { ScrollViewComponent, bottomPadding, contentInset, children, ...rest },
+    ref,
+  ) => {
+    const animatedProps = useAnimatedProps(
+      () => ({
+        // iOS prop
+        contentInset: {
+          bottom: bottomPadding.value + (contentInset?.bottom || 0),
+          top: contentInset?.top,
+          right: contentInset?.right,
+          left: contentInset?.left,
+        },
+        // Android prop
+        contentInsetBottom: bottomPadding.value,
+      }),
+      [
+        contentInset?.bottom,
+        contentInset?.top,
+        contentInset?.right,
+        contentInset?.left,
+      ],
+    );
+
+    return (
+      <ReanimatedClippingScrollView
+        animatedProps={animatedProps}
+        style={styles.container}
+      >
+        <ScrollViewComponent ref={ref} animatedProps={animatedProps} {...rest}>
+          {children}
+        </ScrollViewComponent>
+      </ReanimatedClippingScrollView>
+    );
+  },
+);
+
+export default ScrollViewWithBottomPadding;

src/components/ScrollViewWithBottomPadding/styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default styles;