Permalink
Browse files

RN: Add Support for `overflow` on Android (Take 2)

Summary:
Adds support for the `overflow` style property on React Native for Android.

This is the second attempt to do this. See 6110a4c (D8666509) for the first attempt.

Similar to the first attempt, this sets `setClipChildren(false)` by default on all `ViewGroup` instances. However, this differs in how it implements `overflow: hidden`. Instead of conditionally setting `setClipChildren`, this manually clips children to the `ViewGroup`'s bounds  (which was incidentally what we were doing for background + border radius already).

Reviewed By: achen1

Differential Revision: D8690805

fbshipit-source-id: 58757825cd9d138c18c8758918d85b4ca1915f87
  • Loading branch information...
yungsters authored and facebook-github-bot committed Jun 29, 2018
1 parent cfce6ee commit b81c8b51fc6fe3c2dece72e3fe500e175613c5d4
@@ -24,7 +24,6 @@
public static final String ALIGN_ITEMS = "alignItems";
public static final String ALIGN_SELF = "alignSelf";
public static final String ALIGN_CONTENT = "alignContent";
public static final String OVERFLOW = "overflow";
public static final String DISPLAY = "display";
public static final String BOTTOM = "bottom";
public static final String COLLAPSABLE = "collapsable";
@@ -74,9 +73,6 @@
public static final String MIN_HEIGHT = "minHeight";
public static final String MAX_HEIGHT = "maxHeight";
public static final String HIDDEN = "hidden";
public static final String VISIBLE = "visible";
public static final String ASPECT_RATIO = "aspectRatio";
// Props that sometimes may prevent us from collapsing views
@@ -103,6 +99,10 @@
public static final String TEXT_DECORATION_LINE = "textDecorationLine";
public static final String TEXT_BREAK_STRATEGY = "textBreakStrategy";
public static final String OPACITY = "opacity";
public static final String OVERFLOW = "overflow";
public static final String HIDDEN = "hidden";
public static final String VISIBLE = "visible";
public static final String ALLOW_FONT_SCALING = "allowFontScaling";
public static final String INCLUDE_FONT_PADDING = "includeFontPadding";
@@ -169,7 +169,6 @@
FLEX_SHRINK,
FLEX_WRAP,
JUSTIFY_CONTENT,
OVERFLOW,
ALIGN_CONTENT,
DISPLAY,
@@ -257,6 +256,8 @@ public static boolean isLayoutOnly(ReadableMap map, String prop) {
return map.isNull(BORDER_RIGHT_WIDTH) || map.getDouble(BORDER_RIGHT_WIDTH) == 0d;
case BORDER_BOTTOM_WIDTH:
return map.isNull(BORDER_BOTTOM_WIDTH) || map.getDouble(BORDER_BOTTOM_WIDTH) == 0d;
case OVERFLOW:
return map.isNull(OVERFLOW) || VISIBLE.equals(map.getString(OVERFLOW));
default:
return false;
}
@@ -113,6 +113,7 @@ public void onLayoutChange(
public ReactViewGroup(Context context) {
super(context);
setClipChildren(false);
mDrawingOrderHelper = new ViewGroupDrawingOrderHelper(this);
}
@@ -689,12 +690,14 @@ private void dispatchOverflowDraw(Canvas canvas) {
}
break;
case ViewProps.HIDDEN:
if (mReactBackgroundDrawable != null) {
float left = 0f;
float top = 0f;
float right = getWidth();
float bottom = getHeight();
float left = 0f;
float top = 0f;
float right = getWidth();
float bottom = getHeight();
boolean hasClipPath = false;
if (mReactBackgroundDrawable != null) {
final RectF borderWidth = mReactBackgroundDrawable.getDirectionAwareBorderInsets();
if (borderWidth.top > 0
@@ -817,10 +820,13 @@ private void dispatchOverflowDraw(Canvas canvas) {
},
Path.Direction.CW);
canvas.clipPath(mPath);
} else {
canvas.clipRect(new RectF(left, top, right, bottom));
hasClipPath = true;
}
}
if (!hasClipPath) {
canvas.clipRect(new RectF(left, top, right, bottom));
}
break;
default:
break;

5 comments on commit b81c8b5

@hramos

This comment has been minimized.

Show comment
Hide comment
@hramos

hramos Jun 30, 2018

Contributor

“Finally!”

Contributor

hramos replied Jun 30, 2018

“Finally!”

@danielgindi

This comment has been minimized.

Show comment
Hide comment
@danielgindi

danielgindi Jul 8, 2018

Is it just me or it doesn't work with 0.56?


Hmm, I guess it did not make it there.

Anyway, does this take care of touches on out-of-bounds views?

danielgindi replied Jul 8, 2018

Is it just me or it doesn't work with 0.56?


Hmm, I guess it did not make it there.

Anyway, does this take care of touches on out-of-bounds views?

@hramos

This comment has been minimized.

Show comment
Hide comment
@hramos

hramos Jul 17, 2018

Contributor

0.56 was cut mid-June, long before this commit :)

Contributor

hramos replied Jul 17, 2018

0.56 was cut mid-June, long before this commit :)

@reganperkins

This comment has been minimized.

Show comment
Hide comment
@reganperkins

reganperkins Sep 27, 2018

@yungsters thanks so much! I am really excited to see this! however I am having trouble implementing this. Is there any set up required or is it just adding overflow: visible to the parent?

reganperkins replied Sep 27, 2018

@yungsters thanks so much! I am really excited to see this! however I am having trouble implementing this. Is there any set up required or is it just adding overflow: visible to the parent?

@hramos

This comment has been minimized.

Show comment
Hide comment
@hramos

hramos Sep 27, 2018

Contributor

@reganperkins it's easy for us to miss comments on commits. You can try asking Tim on twitter.

Contributor

hramos replied Sep 27, 2018

@reganperkins it's easy for us to miss comments on commits. You can try asking Tim on twitter.

Please sign in to comment.