fix: truncated content in Flash/Legend list in KeyboardChatScrollView example (#1326)

## 📜 Description

Fixed Flash/Legend content partial obscure in `KeyboardChatScrollView`.

## 💡 Motivation and Context

Somehow skipped this during initial implementation. Fixing it now 👀 

Closes
#1323

## 📢 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

- specify `contentContainerStyle` on `list` level (not underlying
`ScrollView`)

## 🤔 How Has This Been Tested?

Tested manually on iPhone 17 Pro.

## 📸 Screenshots (if appropriate):

|Before|After|
|-------|-----|
|<img width="1206" height="2622" alt="image"
src="https://github.com/user-attachments/assets/1260f765-998b-4167-94b6-fd67becd3061"
/>|<img width="1206" height="2622" alt="image"
src="https://github.com/user-attachments/assets/a2005e3e-4dcc-4bdb-a2d9-66b93e91e933"
/>|

## 📝 Checklist

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

Author: kirillzyusko

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useState } from "react";
 import {
   type LayoutChangeEvent,
   type ScrollViewProps,
@@ -9,7 +9,11 @@ import { KeyboardChatScrollView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { useChatConfigStore } from "./store";
-import { MARGIN, TEXT_INPUT_HEIGHT } from "./styles";
+import {
+  MARGIN,
+  contentContainerStyle,
+  invertedContentContainerStyle,
+} from "./styles";
 
 export type VirtualizedListScrollViewRef = React.ElementRef<
   typeof KeyboardChatScrollView
@@ -25,14 +29,6 @@ const VirtualizedListScrollView = forwardRef<
 
   const { inverted, freeze, mode, keyboardLiftBehavior } = useChatConfigStore();
 
-  const contentContainerStyle = useMemo(
-    () => ({ paddingBottom: TEXT_INPUT_HEIGHT + MARGIN }),
-    [],
-  );
-  const invertedContentContainerStyle = useMemo(
-    () => ({ paddingTop: TEXT_INPUT_HEIGHT + MARGIN }),
-    [],
-  );
   // on new arch only FlatList supports `inverted` prop
   const isInvertedSupported = inverted && mode === "flat" ? inverted : false;
   const onLayout = useCallback(

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

@@ -29,7 +29,11 @@ import BlurView from "../../../components/BlurView";
 import Message from "./components/Message";
 import ConfigSheet from "./config";
 import { useChatConfigStore } from "./store";
-import styles, { MARGIN, TEXT_INPUT_HEIGHT } from "./styles";
+import styles, {
+  MARGIN,
+  TEXT_INPUT_HEIGHT,
+  contentContainerStyle,
+} from "./styles";
 import VirtualizedListScrollView, {
   type VirtualizedListScrollViewRef,
 } from "./VirtualizedListScrollView";
@@ -102,6 +106,7 @@ function KeyboardChatScrollViewPlayground() {
           <LegendList
             ref={legendRef}
             alignItemsAtEnd={inverted}
+            contentContainerStyle={contentContainerStyle}
             data={messages}
             initialScrollAtEnd={inverted}
             keyExtractor={(item) => item.text}
@@ -112,6 +117,7 @@ function KeyboardChatScrollViewPlayground() {
         {mode === "flash" && (
           <FlashList
             ref={flashRef}
+            contentContainerStyle={contentContainerStyle}
             data={messages}
             keyExtractor={(item) => item.text}
             maintainVisibleContentPosition={{

FabricExample/src/screens/Examples/KeyboardChatScrollView/styles.ts

@@ -42,3 +42,9 @@ export default StyleSheet.create({
     height: 20,
   },
 });
+export const contentContainerStyle = {
+  paddingBottom: TEXT_INPUT_HEIGHT + MARGIN,
+};
+export const invertedContentContainerStyle = {
+  paddingTop: TEXT_INPUT_HEIGHT + MARGIN,
+};

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useState } from "react";
 import {
   type LayoutChangeEvent,
   type ScrollViewProps,
@@ -9,7 +9,11 @@ import { KeyboardChatScrollView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { useChatConfigStore } from "./store";
-import { MARGIN, TEXT_INPUT_HEIGHT } from "./styles";
+import {
+  MARGIN,
+  contentContainerStyle,
+  invertedContentContainerStyle,
+} from "./styles";
 
 export type VirtualizedListScrollViewRef = React.ElementRef<
   typeof KeyboardChatScrollView
@@ -25,14 +29,6 @@ const VirtualizedListScrollView = forwardRef<
 
   const { inverted, freeze, mode, keyboardLiftBehavior } = useChatConfigStore();
 
-  const contentContainerStyle = useMemo(
-    () => ({ paddingBottom: TEXT_INPUT_HEIGHT + MARGIN }),
-    [],
-  );
-  const invertedContentContainerStyle = useMemo(
-    () => ({ paddingTop: TEXT_INPUT_HEIGHT + MARGIN }),
-    [],
-  );
   // on old arch only FlatList and FlashList supports `inverted` prop
   const isInvertedSupported =
     inverted && (mode === "flat" || mode === "flash") ? inverted : false;

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

@@ -29,7 +29,12 @@ import BlurView from "../../../components/BlurView";
 import Message from "./components/Message";
 import ConfigSheet from "./config";
 import { useChatConfigStore } from "./store";
-import styles, { MARGIN, TEXT_INPUT_HEIGHT } from "./styles";
+import styles, {
+  MARGIN,
+  TEXT_INPUT_HEIGHT,
+  contentContainerStyle,
+  invertedContentContainerStyle,
+} from "./styles";
 import VirtualizedListScrollView, {
   type VirtualizedListScrollViewRef,
 } from "./VirtualizedListScrollView";
@@ -102,6 +107,7 @@ function KeyboardChatScrollViewPlayground() {
           <LegendList
             ref={legendRef}
             alignItemsAtEnd={inverted}
+            contentContainerStyle={contentContainerStyle}
             data={messages}
             keyExtractor={(item) => item.text}
             renderItem={({ item }) => <Message {...item} />}
@@ -111,6 +117,9 @@ function KeyboardChatScrollViewPlayground() {
         {mode === "flash" && (
           <FlashList
             ref={flashRef}
+            contentContainerStyle={
+              inverted ? invertedContentContainerStyle : contentContainerStyle
+            }
             data={inverted ? reversedMessages : messages}
             inverted={inverted}
             keyExtractor={(item) => item.text}

example/src/screens/Examples/KeyboardChatScrollView/styles.ts

@@ -42,3 +42,9 @@ export default StyleSheet.create({
     height: 20,
   },
 });
+export const contentContainerStyle = {
+  paddingBottom: TEXT_INPUT_HEIGHT + MARGIN,
+};
+export const invertedContentContainerStyle = {
+  paddingTop: TEXT_INPUT_HEIGHT + MARGIN,
+};