Permalink
Browse files

fix overflow hidden

Reviewed By: shergin

Differential Revision: D5917111

fbshipit-source-id: e3d97f26b6aada199f700ec6659ace0d7dffd4c5
  • Loading branch information...
AaaChiuuu authored and facebook-github-bot committed Sep 30, 2017
1 parent e7af72b commit 30044fd531c22c4c5e8f1ede206fa7c2c3fd3aa8
@@ -9,11 +9,6 @@
package com.facebook.react.views.view;
import javax.annotation.Nullable;
import java.util.Arrays;
import java.util.Locale;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
@@ -26,11 +21,13 @@
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.os.Build;
import com.facebook.yoga.YogaConstants;
import com.facebook.react.common.annotations.VisibleForTesting;
import com.facebook.react.uimanager.FloatUtil;
import com.facebook.react.uimanager.Spacing;
import com.facebook.yoga.YogaConstants;
import java.util.Arrays;
import java.util.Locale;
import javax.annotation.Nullable;
/**
* A subclass of {@link Drawable} used for background of {@link ReactViewGroup}. It supports
@@ -231,6 +228,10 @@ public void setRadius(float radius, int position) {
}
}
public float getRadius() {
return mBorderRadius;
}
public void setColor(int color) {
mColor = color;
invalidateSelf();
@@ -334,10 +335,8 @@ private void updatePathEffect() {
mPaint.setPathEffect(mPathEffectForBorderStyle);
}
/**
* For rounded borders we use default "borderWidth" property.
*/
private float getFullBorderWidth() {
/** For rounded borders we use default "borderWidth" property. */
public float getFullBorderWidth() {
return (mBorderWidth != null && !YogaConstants.isUndefined(mBorderWidth.getRaw(Spacing.ALL))) ?
mBorderWidth.getRaw(Spacing.ALL) : 0f;
}
@@ -10,8 +10,11 @@
package com.facebook.react.views.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.os.Build;
@@ -31,6 +34,7 @@
import com.facebook.react.uimanager.ReactPointerEventsView;
import com.facebook.react.uimanager.ReactZIndexedViewGroup;
import com.facebook.react.uimanager.ViewGroupDrawingOrderHelper;
import com.facebook.yoga.YogaConstants;
import javax.annotation.Nullable;
/**
@@ -93,12 +97,14 @@ public void onLayoutChange(
private int mAllChildrenCount;
private @Nullable Rect mClippingRect;
private @Nullable Rect mHitSlopRect;
private @Nullable String mOverflow;
private PointerEvents mPointerEvents = PointerEvents.AUTO;
private @Nullable ChildrenLayoutChangeListener mChildrenLayoutChangeListener;
private @Nullable ReactViewBackgroundDrawable mReactBackgroundDrawable;
private @Nullable OnInterceptTouchEventListener mOnInterceptTouchEventListener;
private boolean mNeedsOffscreenAlphaCompositing = false;
private final ViewGroupDrawingOrderHelper mDrawingOrderHelper;
private @Nullable Path mPath;
public ReactViewGroup(Context context) {
super(context);
@@ -584,6 +590,11 @@ public void setHitSlopRect(@Nullable Rect rect) {
mHitSlopRect = rect;
}
public void setOverflow(String overflow) {
mOverflow = overflow;
invalidate();
}
/**
* Set the background for the view or remove the background. It calls {@link
* #setBackground(Drawable)} or {@link #setBackgroundDrawable(Drawable)} based on the sdk version.
@@ -599,4 +610,45 @@ private void updateBackgroundDrawable(Drawable drawable) {
}
}
@Override
protected void dispatchDraw(Canvas canvas) {
if (mOverflow != null) {
switch (mOverflow) {
case "visible":
if (mPath != null) {
mPath.rewind();
}
break;
case "hidden":
if (mReactBackgroundDrawable != null) {
float left = 0f;
float top = 0f;
float right = getWidth();
float bottom = getHeight();
if (mReactBackgroundDrawable.getFullBorderWidth() != 0f) {
float borderWidth = mReactBackgroundDrawable.getFullBorderWidth();
left += borderWidth;
top += borderWidth;
right -= borderWidth;
bottom -= borderWidth;
}
float radius = mReactBackgroundDrawable.getRadius();
if (radius != YogaConstants.UNDEFINED) {
if (mPath == null) {
mPath = new Path();
}
mPath.rewind();
mPath.addRoundRect(
new RectF(left, top, right, bottom), radius, radius, Path.Direction.CW);
canvas.clipPath(mPath);
}
}
break;
default:
break;
}
}
super.dispatchDraw(canvas);
}
}
@@ -163,6 +163,11 @@ public void setCollapsable(ReactViewGroup view, boolean collapsable) {
// handled in NativeViewHierarchyOptimizer
}
@ReactProp(name = ViewProps.OVERFLOW)
public void setOverflow(ReactViewGroup view, String overflow) {
view.setOverflow(overflow);
}
@Override
public String getName() {
return REACT_CLASS;

10 comments on commit 30044fd

@ajwhite

This comment has been minimized.

Show comment
Hide comment
@ajwhite

ajwhite Oct 2, 2017

Contributor

❤️

Contributor

ajwhite replied Oct 2, 2017

❤️

@Doko-Demo-Doa

This comment has been minimized.

Show comment
Hide comment
@Doko-Demo-Doa

Doko-Demo-Doa Nov 4, 2017

Images still can't be drawn with overflow: visible behavior like iOS.

Doko-Demo-Doa replied Nov 4, 2017

Images still can't be drawn with overflow: visible behavior like iOS.

@Noitidart

This comment has been minimized.

Show comment
Hide comment
@Noitidart

Noitidart Nov 9, 2017

Where is the github issue tracking this? Is it this one: #6802?

Noitidart replied Nov 9, 2017

Where is the github issue tracking this? Is it this one: #6802?

@designorant

This comment has been minimized.

Show comment
Hide comment
@designorant

designorant Nov 28, 2017

Contributor

@Doko-Demo-Doa There's a workaround: https://snack.expo.io/@designorant/overflow-visible-android-workaround although it doesn't work with some complex cases.

Contributor

designorant replied Nov 28, 2017

@Doko-Demo-Doa There's a workaround: https://snack.expo.io/@designorant/overflow-visible-android-workaround although it doesn't work with some complex cases.

@Doko-Demo-Doa

This comment has been minimized.

Show comment
Hide comment
@Doko-Demo-Doa

Doko-Demo-Doa Nov 29, 2017

Yeah I knew how to do it. But it's something good anyway.

Doko-Demo-Doa replied Nov 29, 2017

Yeah I knew how to do it. But it's something good anyway.

@slorber

This comment has been minimized.

Show comment
Hide comment
@slorber

slorber Dec 5, 2017

Contributor

Didn't this commit break the ability of Android view to overflow their parent?

#17074

Contributor

slorber replied Dec 5, 2017

Didn't this commit break the ability of Android view to overflow their parent?

#17074

@brunolemos

This comment has been minimized.

Show comment
Hide comment
@brunolemos

brunolemos Mar 8, 2018

Contributor

I think this is not working well with transforms: #18266

Contributor

brunolemos replied Mar 8, 2018

I think this is not working well with transforms: #18266

@marcorm

This comment has been minimized.

Show comment
Hide comment
@marcorm

marcorm Jul 6, 2018

It's not been released with 0.56... I'm i right?

marcorm replied Jul 6, 2018

It's not been released with 0.56... I'm i right?

@yeomann

This comment has been minimized.

Show comment
Hide comment
@yeomann

yeomann Jul 28, 2018

still not working in android? 😞

yeomann replied Jul 28, 2018

still not working in android? 😞

@mike623

This comment has been minimized.

Show comment
Hide comment
@mike623

mike623 Aug 15, 2018

didnt merge?

mike623 replied Aug 15, 2018

didnt merge?

Please sign in to comment.