Decouple scrollIndicatorInsets from contentInset in KeyboardChatScrollView

Previously, scrollIndicatorInsets matched contentInset, which included
blankSize. This caused the scroll indicator to end halfway down the
screen when blankSize was large.

Add a scrollIndicatorPadding prop to ScrollViewWithBottomPadding that
computes indicator insets from keyboard + extraContentPadding only,
excluding blankSize. User-supplied scrollIndicatorInsets.bottom/top
are now additive adjustments (previously silently ignored).

Update AILegendListChat example to pass a negative safe area bottom
adjustment for apps that render into the unsafe area.

Author: trcoffman

FabricExample/src/screens/Examples/AILegendListChat/index.tsx

@@ -352,6 +352,7 @@ const AIChat = () => {
             keyExtractor={(_item, index) => `item-${index}`}
             maintainScrollAtEnd={Platform.OS === "web"}
             offset={insets.bottom}
+            scrollIndicatorInsets={{ bottom: -insets.bottom }}
             renderItem={({ item }) => (
               <View>
                 {item.sender === "user" ? (

src/components/KeyboardChatScrollView/index.tsx

@@ -87,6 +87,13 @@ const KeyboardChatScrollView = forwardRef<
       ),
     );
 
+    // Scroll indicator inset = keyboard + ecp (excludes blankSize).
+    // Apps that render into the unsafe area can supply a negative
+    // scrollIndicatorInsets adjustment at the application layer.
+    const indicatorPadding = useDerivedValue(
+      () => padding.value + effectiveExtraContentPadding.value,
+    );
+
     const onLayout = useCallback(
       (e: LayoutChangeEvent) => {
         onLayoutInternal(e);
@@ -124,6 +131,7 @@ const KeyboardChatScrollView = forwardRef<
           ref={onRef}
           {...rest}
           bottomPadding={totalPadding}
+          scrollIndicatorPadding={indicatorPadding}
           contentOffsetY={contentOffsetY}
           inverted={inverted}
           ScrollViewComponent={ScrollViewComponent}

src/components/ScrollViewWithBottomPadding/index.tsx

@@ -31,6 +31,8 @@ type ScrollViewWithBottomPaddingProps = {
   children?: React.ReactNode;
   inverted?: boolean;
   bottomPadding: SharedValue<number>;
+  /** Padding for scroll indicator insets (excludes blankSize). Falls back to bottomPadding when not provided. */
+  scrollIndicatorPadding?: SharedValue<number>;
   /** Absolute Y content offset (iOS only, for KeyboardChatScrollView). */
   contentOffsetY?: SharedValue<number>;
 } & ScrollViewProps;
@@ -43,6 +45,7 @@ const ScrollViewWithBottomPadding = forwardRef<
     {
       ScrollViewComponent,
       bottomPadding,
+      scrollIndicatorPadding,
       contentInset,
       scrollIndicatorInsets,
       inverted,
@@ -60,6 +63,14 @@ const ScrollViewWithBottomPadding = forwardRef<
       const bottom = insetBottom + (contentInset?.bottom || 0);
       const top = insetTop + (contentInset?.top || 0);
 
+      const indicatorPad = scrollIndicatorPadding ?? bottomPadding;
+      const indicatorTop =
+        (inverted ? indicatorPad.value : 0) +
+        (scrollIndicatorInsets?.top || 0);
+      const indicatorBottom =
+        (!inverted ? indicatorPad.value : 0) +
+        (scrollIndicatorInsets?.bottom || 0);
+
       const result: Record<string, unknown> = {
         // iOS prop
         contentInset: {
@@ -69,8 +80,8 @@ const ScrollViewWithBottomPadding = forwardRef<
           left: contentInset?.left,
         },
         scrollIndicatorInsets: {
-          bottom: bottom,
-          top: top,
+          bottom: indicatorBottom,
+          top: indicatorTop,
           right: scrollIndicatorInsets?.right,
           left: scrollIndicatorInsets?.left,
         },