diff --git a/FabricExample/src/screens/Examples/AILegendListChat/KeyboardChatLegendList.tsx b/FabricExample/src/screens/Examples/AILegendListChat/KeyboardChatLegendList.tsx index e0bb293ee7..694d90787d 100644 --- a/FabricExample/src/screens/Examples/AILegendListChat/KeyboardChatLegendList.tsx +++ b/FabricExample/src/screens/Examples/AILegendListChat/KeyboardChatLegendList.tsx @@ -44,11 +44,11 @@ export const KeyboardChatLegendList = typedForwardRef( const refLegendList = useRef(null); const combinedRef = useCombinedRef(forwardedRef, refLegendList); - const minimumContentPadding = useSharedValue(0); + const blankSpace = useSharedValue(0); const calculateTopItemInset = useCallback(() => { if (anchorToTopIndex === undefined || anchorToTopIndex < 0) { - minimumContentPadding.value = 0; + blankSpace.value = 0; refLegendList.current?.reportContentInset(null); return; @@ -79,7 +79,7 @@ export const KeyboardChatLegendList = typedForwardRef( state.scrollLength - contentBelowTopItem, ); - minimumContentPadding.value = calculatedInset; + blankSpace.value = calculatedInset; refLegendList.current?.reportContentInset({ bottom: calculatedInset }); }, [anchorToTopIndex]); @@ -121,12 +121,12 @@ export const KeyboardChatLegendList = typedForwardRef( ); }, - [minimumContentPadding, extraContentPadding], + [blankSpace, extraContentPadding], ); return ( diff --git a/docs/docs/api/components/keyboard-chat-scroll-view.mdx b/docs/docs/api/components/keyboard-chat-scroll-view.mdx index 3e57acb516..3cd5c95505 100644 --- a/docs/docs/api/components/keyboard-chat-scroll-view.mdx +++ b/docs/docs/api/components/keyboard-chat-scroll-view.mdx @@ -113,38 +113,38 @@ This uses Objective-C runtime method swizzling on the ScrollView's container vie This prop uses runtime method swizzling, which can be fragile and may conflict with other libraries or future React Native versions. Use with caution and thoroughly test your app when enabling this workaround. ::: -### `minimumContentPadding` +### `blankSpace` A [Reanimated `SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/) representing a minimum inset floor for the bottom padding. When set, the total bottom padding is computed as: ```js -max(minimumContentPadding, keyboardPadding + extraContentPadding); +max(blankSpace, keyboardPadding + extraContentPadding); ``` This means the keyboard "absorbs" into the minimum padding rather than adding to it: -#### When `minimumContentPadding >= keyboard + extraContentPadding` +#### When `blankSpace >= keyboard + extraContentPadding` Content does **not** move when the keyboard opens or closes — the minimum padding is large enough to absorb the keyboard height.