Skip to content

Commit b81c8b5

Browse files
yungstersfacebook-github-bot
yungsters
authored and
facebook-github-bot
committed
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
1 parent cfce6ee commit b81c8b5

2 files changed

Lines changed: 19 additions & 12 deletions

File tree

‎ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ public class ViewProps {
2424
publicstaticfinalStringALIGN_ITEMS = "alignItems";
2525
publicstaticfinalStringALIGN_SELF = "alignSelf";
2626
publicstaticfinalStringALIGN_CONTENT = "alignContent";
27-
publicstaticfinalStringOVERFLOW = "overflow";
2827
publicstaticfinalStringDISPLAY = "display";
2928
publicstaticfinalStringBOTTOM = "bottom";
3029
publicstaticfinalStringCOLLAPSABLE = "collapsable";
@@ -74,9 +73,6 @@ public class ViewProps {
7473
publicstaticfinalStringMIN_HEIGHT = "minHeight";
7574
publicstaticfinalStringMAX_HEIGHT = "maxHeight";
7675

77-
publicstaticfinalStringHIDDEN = "hidden";
78-
publicstaticfinalStringVISIBLE = "visible";
79-
8076
publicstaticfinalStringASPECT_RATIO = "aspectRatio";
8177

8278
// Props that sometimes may prevent us from collapsing views
@@ -103,6 +99,10 @@ public class ViewProps {
10399
publicstaticfinalStringTEXT_DECORATION_LINE = "textDecorationLine";
104100
publicstaticfinalStringTEXT_BREAK_STRATEGY = "textBreakStrategy";
105101
publicstaticfinalStringOPACITY = "opacity";
102+
publicstaticfinalStringOVERFLOW = "overflow";
103+
104+
publicstaticfinalStringHIDDEN = "hidden";
105+
publicstaticfinalStringVISIBLE = "visible";
106106

107107
publicstaticfinalStringALLOW_FONT_SCALING = "allowFontScaling";
108108
publicstaticfinalStringINCLUDE_FONT_PADDING = "includeFontPadding";
@@ -169,7 +169,6 @@ public class ViewProps {
169169
FLEX_SHRINK,
170170
FLEX_WRAP,
171171
JUSTIFY_CONTENT,
172-
OVERFLOW,
173172
ALIGN_CONTENT,
174173
DISPLAY,
175174

@@ -257,6 +256,8 @@ public static boolean isLayoutOnly(ReadableMap map, String prop) {
257256
returnmap.isNull(BORDER_RIGHT_WIDTH) || map.getDouble(BORDER_RIGHT_WIDTH) == 0d;
258257
caseBORDER_BOTTOM_WIDTH:
259258
returnmap.isNull(BORDER_BOTTOM_WIDTH) || map.getDouble(BORDER_BOTTOM_WIDTH) == 0d;
259+
caseOVERFLOW:
260+
returnmap.isNull(OVERFLOW) || VISIBLE.equals(map.getString(OVERFLOW));
260261
default:
261262
returnfalse;
262263
}

‎ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ public void onLayoutChange(
113113

114114
publicReactViewGroup(Contextcontext) {
115115
super(context);
116+
setClipChildren(false);
116117
mDrawingOrderHelper = newViewGroupDrawingOrderHelper(this);
117118
}
118119

@@ -689,12 +690,14 @@ private void dispatchOverflowDraw(Canvas canvas) {
689690
}
690691
break;
691692
caseViewProps.HIDDEN:
692-
if (mReactBackgroundDrawable != null) {
693-
floatleft = 0f;
694-
floattop = 0f;
695-
floatright = getWidth();
696-
floatbottom = getHeight();
693+
floatleft = 0f;
694+
floattop = 0f;
695+
floatright = getWidth();
696+
floatbottom = getHeight();
697+
698+
booleanhasClipPath = false;
697699

700+
if (mReactBackgroundDrawable != null) {
698701
finalRectFborderWidth = mReactBackgroundDrawable.getDirectionAwareBorderInsets();
699702

700703
if (borderWidth.top > 0
@@ -817,10 +820,13 @@ private void dispatchOverflowDraw(Canvas canvas) {
817820
},
818821
Path.Direction.CW);
819822
canvas.clipPath(mPath);
820-
} else {
821-
canvas.clipRect(newRectF(left, top, right, bottom));
823+
hasClipPath = true;
822824
}
823825
}
826+
827+
if (!hasClipPath) {
828+
canvas.clipRect(newRectF(left, top, right, bottom));
829+
}
824830
break;
825831
default:
826832
break;

0 commit comments

Comments
 (0)