From dfd934ff34b095ee6f61f3c4def08ac4e036050c Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Sat, 14 Mar 2026 14:00:18 +0100 Subject: [PATCH 1/2] refactor: rename `minimumContentPadding` to `blankSpace` --- .../KeyboardChatLegendList.tsx | 10 +++--- .../components/keyboard-chat-scroll-view.mdx | 16 ++++----- ...aterThan.mp4 => blankSpaceGreaterThan.mp4} | Bin ...ingLessThan.mp4 => blankSpaceLessThan.mp4} | Bin .../KeyboardChatLegendList.tsx | 10 +++--- .../KeyboardChatScrollView/index.tsx | 12 +++---- .../KeyboardChatScrollView/types.ts | 8 ++--- .../useChatKeyboard/__fixtures__/testUtils.ts | 6 ++-- ...oid.spec.ts => blankSpace.android.spec.ts} | 34 +++++++++--------- ...ing.ios.spec.ts => blankSpace.ios.spec.ts} | 32 ++++++++--------- .../useChatKeyboard/__tests__/helpers.spec.ts | 8 ++--- .../useChatKeyboard/helpers.ts | 20 +++++------ .../useChatKeyboard/index.ios.ts | 10 +++--- .../useChatKeyboard/index.ts | 22 ++++++------ .../useChatKeyboard/types.ts | 2 +- .../__fixtures__/setup.ts | 6 ++-- ...tentPadding.spec.ts => blankSpace.spec.ts} | 22 ++++++------ .../useExtraContentPadding/index.ts | 12 +++---- .../ScrollViewWithBottomPadding/index.tsx | 2 +- 19 files changed, 116 insertions(+), 116 deletions(-) rename docs/static/video/keyboard-chat-scroll-view/{minimumContentPaddingGreaterThan.mp4 => blankSpaceGreaterThan.mp4} (100%) rename docs/static/video/keyboard-chat-scroll-view/{minimumContentPaddingLessThan.mp4 => blankSpaceLessThan.mp4} (100%) rename src/components/KeyboardChatScrollView/useChatKeyboard/__tests__/{minimumContentPadding.android.spec.ts => blankSpace.android.spec.ts} (84%) rename src/components/KeyboardChatScrollView/useChatKeyboard/__tests__/{minimumContentPadding.ios.spec.ts => blankSpace.ios.spec.ts} (87%) rename src/components/KeyboardChatScrollView/useExtraContentPadding/__tests__/{minimumContentPadding.spec.ts => blankSpace.spec.ts} (82%) diff --git a/FabricExample/src/screens/Examples/AILegendListChat/KeyboardChatLegendList.tsx b/FabricExample/src/screens/Examples/AILegendListChat/KeyboardChatLegendList.tsx index e0bb293ee7..14cdae4000 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]); @@ -122,11 +122,11 @@ export const KeyboardChatLegendList = typedForwardRef( {...scrollProps} applyWorkaroundForContentInsetHitTestBug extraContentPadding={extraContentPadding} - minimumContentPadding={minimumContentPadding} + blankSpace={blankSpace} /> ); }, - [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.