From d393e9490e03fc88d9dc021e64a839343591eaca Mon Sep 17 00:00:00 2001 From: Genki Kondo Date: Tue, 7 Dec 2021 16:08:37 -0800 Subject: [PATCH] Stop using RoundedCornerPostProcessor Summary: Originally introduced in D2022018 Tried to make the processor optional when no rounding is required, but found even that was not strictly necessary. Changelog: [Internal] Reviewed By: mdvacca Differential Revision: D32675492 fbshipit-source-id: 8dfdbf0e4347155045f77b1fba00a59086fe7a33 --- .../react/config/ReactFeatureFlags.java | 3 + .../java/com/facebook/react/views/image/BUCK | 1 + .../react/views/image/ReactImageView.java | 49 ++-- .../js/examples/Image/ImageExample.js | 229 +++++++----------- 4 files changed, 115 insertions(+), 167 deletions(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java b/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java index 7e3a430e366..c7410ce8199 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java +++ b/ReactAndroid/src/main/java/com/facebook/react/config/ReactFeatureFlags.java @@ -111,4 +111,7 @@ public class ReactFeatureFlags { /** TODO: T103427072 Delete ReactFeatureFlags.enableNestedTextOnPressEventFix */ public static boolean enableNestedTextOnPressEventFix = true; + + /** TODO: T107492383 Delete this flag. Enables postprocessor for rounded corners for Image */ + public static boolean enableRoundedCornerPostprocessing = false; } diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/image/BUCK b/ReactAndroid/src/main/java/com/facebook/react/views/image/BUCK index 40f0d2f5592..a13531e1927 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/image/BUCK +++ b/ReactAndroid/src/main/java/com/facebook/react/views/image/BUCK @@ -55,6 +55,7 @@ rn_android_library( react_native_dep("third-party/java/jsr-305:jsr-305"), react_native_target("java/com/facebook/react/bridge:bridge"), react_native_target("java/com/facebook/react/common:common"), + react_native_target("java/com/facebook/react/config:config"), react_native_target("java/com/facebook/react/module/annotations:annotations"), react_native_target("java/com/facebook/react/uimanager:uimanager"), react_native_target("java/com/facebook/react/modules/fresco:fresco"), diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java b/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java index a25658a27f2..89e0fd976fa 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java @@ -48,6 +48,7 @@ import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; import com.facebook.react.common.build.ReactBuildConfig; +import com.facebook.react.config.ReactFeatureFlags; import com.facebook.react.modules.fresco.ReactNetworkImageRequest; import com.facebook.react.uimanager.FloatUtil; import com.facebook.react.uimanager.PixelUtil; @@ -124,7 +125,7 @@ public class ReactImageView extends GenericDraweeView { @Override public void process(Bitmap output, Bitmap source) { - cornerRadii(sComputedCornerRadii); + getCornerRadii(sComputedCornerRadii); output.setHasAlpha(true); if (FloatUtil.floatsEqual(sComputedCornerRadii[0], 0f) @@ -160,7 +161,6 @@ public class ReactImageView extends GenericDraweeView { @Override public CloseableReference process(Bitmap source, PlatformBitmapFactory bitmapFactory) { final Rect destRect = new Rect(0, 0, getWidth(), getHeight()); - mScaleType.getTransform( sTileMatrix, destRect, source.getWidth(), source.getHeight(), 0.0f, 0.0f); @@ -181,7 +181,7 @@ public class ReactImageView extends GenericDraweeView { } } - private final List mSources; + private final List mSources = new LinkedList<>(); private @Nullable ImageSource mImageSource; private @Nullable ImageSource mCachedImageSource; @@ -194,12 +194,12 @@ public class ReactImageView extends GenericDraweeView { private float mBorderWidth; private float mBorderRadius = YogaConstants.UNDEFINED; private @Nullable float[] mBorderCornerRadii; - private ScalingUtils.ScaleType mScaleType; + private ScalingUtils.ScaleType mScaleType = ImageResizeMode.defaultValue(); private Shader.TileMode mTileMode = ImageResizeMode.defaultTileMode(); private boolean mIsDirty; private final AbstractDraweeControllerBuilder mDraweeControllerBuilder; - private final RoundedCornerPostprocessor mRoundedCornerPostprocessor; - private final TilePostprocessor mTilePostprocessor; + private @Nullable RoundedCornerPostprocessor mRoundedCornerPostprocessor; + private @Nullable TilePostprocessor mTilePostprocessor; private @Nullable IterativeBoxBlurPostProcessor mIterativeBoxBlurPostProcessor; private @Nullable ReactImageDownloadListener mDownloadListener; private @Nullable ControllerListener mControllerForTesting; @@ -222,13 +222,9 @@ public class ReactImageView extends GenericDraweeView { @Nullable GlobalImageLoadListener globalImageLoadListener, @Nullable Object callerContext) { super(context, buildHierarchy(context)); - mScaleType = ImageResizeMode.defaultValue(); mDraweeControllerBuilder = draweeControllerBuilder; - mRoundedCornerPostprocessor = new RoundedCornerPostprocessor(); - mTilePostprocessor = new TilePostprocessor(); mGlobalImageLoadListener = globalImageLoadListener; mCallerContext = callerContext; - mSources = new LinkedList<>(); } public void setShouldNotifyLoadEvents(boolean shouldNotify) { @@ -357,6 +353,11 @@ public class ReactImageView extends GenericDraweeView { public void setScaleType(ScalingUtils.ScaleType scaleType) { if (mScaleType != scaleType) { mScaleType = scaleType; + if (shouldUseRoundedCornerPostprocessing()) { + mRoundedCornerPostprocessor = new RoundedCornerPostprocessor(); + } else { + mRoundedCornerPostprocessor = null; + } mIsDirty = true; } } @@ -364,6 +365,11 @@ public class ReactImageView extends GenericDraweeView { public void setTileMode(Shader.TileMode tileMode) { if (mTileMode != tileMode) { mTileMode = tileMode; + if (isTiled()) { + mTilePostprocessor = new TilePostprocessor(); + } else { + mTilePostprocessor = null; + } mIsDirty = true; } } @@ -448,7 +454,7 @@ public class ReactImageView extends GenericDraweeView { // no worth marking as dirty if it already rendered.. } - private void cornerRadii(float[] computedCorners) { + private void getCornerRadii(float[] computedCorners) { float defaultBorderRadius = !YogaConstants.isUndefined(mBorderRadius) ? mBorderRadius : 0; computedCorners[0] = @@ -510,14 +516,9 @@ public class ReactImageView extends GenericDraweeView { hierarchy.setPlaceholderImage(mLoadingImageDrawable, ScalingUtils.ScaleType.CENTER); } - boolean usePostprocessorScaling = - mScaleType != ScalingUtils.ScaleType.CENTER_CROP - && mScaleType != ScalingUtils.ScaleType.FOCUS_CROP; + getCornerRadii(sComputedCornerRadii); RoundingParams roundingParams = hierarchy.getRoundingParams(); - - cornerRadii(sComputedCornerRadii); - roundingParams.setCornersRadii( sComputedCornerRadii[0], sComputedCornerRadii[1], @@ -529,11 +530,9 @@ public class ReactImageView extends GenericDraweeView { mBackgroundImageDrawable.setRadii(roundingParams.getCornersRadii()); hierarchy.setBackgroundImage(mBackgroundImageDrawable); } - - if (usePostprocessorScaling) { + if (shouldUseRoundedCornerPostprocessing()) { roundingParams.setCornersRadius(0); } - roundingParams.setBorder(mBorderColor, mBorderWidth); if (mOverlayColor != Color.TRANSPARENT) { roundingParams.setOverlayColor(mOverlayColor); @@ -548,13 +547,13 @@ public class ReactImageView extends GenericDraweeView { : mImageSource.isResource() ? 0 : REMOTE_IMAGE_FADE_DURATION_MS); List postprocessors = new LinkedList<>(); - if (usePostprocessorScaling) { + if (mRoundedCornerPostprocessor != null) { postprocessors.add(mRoundedCornerPostprocessor); } if (mIterativeBoxBlurPostProcessor != null) { postprocessors.add(mIterativeBoxBlurPostProcessor); } - if (isTiled()) { + if (mTilePostprocessor != null) { postprocessors.add(mTilePostprocessor); } Postprocessor postprocessor = MultiPostprocessor.from(postprocessors); @@ -648,6 +647,12 @@ public class ReactImageView extends GenericDraweeView { return mTileMode != Shader.TileMode.CLAMP; } + private boolean shouldUseRoundedCornerPostprocessing() { + return mScaleType != ScalingUtils.ScaleType.CENTER_CROP + && mScaleType != ScalingUtils.ScaleType.FOCUS_CROP + && ReactFeatureFlags.enableRoundedCornerPostprocessing; + } + private void setSourceImage() { mImageSource = null; if (mSources.isEmpty()) { diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 702e7928911..f76e845c8fd 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -382,15 +382,10 @@ class MultipleSourcesExample extends React.Component< width: 38, height: 38, }, - { - uri: 'https://www.facebook.com/favicon.ico', - width: 76, - height: 76, - }, { uri: 'https://www.facebook.com/ads/pics/successstories.png', - width: 400, - height: 400, + width: 100, + height: 100, }, ]} /> @@ -596,8 +591,9 @@ const smallImage = { const styles = StyleSheet.create({ base: { - width: 38, - height: 38, + width: 64, + height: 64, + margin: 4, }, leftMargin: { marginLeft: 10, @@ -627,9 +623,11 @@ const styles = StyleSheet.create({ icon: { width: 15, height: 15, + margin: 4, }, horizontal: { flexDirection: 'row', + flexWrap: 'wrap', }, gif: { flex: 1, @@ -791,24 +789,7 @@ exports.examples = [ platform: 'ios', }, { - title: 'Border Color', - render: function (): React.Node { - return ( - - - - ); - }, - }, - { - title: 'Border Width', + title: 'Borders', render: function (): React.Node { return ( @@ -830,20 +811,16 @@ exports.examples = [ return ( + - + + ); }, @@ -876,22 +888,26 @@ exports.examples = [ return ( + + - - ); }, @@ -902,26 +918,11 @@ exports.examples = [ return ( - - - - - + + + + + ); }, @@ -966,27 +967,15 @@ exports.examples = [ /> @@ -999,27 +988,15 @@ exports.examples = [ /> @@ -1038,19 +1015,15 @@ exports.examples = [ - Contain + Contain - {/* $FlowFixMe[incompatible-type] (>=0.115.0 site=react_ - * native_fb) This comment suppresses an error found when - * Flow v0.115 was deployed. To see the error, delete this - * comment and run Flow. */} - Cover + Cover - Stretch + Stretch - {/* $FlowFixMe[incompatible-type] (>=0.115.0 site=react_ - * native_fb) This comment suppresses an error found when - * Flow v0.115 was deployed. To see the error, delete this - * comment and run Flow. */} - Repeat + Repeat - {/* $FlowFixMe[incompatible-type] (>=0.115.0 site=react_ - * native_fb) This comment suppresses an error found when - * Flow v0.115 was deployed. To see the error, delete this - * comment and run Flow. */} - Center + Center =0.115.0 site=react_native_fb) This comment - * suppresses an error found when Flow v0.115 was deployed. To see the - * error, delete this comment and run Flow. */ - /* $FlowFixMe[incompatible-type] (>=0.115.0 site=react_native_fb) This - * comment suppresses an error found when Flow v0.115 was deployed. To - * see the error, delete this comment and run Flow. */ return ; }, }, @@ -1195,32 +1154,12 @@ exports.examples = [ render: function (): React.Node { return ( - - - - - - + + + + + + ); },