experimental: enable polyfill for inverted mode (compensate with translateY + scrollTo)

Author: kirillzyusko

FabricExample/src/screens/Examples/KeyboardChatScrollView/config.tsx

@@ -136,7 +136,7 @@ function ConfigSheet() {
             testID="bottom_sheet_next_keyboard_lift_behavior"
             onPress={nextLiftBehavior}
           >
-            <Text>{keyboardLiftBehavior}</Text>
+            <Text style={styles.text}>{keyboardLiftBehavior}</Text>
           </TouchableOpacity>
         </View>
       </BottomSheetView>

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

@@ -27,4 +27,11 @@ class ClippingScrollViewDecoratorViewManager :
   ) {
     view?.setContentInsetBottom(value)
   }
+
+  override fun setContentInsetTop(
+    view: ClippingScrollViewDecoratorView?,
+    value: Double,
+  ) {
+    view?.setContentInsetTop(value)
+  }
 }

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

@@ -1,6 +1,7 @@
 package com.reactnativekeyboardcontroller.views
 
 import android.annotation.SuppressLint
+import android.view.ViewGroup
 import android.widget.ScrollView
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
@@ -11,6 +12,8 @@ class ClippingScrollViewDecoratorView(
   val reactContext: ThemedReactContext,
 ) : ReactViewGroup(reactContext) {
   private var insetBottom = 0.0
+  private var insetTop = 0.0
+  private var appliedTopInsetPx = 0
 
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
@@ -23,15 +26,39 @@ class ClippingScrollViewDecoratorView(
     decorateScrollView()
   }
 
+  fun setContentInsetTop(value: Double) {
+    insetTop = value
+    decorateScrollView()
+  }
+
   private fun decorateScrollView() {
     val scrollView = getChildAt(0) as? ScrollView ?: return
 
     scrollView.clipToPadding = false
+
+    val newTopInsetPx = insetTop.toFloat().px.toInt()
+
+    // Translate the content view as a whole — this keeps FlatList's
+    // virtualizer calculations correct (it reads layout positions,
+    // not translationY).
+    val contentView = scrollView.getChildAt(0) as? ViewGroup ?: return
+    (contentView.getChildAt(0) as? ViewGroup)?.translationY = newTopInsetPx.toFloat()
+
     scrollView.setPadding(
       scrollView.paddingLeft,
       scrollView.paddingTop,
       scrollView.paddingRight,
-      insetBottom.toFloat().px.toInt(),
+      // pass accumulated value — visually both top and bottom insets
+      // extend the scroll range via bottom padding
+      (insetBottom + insetTop).toFloat().px.toInt(),
     )
+
+    // scroll by the delta to keep content visually in place
+    val delta = newTopInsetPx - appliedTopInsetPx
+    if (delta != 0) {
+      scrollView.scrollBy(0, delta)
+    }
+
+    appliedTopInsetPx = newTopInsetPx
   }
 }

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

@@ -21,4 +21,12 @@ class ClippingScrollViewDecoratorViewManager : ViewGroupManager<ClippingScrollVi
   ) {
     view.setContentInsetBottom(value)
   }
+
+  @ReactProp(name = "contentInsetTop")
+  fun setContentInsetTop(
+    view: ClippingScrollViewDecoratorView,
+    value: Double,
+  ) {
+    view.setContentInsetTop(value)
+  }
 }

example/src/screens/Examples/KeyboardChatScrollView/config.tsx

@@ -136,7 +136,7 @@ function ConfigSheet() {
             testID="bottom_sheet_next_keyboard_lift_behavior"
             onPress={nextLiftBehavior}
           >
-            <Text>{keyboardLiftBehavior}</Text>
+            <Text style={styles.text}>{keyboardLiftBehavior}</Text>
           </TouchableOpacity>
         </View>
       </BottomSheetView>

src/components/KeyboardChatScrollView/index.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useAnimatedRef, useAnimatedStyle } from "react-native-reanimated";
+import { View } from "react-native";
+import { useAnimatedRef } from "react-native-reanimated";
 import Reanimated from "react-native-reanimated";
 
 import useCombinedRef from "../hooks/useCombinedRef";
@@ -28,29 +29,33 @@ const KeyboardChatScrollView = forwardRef<
     const scrollViewRef = useAnimatedRef<Reanimated.ScrollView>();
     const onRef = useCombinedRef(ref, scrollViewRef);
 
-    const { padding, contentOffsetY, containerTranslateY } = useChatKeyboard(
-      scrollViewRef,
-      { inverted, keyboardLiftBehavior, freeze, offset },
-    );
-
-    const containerStyle = useAnimatedStyle(
-      () => ({
-        transform: [{ translateY: containerTranslateY.value }],
-      }),
-      [],
-    );
+    const { padding, contentOffsetY } = useChatKeyboard(scrollViewRef, {
+      inverted,
+      keyboardLiftBehavior,
+      freeze,
+      offset,
+    });
 
     return (
       <ScrollViewWithBottomPadding
         ref={onRef}
         {...rest}
         bottomPadding={padding}
-        containerStyle={containerStyle}
         contentOffsetY={contentOffsetY}
         inverted={inverted}
         ScrollViewComponent={ScrollViewComponent}
       >
-        {children}
+        {inverted ? (
+          // The only thing it can break is `StickyHeader`, but it's already broken in FlatList and other lists
+          // don't support this functionality, so we can add additional view here
+          // The correct fix would be to add a new prop in ScrollView that allows
+          // to customize children extraction logic and skip custom view
+          <View collapsable={false} nativeID="container">
+            {children}
+          </View>
+        ) : (
+          children
+        )}
       </ScrollViewWithBottomPadding>
     );
   },

src/components/KeyboardChatScrollView/useChatKeyboard/index.ts

@@ -26,7 +26,7 @@ type UseChatKeyboardOptions = {
 };
 
 type UseChatKeyboardReturn = {
-  /** Extra scrollable space (= keyboard height). Used as contentInset on iOS, contentInsetBottom on Android. */
+  /** Extra scrollable space (= keyboard height). Used as contentInset on iOS, contentInsetBottom/contentInsetTop on Android. */
   padding: SharedValue<number>;
   /** Absolute Y content offset for iOS (set once in onStart). `undefined` on Android. */
   contentOffsetY: SharedValue<number> | undefined;

src/components/ScrollViewWithBottomPadding/index.tsx

@@ -6,7 +6,7 @@ import { ClippingScrollView } from "../../bindings";
 
 import styles from "./styles";
 
-import type { ScrollViewProps, StyleProp, ViewStyle } from "react-native";
+import type { ScrollViewProps } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 
 const OS = Platform.OS;
@@ -30,8 +30,6 @@ type ScrollViewWithBottomPaddingProps = {
   bottomPadding: SharedValue<number>;
   /** Absolute Y content offset (iOS only, for KeyboardChatScrollView). */
   contentOffsetY?: SharedValue<number>;
-  /** Style applied to the container wrapper (Android only, for KeyboardChatScrollView translateY). */
-  containerStyle?: StyleProp<ViewStyle>;
 } & ScrollViewProps;
 
 const ScrollViewWithBottomPadding = forwardRef<
@@ -46,9 +44,7 @@ const ScrollViewWithBottomPadding = forwardRef<
       scrollIndicatorInsets,
       inverted,
       contentOffsetY,
-      containerStyle,
       children,
-      style,
       ...rest
     },
     ref,
@@ -75,8 +71,10 @@ const ScrollViewWithBottomPadding = forwardRef<
           right: scrollIndicatorInsets?.right,
           left: scrollIndicatorInsets?.left,
         },
+        // TODO: now it duplicates the logic with content insets
         // Android prop
-        contentInsetBottom: bottomPadding.value,
+        contentInsetBottom: !inverted ? bottomPadding.value : 0,
+        contentInsetTop: inverted ? bottomPadding.value : 0,
       };
 
       if (contentOffsetY) {
@@ -100,17 +98,9 @@ const ScrollViewWithBottomPadding = forwardRef<
     return (
       <ReanimatedClippingScrollView
         animatedProps={animatedProps}
-        style={[
-          styles.container,
-          OS === "android" ? containerStyle : undefined,
-        ]}
+        style={styles.container}
       >
-        <ScrollViewComponent
-          ref={ref}
-          animatedProps={animatedProps}
-          style={style}
-          {...rest}
-        >
+        <ScrollViewComponent ref={ref} animatedProps={animatedProps} {...rest}>
           {children}
         </ScrollViewComponent>
       </ReanimatedClippingScrollView>

src/specs/ClippingScrollViewDecoratorViewNativeComponent.ts

@@ -6,6 +6,7 @@ import type { Double } from "react-native/Libraries/Types/CodegenTypes";
 
 export interface NativeProps extends ViewProps {
   contentInsetBottom: Double;
+  contentInsetTop: Double;
 }
 
 export default codegenNativeComponent<NativeProps>(

src/types/views.ts

@@ -53,5 +53,7 @@ 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;
+    /** An additional space that gets applied to the top of the `ScrollView` (inside a scrollable content). Default is `0`. */
+    contentInsetTop?: number;
   }
 >;