feat: add ClippingScrollView component#1289
Merged
kirillzyusko merged 2 commits intomainfrom Jan 28, 2026
Merged
Conversation
kirillzyusko
added
enhancement
Contributor
📊 Package size report
|
2 tasks
kirillzyusko
added a commit
that referenced
this pull request
Jan 29, 2026
## 📜 Description Added `ScrollViewWithBottomPadding` component. ## 💡 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 `KeyboardAwareScrollView` and future `ChatKit` component. ## 📢 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 `ScrollViewWithBottomPadding` component; ## 🤔 How Has This Been Tested? Tested manually in example project. At the moment not used in the package, but will be eventually used in `KeyboardAwareScrollView` and `ChatKit`. ## 📸 Screenshots (if appropriate): |KeyboardAwareScrollView|Non inverted chat list| |--------------------------|---------------------| |<video src="https://github.com/user-attachments/assets/0f7efef7-ec15-4fe6-96cb-40334f0c91ad">|<video src="https://github.com/user-attachments/assets/92093e87-434a-4c82-91d5-1c7e9706e5f0">| ## 📝 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
ClippingScrollViewcomponent (on Android only) that is supposed to act as a polyfill forcontentInset: {bottom}property ofScrollView.💡 Motivation and Context
Those changes are based on my PR from facebook/react-native#49145
The big problem with original PR is that it wasn't working correctly, if we specify all insets/paddings simultaneously. But! It worked well for
bottominset property (keyboard-controller case, because keyboard appears from the bottom of the screen). I think it's risky to ship a code in this state into facebook codebase, so I decided to add those changes intoreact-native-keyboard-controllerfirst. It's good because:The approach that I've choose is based on "decorator" approach - this approach has been used in many other libs, such as
advanced-input-mask,live-markdownetc. The idea is that we create our custom view that wraps our target view and then we access a target view as a children (and we can modify behavior/props of this view).I'm going to use this component in
KeyboardAwareScrollViewand in newChatKitcomponent. From lessons learned from the previous experience I can confidently say, that additional view near children will cause issues and this polyfill forcontentInset: {bottom}should hopefully solve all the issues that we had. I'll continue experiments with this view in #797📢 Changelog
JS
Android
ClippingScrollView;🤔 How Has This Been Tested?
Tested in example app in
KeyboardAwareScrollViewscreen and in new component that is currently under active development 😊 Everywhere works stable on both architectures 🤞📸 Screenshots (if appropriate):
telegram-cloud-document-2-5463118136163211010.mp4
telegram-cloud-document-2-5463118136163211009.mp4
📝 Checklist