From 2e45dbb51bc6450b9acdd233a40d16cda15d48b8 Mon Sep 17 00:00:00 2001 From: Ryan Linton Date: Mon, 26 Feb 2024 10:47:06 -0700 Subject: [PATCH 1/2] update Android scroll views to support wide gamut color --- .../scroll/ReactHorizontalScrollView.java | 20 ++++++++++++------- .../ReactHorizontalScrollViewManager.java | 10 ++++------ .../react/views/scroll/ReactScrollView.java | 20 ++++++++++++------- .../views/scroll/ReactScrollViewManager.java | 9 ++++----- 4 files changed, 34 insertions(+), 25 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java index 04deef00410779..c96d94b64aee00 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java @@ -17,6 +17,7 @@ import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; +import android.graphics.Paint; import android.graphics.Rect; import android.graphics.drawable.ColorDrawable; import android.graphics.drawable.Drawable; @@ -96,7 +97,7 @@ public class ReactHorizontalScrollView extends HorizontalScrollView private @Nullable FpsListener mFpsListener = null; private @Nullable String mScrollPerfTag; private @Nullable Drawable mEndBackground; - private int mEndFillColor = Color.TRANSPARENT; + private long mEndFillColor = Color.pack(Color.TRANSPARENT); private boolean mDisableIntervalMomentum = false; private int mSnapInterval = 0; private @Nullable List mSnapOffsets; @@ -780,7 +781,7 @@ private View getContentView() { return getChildAt(0); } - public void setEndFillColor(int color) { + public void setEndFillColor(long color) { if (color != mEndFillColor) { mEndFillColor = color; mEndBackground = new ColorDrawable(mEndFillColor); @@ -857,9 +858,10 @@ private boolean isScrollPerfLoggingEnabled() { public void draw(Canvas canvas) { if (mEndFillColor != Color.TRANSPARENT) { final View content = getContentView(); - if (mEndBackground != null && content != null && content.getRight() < getWidth()) { - mEndBackground.setBounds(content.getRight(), 0, getWidth(), getHeight()); - mEndBackground.draw(canvas); + if (content != null && content.getRight() < getWidth()) { + Paint paint = new Paint(); + paint.setColor(mEndFillColor); + canvas.drawRect(content.getRight(), 0, getWidth(), getHeight(), paint); } } super.draw(canvas); @@ -1273,12 +1275,16 @@ public void setBackgroundColor(int color) { mReactBackgroundManager.setBackgroundColor(color); } + public void setBackgroundColor(long color) { + mReactBackgroundManager.setBackgroundColor(color); + } + public void setBorderWidth(int position, float width) { mReactBackgroundManager.setBorderWidth(position, width); } - public void setBorderColor(int position, float color, float alpha) { - mReactBackgroundManager.setBorderColor(position, color, alpha); + public void setBorderColor(int position, long color) { + mReactBackgroundManager.setBorderColor(position, color); } public void setBorderRadius(float borderRadius) { diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java index d311a236ed96f7..ef20e2adcdd165 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java @@ -236,7 +236,7 @@ public void scrollToEnd( * @param color */ @ReactProp(name = "endFillColor", defaultInt = Color.TRANSPARENT, customType = "Color") - public void setBottomFillColor(ReactHorizontalScrollView view, int color) { + public void setBottomFillColor(ReactHorizontalScrollView view, long color) { view.setEndFillColor(color); } @@ -291,11 +291,9 @@ public void setBorderWidth(ReactHorizontalScrollView view, int index, float widt "borderBottomColor" }, customType = "Color") - public void setBorderColor(ReactHorizontalScrollView view, int index, Integer color) { - float rgbComponent = - color == null ? YogaConstants.UNDEFINED : (float) ((int) color & 0x00FFFFFF); - float alphaComponent = color == null ? YogaConstants.UNDEFINED : (float) ((int) color >>> 24); - view.setBorderColor(SPACING_TYPES[index], rgbComponent, alphaComponent); + public void setBorderColor(ReactHorizontalScrollView view, int index, Long color) { + long borderColor = color == null ? 0 : color; + view.setBorderColor(SPACING_TYPES[index], borderColor); } @ReactProp(name = "overflow") diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java index c740ac50cbeed0..157406fc2ffde4 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java @@ -17,6 +17,7 @@ import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; +import android.graphics.Paint; import android.graphics.Rect; import android.graphics.drawable.ColorDrawable; import android.graphics.drawable.Drawable; @@ -97,7 +98,7 @@ public class ReactScrollView extends ScrollView private @Nullable FpsListener mFpsListener = null; private @Nullable String mScrollPerfTag; private @Nullable Drawable mEndBackground; - private int mEndFillColor = Color.TRANSPARENT; + private long mEndFillColor = Color.pack(Color.TRANSPARENT); private boolean mDisableIntervalMomentum = false; private int mSnapInterval = 0; private @Nullable List mSnapOffsets; @@ -622,9 +623,10 @@ public void setStateWrapper(StateWrapper stateWrapper) { public void draw(Canvas canvas) { if (mEndFillColor != Color.TRANSPARENT) { final View contentView = getContentView(); - if (mEndBackground != null && contentView != null && contentView.getBottom() < getHeight()) { - mEndBackground.setBounds(0, contentView.getBottom(), getWidth(), getHeight()); - mEndBackground.draw(canvas); + if (contentView != null && contentView.getBottom() < getHeight()) { + Paint paint = new Paint(); + paint.setColor(mEndFillColor); + canvas.drawRect(0, contentView.getBottom(), getWidth(), getHeight(), paint); } } getDrawingRect(mRect); @@ -1003,7 +1005,7 @@ private int getSnapInterval() { return getHeight(); } - public void setEndFillColor(int color) { + public void setEndFillColor(long color) { if (color != mEndFillColor) { mEndFillColor = color; mEndBackground = new ColorDrawable(mEndFillColor); @@ -1198,12 +1200,16 @@ public void setBackgroundColor(int color) { mReactBackgroundManager.setBackgroundColor(color); } + public void setBackgroundColor(long color) { + mReactBackgroundManager.setBackgroundColor(color); + } + public void setBorderWidth(int position, float width) { mReactBackgroundManager.setBorderWidth(position, width); } - public void setBorderColor(int position, float color, float alpha) { - mReactBackgroundManager.setBorderColor(position, color, alpha); + public void setBorderColor(int position, long color) { + mReactBackgroundManager.setBorderColor(position, color); } public void setBorderRadius(float borderRadius) { diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java index 1b42aaefefcf92..2f7fc635c150e3 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java @@ -173,7 +173,7 @@ public void setPagingEnabled(ReactScrollView view, boolean pagingEnabled) { * @param color */ @ReactProp(name = "endFillColor", defaultInt = Color.TRANSPARENT, customType = "Color") - public void setBottomFillColor(ReactScrollView view, int color) { + public void setBottomFillColor(ReactScrollView view, long color) { view.setEndFillColor(color); } @@ -272,10 +272,9 @@ public void setBorderWidth(ReactScrollView view, int index, float width) { "borderBottomColor" }, customType = "Color") - public void setBorderColor(ReactScrollView view, int index, Integer color) { - float rgbComponent = color == null ? YogaConstants.UNDEFINED : (float) (color & 0x00FFFFFF); - float alphaComponent = color == null ? YogaConstants.UNDEFINED : (float) (color >>> 24); - view.setBorderColor(SPACING_TYPES[index], rgbComponent, alphaComponent); + public void setBorderColor(ReactScrollView view, int index, Long color) { + long borderColor = color == null ? 0 : color; + view.setBorderColor(SPACING_TYPES[index], borderColor); } @ReactProp(name = "overflow") From 07105c3c920c412b682e9ac1acf19c25e5f936b1 Mon Sep 17 00:00:00 2001 From: Ryan Linton Date: Mon, 8 Apr 2024 09:51:42 -0600 Subject: [PATCH 2/2] remove now unused mEndBackground Drawable and explicitly compare long colors --- .../react/views/scroll/ReactHorizontalScrollView.java | 4 +--- .../java/com/facebook/react/views/scroll/ReactScrollView.java | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java index c96d94b64aee00..c6b7a69ee0dc17 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java @@ -96,7 +96,6 @@ public class ReactHorizontalScrollView extends HorizontalScrollView private boolean mSendMomentumEvents; private @Nullable FpsListener mFpsListener = null; private @Nullable String mScrollPerfTag; - private @Nullable Drawable mEndBackground; private long mEndFillColor = Color.pack(Color.TRANSPARENT); private boolean mDisableIntervalMomentum = false; private int mSnapInterval = 0; @@ -784,7 +783,6 @@ private View getContentView() { public void setEndFillColor(long color) { if (color != mEndFillColor) { mEndFillColor = color; - mEndBackground = new ColorDrawable(mEndFillColor); } } @@ -856,7 +854,7 @@ private boolean isScrollPerfLoggingEnabled() { @Override public void draw(Canvas canvas) { - if (mEndFillColor != Color.TRANSPARENT) { + if (mEndFillColor != Color.pack(Color.TRANSPARENT)) { final View content = getContentView(); if (content != null && content.getRight() < getWidth()) { Paint paint = new Paint(); diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java index 157406fc2ffde4..6720f77db04dc2 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java @@ -97,7 +97,6 @@ public class ReactScrollView extends ScrollView private boolean mSendMomentumEvents; private @Nullable FpsListener mFpsListener = null; private @Nullable String mScrollPerfTag; - private @Nullable Drawable mEndBackground; private long mEndFillColor = Color.pack(Color.TRANSPARENT); private boolean mDisableIntervalMomentum = false; private int mSnapInterval = 0; @@ -621,7 +620,7 @@ public void setStateWrapper(StateWrapper stateWrapper) { @Override public void draw(Canvas canvas) { - if (mEndFillColor != Color.TRANSPARENT) { + if (mEndFillColor != Color.pack(Color.TRANSPARENT)) { final View contentView = getContentView(); if (contentView != null && contentView.getBottom() < getHeight()) { Paint paint = new Paint(); @@ -1008,7 +1007,6 @@ private int getSnapInterval() { public void setEndFillColor(long color) { if (color != mEndFillColor) { mEndFillColor = color; - mEndBackground = new ColorDrawable(mEndFillColor); } }