Skip to content

Commit

Permalink
RN: Add Support for overflow on Android (Take 2)
Browse files Browse the repository at this point in the history 
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 @facebook-github-bot
yungsters authored and facebook-github-bot committed Jun 29, 2018
1 parent cfce6ee commit b81c8b5
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 12 deletions.
11 changes: 6 additions & 5 deletions ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ public class ViewProps {
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";
Expand Down Expand Up @@ -74,9 +73,6 @@ public class ViewProps {
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
Expand All @@ -103,6 +99,10 @@ public class ViewProps {
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";
Expand Down Expand Up @@ -169,7 +169,6 @@ public class ViewProps {
FLEX_SHRINK,
FLEX_WRAP,
JUSTIFY_CONTENT,
OVERFLOW,
ALIGN_CONTENT,
DISPLAY,

Expand Down Expand Up @@ -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;
}
Expand Down
20 changes: 13 additions & 7 deletions ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ public void onLayoutChange(

public ReactViewGroup(Context context) {
super(context);
setClipChildren(false);
mDrawingOrderHelper = new ViewGroupDrawingOrderHelper(this);
}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down

19 comments on commit b81c8b5

@hramos
Copy link
Contributor

@hramos hramos commented on b81c8b5 Jun 30, 2018

Choose a reason for hiding this comment

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

“Finally!”

@danielgindi
Copy link
Contributor

@danielgindi danielgindi commented on b81c8b5 Jul 8, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

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
Copy link
Contributor

@hramos hramos commented on b81c8b5 Jul 17, 2018

Choose a reason for hiding this comment

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

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

@reganperkins
Copy link

@reganperkins reganperkins commented on b81c8b5 Sep 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

@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
Copy link
Contributor

@hramos hramos commented on b81c8b5 Sep 27, 2018

Choose a reason for hiding this comment

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

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

@qalqi
Copy link

@qalqi qalqi commented on b81c8b5 Oct 25, 2019

Choose a reason for hiding this comment

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

Overflow visible is working. But, the overflowed absolute view is not touchable in android.

@danielgindi
Copy link
Contributor

Choose a reason for hiding this comment

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

@qalqi #26374

@1awaleed
Copy link

Choose a reason for hiding this comment

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

@qalqi Did you find any solution for this?

@evelant
Copy link

Choose a reason for hiding this comment

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

This doesn't work when using renderToHardwareTextureAndroid -- with that property set subviews always get clipped

@Twelvefat
Copy link

Choose a reason for hiding this comment

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

This doesn't work when using scrollview in horizontal mode, any solutions ?

@friedebold
Copy link

Choose a reason for hiding this comment

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

ScrollView still clips its children even with overflow: 'visible' RN 0.62

@friedebold
Copy link

Choose a reason for hiding this comment

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

Possible workaround for ScrollView clipping:

  • panGestureHandler to listen to drags
  • replace ScrollView with Views that change offset with gestureHandler value

@mbernardes19
Copy link

Choose a reason for hiding this comment

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

Still not working in RN 0.64

@matinzd
Copy link
Contributor

@matinzd matinzd commented on b81c8b5 Aug 26, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

overflow: visible does not work on android for <ScrollView /> or <FlatList />. It clips children view.

iOS:
Screenshot 2021-08-26 at 15 13 06

Android:
Screenshot 2021-08-26 at 15 13 22

@danielgindi
Copy link
Contributor

Choose a reason for hiding this comment

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

overflow: visible does not work on android for <ScrollView /> or <FlatList />. It clips children view.

iOS:
Screenshot 2021-08-26 at 15 13 06

Android:
Screenshot 2021-08-26 at 15 13 22

Try to add overflow style to the grandparent view. Or just add padding to the scrollview the same size as the shadow.

@mangkoran
Copy link

@mangkoran mangkoran commented on b81c8b5 Jan 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Try to add overflow style to the grandparent view. Or just add padding to the scrollview the same size as the shadow.

@danielgindi I think that this is not the intended behavior. Most of users expect that overflow in ScrollView and FlatList in Android should work as how in iOS does (as @matinzd pointed out).

@Robert6321
Copy link

Choose a reason for hiding this comment

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

Is there any solution to make this work with SectionList or FlatList ? I see its still not supported :(

@debdeep-ganguly
Copy link

Choose a reason for hiding this comment

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

Why is this lame issue still open in 2024? Doesn't make sense to continue using React native.

@Drzaln
Copy link

@Drzaln Drzaln commented on b81c8b5 May 15, 2024

Choose a reason for hiding this comment

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

Hmm, so still not working until now?

Please sign in to comment.