Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Linear gradient border styles with BackgroundStyleApplicator #46084

Closed
wants to merge 5 commits into from
Closed

fix: Linear gradient border styles with BackgroundStyleApplicator #46084

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6234525
fix: gradient with background style applicator
intergalacticspacehighway Aug 18, 2024
a91a41a
Merge branch 'main' into fix/gradient-background-style-applicator
intergalacticspacehighway Aug 23, 2024
b60e990
clear gradient on null
intergalacticspacehighway Aug 23, 2024
dcfd810
background image layer interface
intergalacticspacehighway Aug 24, 2024
4bb262a
use list instead of array
intergalacticspacehighway Aug 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions ...tive/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import com.facebook.react.uimanager.drawable.InsetBoxShadowDrawable
import com.facebook.react.uimanager.drawable.MIN_INSET_BOX_SHADOW_SDK_VERSION
import com.facebook.react.uimanager.drawable.MIN_OUTSET_BOX_SHADOW_SDK_VERSION
import com.facebook.react.uimanager.drawable.OutsetBoxShadowDrawable
import com.facebook.react.uimanager.style.BackgroundImageLayer
import com.facebook.react.uimanager.style.BorderInsets
import com.facebook.react.uimanager.style.BorderRadiusProp
import com.facebook.react.uimanager.style.BorderRadiusStyle
Expand All @@ -51,6 +52,11 @@ public object BackgroundStyleApplicator {
ensureCSSBackground(view).color = color ?: Color.TRANSPARENT
}

@JvmStatic
Copy link
Contributor

Choose a reason for hiding this comment

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

  1. We might eventually support background images based on URI, in which case we’d need to change this public API. Can we design in a way that will be future proof to that? Like maybe having a type for background image layer, that can be gradient type now, and uri later?
  2. Can we accept by list instead of array for consistency?

public fun setBackgroundImage(view: View, backgroundImageLayers: List<BackgroundImageLayer>?): Unit {
ensureCSSBackground(view).setBackgroundImage(backgroundImageLayers);
}

@JvmStatic
@ColorInt
public fun getBackgroundColor(view: View): Int? = getCSSBackground(view)?.color
Expand Down
26 changes: 14 additions & 12 deletions ...actAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@
import com.facebook.react.uimanager.style.BorderStyle;
import com.facebook.react.uimanager.style.ComputedBorderRadius;
import com.facebook.react.uimanager.style.CornerRadii;
import com.facebook.react.uimanager.style.Gradient;
import com.facebook.react.uimanager.style.BackgroundImageLayer;

import java.util.List;
import java.util.Locale;
import java.util.Objects;

Expand Down Expand Up @@ -115,7 +117,7 @@ public class CSSBackgroundDrawable extends Drawable {
/* Used by all types of background and for drawing borders */
private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private int mColor = Color.TRANSPARENT;
private @Nullable Gradient[] mGradients = null;
private @Nullable List<BackgroundImageLayer> mBackgroundImageLayers = null;
private int mAlpha = 255;

// There is a small gap between the edges of adjacent paths
Expand Down Expand Up @@ -338,8 +340,8 @@ public void setColor(int color) {
invalidateSelf();
}

public void setGradients(Gradient[] gradients) {
mGradients = gradients;
public void setBackgroundImage(@Nullable List<BackgroundImageLayer> backgroundImageLayers) {
mBackgroundImageLayers = backgroundImageLayers;
invalidateSelf();
}

Expand Down Expand Up @@ -398,8 +400,8 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
canvas.drawPath(Preconditions.checkNotNull(mBackgroundColorRenderPath), mPaint);
}

if (mGradients != null && mGradients.length > 0) {
mPaint.setShader(getGradientShader());
if (mBackgroundImageLayers != null && mBackgroundImageLayers.size() > 0) {
mPaint.setShader(getBackgroundImageShader());
mPaint.setStyle(Paint.Style.FILL);
canvas.drawPath(Preconditions.checkNotNull(mBackgroundColorRenderPath), mPaint);
mPaint.setShader(null);
Expand Down Expand Up @@ -1150,8 +1152,8 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
canvas.drawRect(getBounds(), mPaint);
}

if (mGradients != null && mGradients.length > 0) {
mPaint.setShader(getGradientShader());
if (mBackgroundImageLayers != null && mBackgroundImageLayers.size() > 0) {
mPaint.setShader(getBackgroundImageShader());
canvas.drawRect(getBounds(), mPaint);
mPaint.setShader(null);
}
Expand Down Expand Up @@ -1447,14 +1449,14 @@ public RectF getDirectionAwareBorderInsets() {
return new RectF(borderLeftWidth, borderTopWidth, borderRightWidth, borderBottomWidth);
}

private @Nullable Shader getGradientShader() {
if (mGradients == null) {
private @Nullable Shader getBackgroundImageShader() {
if (mBackgroundImageLayers == null) {
return null;
}

Shader compositeShader = null;
for (Gradient gradient : mGradients) {
Shader currentShader = gradient.getShader(getBounds());
for (BackgroundImageLayer backgroundImageLayer : mBackgroundImageLayers) {
Shader currentShader = backgroundImageLayer.getShader(getBounds());
if (currentShader == null) {
continue;
}
Expand Down
32 changes: 32 additions & 0 deletions ...ive/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BackgroundImageLayer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

package com.facebook.react.uimanager.style

import android.graphics.Rect
import android.graphics.Shader
import com.facebook.react.bridge.ReadableMap

public class BackgroundImageLayer(gradientMap: ReadableMap?) {
private val gradient: Gradient?

init {
gradient = if (gradientMap != null) {
try {
Gradient(gradientMap)
} catch (e: IllegalArgumentException) {
null
}
} else {
null
}
}

public fun getShader(bounds: Rect): Shader? {
return gradient?.getShader(bounds)
}
}
12 changes: 9 additions & 3 deletions ...react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,16 @@
import com.facebook.react.uimanager.common.UIManagerType;
import com.facebook.react.uimanager.common.ViewUtil;
import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable;
import com.facebook.react.uimanager.style.BackgroundImageLayer;
import com.facebook.react.uimanager.style.BorderRadiusProp;
import com.facebook.react.uimanager.style.BorderStyle;
import com.facebook.react.uimanager.style.ComputedBorderRadius;
import com.facebook.react.uimanager.style.CornerRadii;
import com.facebook.react.uimanager.style.Gradient;
import com.facebook.react.uimanager.style.LogicalEdge;
import com.facebook.react.uimanager.style.Overflow;

import java.util.List;

/**
* Backing for a React View. Has support for borders, but since borders aren't common, lazy
* initializes most of the storage needed for them.
Expand Down Expand Up @@ -248,8 +250,12 @@ public void setBackgroundColor(int color) {
}

@UnstableReactNativeAPI
/*package*/ void setGradients(@Nullable Gradient[] gradient) {
getOrCreateReactViewBackground().setGradients(gradient);
/*package*/ void setBackgroundImage(@Nullable List<BackgroundImageLayer> backgroundImageLayers) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.setBackgroundImage(this, backgroundImageLayers);
} else {
getOrCreateReactViewBackground().setBackgroundImage(backgroundImageLayers);
}
}

@Deprecated(since = "0.76.0", forRemoval = true)
Expand Down
16 changes: 10 additions & 6 deletions ...act-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,13 @@
import com.facebook.react.uimanager.common.UIManagerType;
import com.facebook.react.uimanager.common.ViewUtil;
import com.facebook.react.uimanager.events.EventDispatcher;
import com.facebook.react.uimanager.style.BackgroundImageLayer;
import com.facebook.react.uimanager.style.BorderRadiusProp;
import com.facebook.react.uimanager.style.BorderStyle;
import com.facebook.react.uimanager.style.Gradient;
import com.facebook.react.uimanager.style.LogicalEdge;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/** View manager for AndroidViews (plain React Views). */
Expand Down Expand Up @@ -102,14 +105,15 @@ public void setTVPreferredFocus(ReactViewGroup view, boolean hasTVPreferredFocus
public void setBackgroundImage(ReactViewGroup view, @Nullable ReadableArray backgroundImage) {
if (ViewUtil.getUIManagerType(view) == UIManagerType.FABRIC) {
if (backgroundImage != null && backgroundImage.size() > 0) {
Gradient[] gradients = new Gradient[backgroundImage.size()];
List<BackgroundImageLayer> backgroundImageLayers = new ArrayList<>(backgroundImage.size());
for (int i = 0; i < backgroundImage.size(); i++) {
ReadableMap gradientMap = backgroundImage.getMap(i);
gradients[i] = new Gradient(gradientMap);
ReadableMap backgroundImageMap = backgroundImage.getMap(i);
BackgroundImageLayer layer = new BackgroundImageLayer(backgroundImageMap);
backgroundImageLayers.add(layer);
}
view.setGradients(gradients);
view.setBackgroundImage(backgroundImageLayers);
} else {
view.setGradients(null);
view.setBackgroundImage(null);
}
}
}
Expand Down
Loading