feat: support `contentInset` on Android by kirillzyusko · Pull Request #49145 · facebook/react-native

kirillzyusko · 2025-02-03T18:42:07Z

Summary:

At the moment contentInset property is available only on iOS. In this PR I'm adding the support for this property via applying additional padding directly to ScrollView native component.

Note: in this PR I handle only a case that is needed for react-native-keyboard-contoller and it may not work in other cases really well (I know that I overwrite other paddings potentially set by users, etc.), but... the purpose of this PR is to provide a rough idea (use padding to simulate contentInset behavior + setClipToPadding) and get a feedback, whether you'd like to have such changes or not 🙌

Changelog:

[ANDROID] [ADDED] - support contentInset on Android

Test Plan:

iOS	Android
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2025-02-03.at.19.18.35.mp4	telegram-cloud-document-2-5262625811495674255.mp4

cipolleschi

Hi @kirillzyusko, thanks for the PR.

Have you checked whether this works properly in the New Arch?

cipolleschi · 2025-02-04T09:10:56Z

...react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java

+    post(new Runnable() {
+      @Override
+      public void run() {
+        int maxScrollY = getMaxScrollY();
+        // If the current scroll offset is now beyond the new maximum,
+        // adjust it to the new maximum.
+        if (getScrollY() > maxScrollY) {
+          scrollTo(getScrollX(), maxScrollY);
+        }
+      }
+    });


would this show a flicker or an animation or does it happen immediately? 🤔

I'd say it happens immediately. Basically it fixes a very strange problem. Without this code problems looks like this:

telegram-cloud-document-2-5264877611309358434.mp4

Even though I can clearly see that setter gets called:

There is still a frozen area of the contentInset. But it disappear as soon as I start scrolling. So I thought to add scrollTo programmatically. Maybe there is a better fix for this problem - let me know if you find one 🙌

kirillzyusko · 2025-02-04T09:19:45Z

Have you checked whether this works properly in the New Arch?

I tested only new architecture 🙂 However I have a question about ReactAndroid.api file - is it autogenerated?

In fact it's very draft changes, because I assume at the moment padding may conflict with contentInset, contentInset is not returned in onScroll event, update HorizontalScrollView implementation etc. But again, I'll be glad to fix all of those issues if you say that you'd like to have such changes in the codebase (I don't know a reason why this prop wasn't added on Android - my assumption is that because there is no 1:1 API, so the prop was simply ignored, so I'm curios whether you like to have such changes or not) 😊

cipolleschi · 2025-02-04T09:45:14Z

I tested only new architecture 🙂

Great, thanks for confirming!

However I have a question about ReactAndroid.api file - is it autogenerated?

No, we have a script to generate it, but it only runs in the internal infra, sadly. So we have to run it ourselves after we import PRs

In fact it's very draft changes, because I assume at the moment padding may conflict with contentInset, contentInset is not returned in onScroll event, update HorizontalScrollView implementation etc. But again, I'll be glad to fix all of those issues if you say that you'd like to have such changes in the codebase (I don't know a reason why this prop wasn't added on Android - my assumption is that because there is no 1:1 API, so the prop was simply ignored, so I'm curios whether you like to have such changes or not) 😊

I don't have a lot of context on the why. I also don't know about all those implications as android is not really my area of expertise. But I'll make sure to pass this around to other Android engineers that might have context/knowledge on this.

facebook-github-bot · 2025-02-04T09:46:03Z

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

kirillzyusko · 2025-02-04T09:54:17Z

But I'll make sure to pass this around to other Android engineers that might have context/knowledge on this.

Awesome! Thank you!

As I said before - I'm ready to implement missing pieces, just would like to know what exactly I should implement 🙌 😊 Thank you for your assistance ❤️

cipolleschi · 2025-02-07T15:31:20Z

@javache Mentioned that, for sure we need to have the HorizontalScrollView implementation (but you knew about that!)

There might be some other gotchas, and he is definitely more expert on Android than me.

kirillzyusko · 2025-03-07T14:17:17Z

@javache @cipolleschi I encountered one problem and I really don't understand the root cause 🤔

Basically if I apply setPadding + setClipToPadding(false) then ScrollView will put both paddings into the bottom, i. e.:

- item 0
- item 1
- ...
- item N
- (paddingTop)
- (paddingBottom)

I've tried to workaround that problem by:

View content = getContentView();
content.setTranslationY(top);

setPadding(left, top, right, bottom);
scrollBy(0, top);
// simulate iOS behavior
setClipToPadding(false);

And it kind of works, but since we shift the content of ScrollView via translate property in some areas of ScrollView scrolling becomes impossible (we don't detect a tap, because there is no content, since we applied translate).

My other idea was to add marginTop to inner ReactViewGroup (that acts as a container), so that the new padding model will be like this:

- marginTop
- item 0
- item 1
- ...
- item N
- (paddingBottom) <-- `paddingTop` will be compensated by `marginTop`

However that approach doesn't work at all 🙃 I'm not allowed to change paddings of React views because they are laid out by YOGA and all my manual changes get ignored?
Do you have any ideas how to overcome this problem? Or at least a direction that I should try to discover?

We can also have a conversation in discord, if you think that it'll be easier/faster for you 🙂

react-native-bot · 2025-09-04T05:00:53Z

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

react-native-bot · 2025-09-04T05:00:53Z

This PR is stale because it has been open for 180 days with no activity. It will be closed in 7 days unless you comment on it or remove the "Stale" label.

kirillzyusko · 2026-01-28T11:54:19Z

I'm going to close this PR for now, because I came up with a solution just in keyboard-controller codebase: kirillzyusko/react-native-keyboard-controller#1289

I'll test how it works there and will backport changes to original ScrollView component if needed!

## 📜 Description Added `ClippingScrollView` component (on Android only) that is supposed to act as a polyfill for `contentInset: {bottom}` property of `ScrollView`. ## 💡 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 `bottom` inset 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 into `react-native-keyboard-controller` first. It's good because: - I have a full ownership of the code and I can fix bugs quickly (without waiting for a new RN release); - we don't ship buggy code in react-native repository; - we don't depend on react-native version and we don't need to write a conditional code, like "if prop is supported, then use new approach and if not, then fallback to old implementation". 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-markdown` etc. 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 `KeyboardAwareScrollView` and in new `ChatKit` component. From lessons learned from the previous experience I can confidently say, that additional view near children will cause issues and this polyfill for `contentInset: {bottom}` should hopefully solve all the issues that we had. I'll continue experiments with this view in #797 ## 📢 Changelog    ### JS - added codegen component; - added new types props for new component; - added jsdoc for new component; ### Android - added `ClippingScrollView`; ## 🤔 How Has This Been Tested? Tested in example app in `KeyboardAwareScrollView` screen and in new component that is currently under active development 😊 Everywhere works stable on both architectures 🤞 ## 📸 Screenshots (if appropriate): |KeyboardAwareScollView|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

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Feb 3, 2025

kirillzyusko mentioned this pull request Feb 3, 2025

Multiline TextInput Auto-growing and Scrolling Behavior Issues with KeyboardAwareScrollView kirillzyusko/react-native-keyboard-controller#794

Closed

cipolleschi approved these changes Feb 4, 2025

View reviewed changes

kirillzyusko added 3 commits March 4, 2025 11:14

feat: support contentInset on Android

90bd046

fix: match iOS behavior

306655a

fix: include contentInset as validAttributes on Android now

0ee7413

kirillzyusko force-pushed the feat/support-content-inset-on-Android branch from b1c1f8e to 0ee7413 Compare March 7, 2025 14:04

kirillzyusko mentioned this pull request Mar 17, 2025

Modal display bug after mounting keyboard kirillzyusko/react-native-keyboard-controller#710

Closed

kirillzyusko mentioned this pull request May 5, 2025

View inside ScrollView makes scroll-to-top when multiline input grows #48412

Open

react-native-bot added Stale There has been a lack of activity on this issue and it may be closed soon. and removed Stale There has been a lack of activity on this issue and it may be closed soon. labels Sep 4, 2025

kirillzyusko mentioned this pull request Jan 28, 2026

feat: add ClippingScrollView component kirillzyusko/react-native-keyboard-controller#1289

Merged

2 tasks

kirillzyusko closed this Jan 28, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support `contentInset` on Android#49145

feat: support `contentInset` on Android#49145
kirillzyusko wants to merge 3 commits intofacebook:mainfrom
kirillzyusko:feat/support-content-inset-on-Android

kirillzyusko commented Feb 3, 2025 •

edited

Loading

Uh oh!

cipolleschi left a comment

Uh oh!

cipolleschi Feb 4, 2025

Uh oh!

kirillzyusko Feb 4, 2025

Uh oh!

kirillzyusko commented Feb 4, 2025 •

edited

Loading

Uh oh!

cipolleschi commented Feb 4, 2025

Uh oh!

facebook-github-bot commented Feb 4, 2025

Uh oh!

kirillzyusko commented Feb 4, 2025

Uh oh!

cipolleschi commented Feb 7, 2025

Uh oh!

kirillzyusko commented Mar 7, 2025

Uh oh!

react-native-bot commented Sep 4, 2025

Uh oh!

react-native-bot commented Sep 4, 2025

Uh oh!

kirillzyusko commented Jan 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

kirillzyusko commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Changelog:

Test Plan:

Uh oh!

cipolleschi left a comment

Choose a reason for hiding this comment

Uh oh!

cipolleschi Feb 4, 2025

Choose a reason for hiding this comment

Uh oh!

kirillzyusko Feb 4, 2025

Choose a reason for hiding this comment

Uh oh!

kirillzyusko commented Feb 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cipolleschi commented Feb 4, 2025

Uh oh!

facebook-github-bot commented Feb 4, 2025

Uh oh!

kirillzyusko commented Feb 4, 2025

Uh oh!

cipolleschi commented Feb 7, 2025

Uh oh!

kirillzyusko commented Mar 7, 2025

Uh oh!

react-native-bot commented Sep 4, 2025

Uh oh!

react-native-bot commented Sep 4, 2025

Uh oh!

kirillzyusko commented Jan 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kirillzyusko commented Feb 3, 2025 •

edited

Loading

kirillzyusko commented Feb 4, 2025 •

edited

Loading