Skip to content

Commit

Permalink
Android ScrollView support for overflow: visible
Browse files Browse the repository at this point in the history
Summary:
ScrollView always clipping children on Android even when `overflow: visible` was specified.
This change just omits the clipping during draw if `overflow: visible` is passed in.
The default is not changed (from hidden to visible) in case there is a performance impact.
Android now matches iOS in behavior. This helps with issue facebook#21116 and resolves facebook#14416.

Reviewed By: shergin

Differential Revision: D9952096

fbshipit-source-id: 367afe33ee7ff0fdc5aa1074d239883aa289888a
  • Loading branch information
olegbl authored and facebook-github-bot committed Sep 24, 2018
1 parent 0ebe287 commit 0be3ba6
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,11 @@

import com.facebook.infer.annotation.Assertions;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.uimanager.events.NativeGestureUtil;
import com.facebook.react.uimanager.MeasureSpecAssertions;
import com.facebook.react.uimanager.ReactClippingViewGroup;
import com.facebook.react.uimanager.ReactClippingViewGroupHelper;
import com.facebook.react.uimanager.events.NativeGestureUtil;
import com.facebook.react.uimanager.ViewProps;
import com.facebook.react.views.view.ReactViewBackgroundManager;

import java.lang.reflect.Field;
Expand All @@ -55,6 +56,7 @@ public class ReactHorizontalScrollView extends HorizontalScrollView implements

private boolean mActivelyScrolling;
private @Nullable Rect mClippingRect;
private @Nullable String mOverflow = ViewProps.HIDDEN;
private boolean mDragging;
private boolean mPagingEnabled = false;
private @Nullable Runnable mPostTouchRunnable;
Expand Down Expand Up @@ -181,10 +183,23 @@ public void flashScrollIndicators() {
awakenScrollBars();
}

public void setOverflow(String overflow) {
mOverflow = overflow;
invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
getDrawingRect(mRect);
canvas.clipRect(mRect);

switch (mOverflow) {
case ViewProps.VISIBLE:
break;
case ViewProps.HIDDEN:
canvas.clipRect(mRect);
break;
}

super.onDraw(canvas);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -250,4 +250,9 @@ public void setBorderColor(ReactHorizontalScrollView view, int index, Integer co
float alphaComponent = color == null ? YogaConstants.UNDEFINED : (float) ((int)color >>> 24);
view.setBorderColor(SPACING_TYPES[index], rgbComponent, alphaComponent);
}

@ReactProp(name = "overflow")
public void setOverflow(ReactHorizontalScrollView view, @Nullable String overflow) {
view.setOverflow(overflow);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,11 @@
import com.facebook.infer.annotation.Assertions;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.uimanager.events.NativeGestureUtil;
import com.facebook.react.uimanager.MeasureSpecAssertions;
import com.facebook.react.uimanager.ReactClippingViewGroup;
import com.facebook.react.uimanager.ReactClippingViewGroupHelper;
import com.facebook.react.uimanager.events.NativeGestureUtil;
import com.facebook.react.uimanager.ViewProps;
import com.facebook.react.views.view.ReactViewBackgroundManager;

import java.lang.reflect.Field;
Expand All @@ -54,6 +55,7 @@ public class ReactScrollView extends ScrollView implements ReactClippingViewGrou

private boolean mActivelyScrolling;
private @Nullable Rect mClippingRect;
private @Nullable String mOverflow = ViewProps.HIDDEN;
private boolean mDragging;
private boolean mPagingEnabled = false;
private @Nullable Runnable mPostTouchRunnable;
Expand Down Expand Up @@ -169,6 +171,11 @@ public void flashScrollIndicators() {
awakenScrollBars();
}

public void setOverflow(String overflow) {
mOverflow = overflow;
invalidate();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
MeasureSpecAssertions.assertExplicitMeasureSpec(widthMeasureSpec, heightMeasureSpec);
Expand Down Expand Up @@ -373,7 +380,15 @@ public void draw(Canvas canvas) {
}
}
getDrawingRect(mRect);
canvas.clipRect(mRect);

switch (mOverflow) {
case ViewProps.VISIBLE:
break;
case ViewProps.HIDDEN:
canvas.clipRect(mRect);
break;
}

super.draw(canvas);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,11 @@ public void setBorderColor(ReactScrollView view, int index, Integer color) {
view.setBorderColor(SPACING_TYPES[index], rgbComponent, alphaComponent);
}

@ReactProp(name = "overflow")
public void setOverflow(ReactScrollView view, @Nullable String overflow) {
view.setOverflow(overflow);
}

@Override
public void scrollToEnd(
ReactScrollView scrollView,
Expand Down

0 comments on commit 0be3ba6

Please sign in to comment.