Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support contentInset on Android #49145

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
},
},
validAttributes: {
contentInset: {
diff: require('../../Utilities/differ/insetsDiffer').default,
},
contentOffset: {
diff: require('../../Utilities/differ/pointsDiffer').default,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1109,6 +1109,54 @@ public void setContentOffset(ReadableMap value) {
}
}

public void setContentInset(ReadableMap insets) {
int left = 0;
int top = 0;
int right = 0;
int bottom = 0;
if (insets != null) {
if (insets.hasKey("left")) {
left = (int) PixelUtil.toPixelFromDIP(insets.getDouble("left"));
}
if (insets.hasKey("top")) {
top = (int) PixelUtil.toPixelFromDIP(insets.getDouble("top"));
}
if (insets.hasKey("right")) {
right = (int) PixelUtil.toPixelFromDIP(insets.getDouble("right"));
}
if (insets.hasKey("bottom")) {
bottom = (int) PixelUtil.toPixelFromDIP(insets.getDouble("bottom"));
}
}

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

// If clipping of subviews is enabled, update the clipping rect
if (mRemoveClippedSubviews) {
updateClippingRect();
}

// Force a layout pass to ensure the new padding is applied.
requestLayout();
invalidate();

// Post a runnable to adjust the scroll position if needed.
// (Using post() ensures this happens after the layout pass.)
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);
}
}
});
Comment on lines +1147 to +1157
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

image

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 🙌

}

/**
* Calls `smoothScrollTo` and updates state.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -327,6 +327,11 @@ public void setContentOffset(ReactScrollView view, ReadableMap value) {
view.setContentOffset(value);
}

@ReactProp(name = "contentInset")
public void setContentInset(ReactScrollView view, ReadableMap value) {
view.setContentInset(value);
}

@ReactProp(name = "maintainVisibleContentPosition")
public void setMaintainVisibleContentPosition(ReactScrollView view, ReadableMap value) {
if (value != null) {
Expand Down
Loading