feat: add ClippingScrollView component (#1289)

## 📜 Description

Added `ClippingScrollView` component (on Android only) that is supposed
to act as a polyfill for `contentInset: {bottom}` property of
`ScrollView`.

## 💡 Motivation and Context

Those changes are based on my PR from
react/react-native#49145

The big problem with original PR is that it wasn't working correctly, if
we specify all insets/paddings simultaneously. But! It worked well for
`bottom` inset property (keyboard-controller case, because keyboard
appears from the bottom of the screen). I think it's risky to ship a
code in this state into facebook codebase, so I decided to add those
changes into `react-native-keyboard-controller` first. It's good
because:

- I have a full ownership of the code and I can fix bugs quickly
(without waiting for a new RN release);
- we don't ship buggy code in react-native repository;
- we don't depend on react-native version and we don't need to write a
conditional code, like "if prop is supported, then use new approach and
if not, then fallback to old implementation".

The approach that I've choose is based on "decorator" approach - this
approach has been used in many other libs, such as
`advanced-input-mask`, `live-markdown` etc. The idea is that we create
our custom view that wraps our target view and then we access a target
view as a children (and we can modify behavior/props of this view).

I'm going to use this component in `KeyboardAwareScrollView` and in new
`ChatKit` component. From lessons learned from the previous experience I
can confidently say, that additional view near children will cause
issues and this polyfill for `contentInset: {bottom}` should hopefully
solve all the issues that we had. I'll continue experiments with this
view in
#797

## 📢 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 codegen component;
- added new types props for new component;
- added jsdoc for new component;

### Android

- added `ClippingScrollView`;

## 🤔 How Has This Been Tested?

Tested in example app in `KeyboardAwareScrollView` screen and in new
component that is currently under active development 😊 Everywhere works
stable on both architectures 🤞

## 📸 Screenshots (if appropriate):

|KeyboardAwareScollView|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

android/src/base/java/com/reactnativekeyboardcontroller/KeyboardControllerPackage.kt

@@ -8,6 +8,7 @@ import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
 import com.reactnativekeyboardcontroller.modules.KeyboardControllerModuleImpl
 import com.reactnativekeyboardcontroller.modules.statusbar.StatusBarManagerCompatModuleImpl
+import java.com.reactnativekeyboardcontroller.ClippingScrollViewDecoratorViewManager
 
 class KeyboardControllerPackage : BaseReactPackage() {
   override fun getModule(
@@ -58,5 +59,6 @@ class KeyboardControllerPackage : BaseReactPackage() {
       KeyboardGestureAreaViewManager(),
       OverKeyboardViewManager(),
       KeyboardBackgroundViewManager(),
+      ClippingScrollViewDecoratorViewManager(),
     )
 }

android/src/fabric/java/com/reactnativekeyboardcontroller/ClippingScrollViewDecoratorViewManager.kt

@@ -0,0 +1,30 @@
+package java.com.reactnativekeyboardcontroller
+
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.ClippingScrollViewDecoratorViewManagerDelegate
+import com.facebook.react.viewmanagers.ClippingScrollViewDecoratorViewManagerInterface
+import com.reactnativekeyboardcontroller.managers.ClippingScrollViewDecoratorViewManagerImpl
+import com.reactnativekeyboardcontroller.views.ClippingScrollViewDecoratorView
+
+class ClippingScrollViewDecoratorViewManager :
+  ViewGroupManager<ClippingScrollViewDecoratorView>(),
+  ClippingScrollViewDecoratorViewManagerInterface<ClippingScrollViewDecoratorView> {
+  private val manager = ClippingScrollViewDecoratorViewManagerImpl()
+  private val mDelegate = ClippingScrollViewDecoratorViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<ClippingScrollViewDecoratorView> = mDelegate
+
+  override fun getName(): String = ClippingScrollViewDecoratorViewManagerImpl.NAME
+
+  override fun createViewInstance(context: ThemedReactContext): ClippingScrollViewDecoratorView =
+    manager.createViewInstance(context)
+
+  override fun setContentInsetBottom(
+    view: ClippingScrollViewDecoratorView?,
+    value: Double,
+  ) {
+    view?.setContentInsetBottom(value)
+  }
+}

android/src/main/java/com/reactnativekeyboardcontroller/managers/ClippingScrollViewDecoratorViewManagerImpl.kt

@@ -0,0 +1,13 @@
+package com.reactnativekeyboardcontroller.managers
+
+import com.facebook.react.uimanager.ThemedReactContext
+import com.reactnativekeyboardcontroller.views.ClippingScrollViewDecoratorView
+
+class ClippingScrollViewDecoratorViewManagerImpl {
+  fun createViewInstance(reactContext: ThemedReactContext): ClippingScrollViewDecoratorView =
+    ClippingScrollViewDecoratorView(reactContext)
+
+  companion object {
+    const val NAME = "ClippingScrollViewDecoratorView"
+  }
+}

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

@@ -0,0 +1,37 @@
+package com.reactnativekeyboardcontroller.views
+
+import android.annotation.SuppressLint
+import android.widget.ScrollView
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+import com.reactnativekeyboardcontroller.extensions.px
+
+@SuppressLint("ViewConstructor")
+class ClippingScrollViewDecoratorView(
+  val reactContext: ThemedReactContext,
+) : ReactViewGroup(reactContext) {
+  private var insetBottom = 0.0
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+
+    decorateScrollView()
+  }
+
+  fun setContentInsetBottom(value: Double) {
+    insetBottom = value
+    decorateScrollView()
+  }
+
+  private fun decorateScrollView() {
+    val scrollView = getChildAt(0) as? ScrollView
+
+    scrollView?.clipToPadding = false
+    scrollView?.setPadding(
+      scrollView.paddingLeft,
+      scrollView.paddingTop,
+      scrollView.paddingRight,
+      insetBottom.toFloat().px.toInt(),
+    )
+  }
+}

android/src/paper/java/com/reactnativekeyboardcontroller/ClippingScrollViewDecoratorViewManager.kt

@@ -0,0 +1,24 @@
+package java.com.reactnativekeyboardcontroller
+
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.reactnativekeyboardcontroller.managers.ClippingScrollViewDecoratorViewManagerImpl
+import com.reactnativekeyboardcontroller.views.ClippingScrollViewDecoratorView
+
+class ClippingScrollViewDecoratorViewManager : ViewGroupManager<ClippingScrollViewDecoratorView>() {
+  private val manager = ClippingScrollViewDecoratorViewManagerImpl()
+
+  override fun getName(): String = ClippingScrollViewDecoratorViewManagerImpl.NAME
+
+  override fun createViewInstance(reactContext: ThemedReactContext): ClippingScrollViewDecoratorView =
+    manager.createViewInstance(reactContext)
+
+  @ReactProp(name = "contentInsetBottom")
+  fun setContentInsetBottom(
+    view: ClippingScrollViewDecoratorView,
+    value: Double,
+  ) {
+    view.setContentInsetBottom(value)
+  }
+}

src/bindings.native.ts

@@ -1,6 +1,7 @@
 import { NativeEventEmitter, Platform } from "react-native";
 
 import type {
+  ClippingScrollViewProps,
   FocusedInputEventsModule,
   KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
@@ -71,3 +72,7 @@ export const RCTKeyboardExtender: React.FC<KeyboardExtenderProps> =
   Platform.OS === "ios"
     ? require("./specs/KeyboardExtenderNativeComponent").default
     : ({ children }: KeyboardExtenderProps) => children;
+export const ClippingScrollView: React.FC<KeyboardBackgroundViewProps> =
+  Platform.OS === "android"
+    ? require("./specs/ClippingScrollViewDecoratorViewNativeComponent").default
+    : ({ children }: ClippingScrollViewProps) => children;

src/bindings.ts

@@ -1,6 +1,7 @@
 import { View } from "react-native";
 
 import type {
+  ClippingScrollViewProps,
   FocusedInputEventsModule,
   KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
@@ -82,3 +83,10 @@ export const KeyboardBackgroundView =
  */
 export const RCTKeyboardExtender =
   View as unknown as React.FC<KeyboardExtenderProps>;
+/**
+ * A decorator that will clip the content of the `ScrollView`. It helps to simulate `contentInset` behavior on Android.
+ * Supports only `bottom` property (`paddingBottom` is not supported property of `ScrollView.style`).
+ * Using this component we can modify bottom inset without having a fake view.
+ */
+export const ClippingScrollView =
+  View as unknown as React.FC<ClippingScrollViewProps>;

src/specs/ClippingScrollViewDecoratorViewNativeComponent.ts

@@ -0,0 +1,17 @@
+import { codegenNativeComponent } from "react-native";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native";
+import type { Double } from "react-native/Libraries/Types/CodegenTypes";
+
+export interface NativeProps extends ViewProps {
+  contentInsetBottom: Double;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "ClippingScrollViewDecoratorView",
+  {
+    interfaceOnly: true,
+    excludedPlatforms: ["iOS"],
+  },
+) as HostComponent<NativeProps>;

src/types/views.ts

@@ -49,3 +49,9 @@ export type KeyboardExtenderProps = PropsWithChildren<{
   /** Controls whether this `KeyboardExtender` instance should take an effect. Default is `true`. */
   enabled?: boolean;
 }>;
+export type ClippingScrollViewProps = PropsWithChildren<
+  ViewProps & {
+    /** An additional space that gets applied to the bottom of the `ScrollView` (inside a scrollable content). Default is `0`. */
+    contentInsetBottom?: number;
+  }
+>;