feat: add ScrollViewWithBottomPadding component#1294
Merged
Conversation
Contributor
📊 Package size report
|
2 tasks
kirillzyusko
added a commit
that referenced
this pull request
Feb 1, 2026
## 📜 Description Use `ScrollViewWithBottomPadding` component for `KeyboardAwareScrollView` to optimize performance and fix other issues that were caused by the fact of usage additional view inside `ScrollView`. ## 💡 Motivation and Context In this PR I'm moving away from the idea of having a fake view in the end of the `ScrollView` and instead start to use `ScrollViewWithBottomPadding` component to achieve a desired visual effect. The additional view causes many issues such as: - unintended layout shift if `flex: 1` style is used; - broken auto-grow for multiline input; - unexpected styling issues if you use `gap`/`justifyContent: "space-between"` and other properties. In this PR I'm switching to the component that has been added in #1294 With its new power I can achieve cross-platform behavior and: - without layout modification add a scrollable padding; - get the same behavior on both iOS/Android; - don't use any hidden children that can break something. This PR has been opened for a long time, but finally can be merged because I got working version on Android. Closes #794 #645 #929 #168 Potentially: #748 software-mansion/react-native-reanimated#5567 #719 Unlocks one item from #883 ## 📢 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 - added `useScrollState` hook; - use `ScrollViewWithBottomPadding` component in `KeyboardAwareScrollView`; - added `removeGhostPadding` in `KeyboardAwareScrollView` and use it there. ### E2E - update assets for `KeyboardToolbarClosed` test-case. ## 🤔 How Has This Been Tested? Tested manually on: - iPhone 17 Pro (iOS 26.2, simulator); - Pixel 7 Pro (API 36, real device); - e2e_emulator_28 (API 28, emulator);; - all e2e devices; ## 📸 Screenshots (if appropriate): |iOS|Android| |---|--------| |<video src="https://github.com/user-attachments/assets/adb98eb9-6ac0-436f-a5cc-3c795722401e">|<video src="https://github.com/user-attachments/assets/07c4b5db-da79-4167-9d3e-c064817bf6f3">| ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📜 Description
Added
ScrollViewWithBottomPaddingcomponent.💡 Motivation and Context
This PR is a logical continuation of #1289
In this PR I'm building a foundational component that adds scrollable padding on both iOS/Android without modifying layout. As a result it gives super smooth keyboard interactions, because we don't recalculate layout on each frame and we still add scrollable space. Also we achieve it without additional views, which is also super helpful, since we don't accidentally break styling.
This component will power next-gen implementation of
KeyboardAwareScrollViewand futureChatKitcomponent.📢 Changelog
JS
ScrollViewWithBottomPaddingcomponent;🤔 How Has This Been Tested?
Tested manually in example project. At the moment not used in the package, but will be eventually used in
KeyboardAwareScrollViewandChatKit.📸 Screenshots (if appropriate):
telegram-cloud-document-2-5463118136163211010.mp4
telegram-cloud-document-2-5463118136163211009.mp4
📝 Checklist