Skip to content

Use BackgroundStyleApplicator for Image #45692

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

Closed
NickGerleman wants to merge 7 commits into from
Closed

Use BackgroundStyleApplicator for Image #45692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
807b43f
Expose string types for `boxShadow` and `filter`
NickGerleman Jul 26, 2024
36d9aa9
Add more style value types
NickGerleman Jul 26, 2024
ffb9f5c
Expose more in CSSBackgroundDrawable
NickGerleman Jul 26, 2024
f467813
Allow NaN values in PixelUtil
NickGerleman Jul 26, 2024
7f24ce2
Add CompositeBackgroundDrawable and BackgroundStyleApplicator
NickGerleman Jul 26, 2024
70ef906
Add feature flag
NickGerleman Jul 26, 2024
7b493ea
Use BackgroundStyleApplicator for Image (#45692)
NickGerleman Jul 26, 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
4 changes: 2 additions & 2 deletions packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -778,8 +778,8 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
elevation?: number,
pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
cursor?: CursorValue,
experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive>,
experimental_filter?: $ReadOnlyArray<FilterFunction>,
experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
experimental_mixBlendMode?: ____BlendMode_Internal,
}>;

Expand Down
4 changes: 2 additions & 2 deletions packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8776,8 +8776,8 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
elevation?: number,
pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\",
cursor?: CursorValue,
experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive>,
experimental_filter?: $ReadOnlyArray<FilterFunction>,
experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
experimental_mixBlendMode?: ____BlendMode_Internal,
}>;
export type ____ViewStyle_Internal = $ReadOnly<{
Expand Down
100 changes: 100 additions & 0 deletions packages/react-native/ReactAndroid/api/ReactAndroid.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3969,6 +3969,22 @@ public abstract interface class com/facebook/react/turbomodule/core/interfaces/T
public abstract fun getBindingsInstaller ()Lcom/facebook/react/turbomodule/core/interfaces/BindingsInstallerHolder;
}

public final class com/facebook/react/uimanager/BackgroundStyleApplicator {
public static final field INSTANCE Lcom/facebook/react/uimanager/BackgroundStyleApplicator;
public static final fun clipToPaddingBox (Landroid/view/View;Landroid/graphics/Canvas;)V
public static final fun getBackgroundColor (Landroid/view/View;)Ljava/lang/Integer;
public static final fun getBorderColor (Landroid/view/View;Lcom/facebook/react/uimanager/style/LogicalEdge;)Ljava/lang/Integer;
public static final fun getBorderRadius (Landroid/view/View;Lcom/facebook/react/uimanager/style/BorderRadiusProp;)Lcom/facebook/react/uimanager/LengthPercentage;
public static final fun getBorderStyle (Landroid/view/View;)Lcom/facebook/react/uimanager/style/BorderStyle;
public static final fun getBorderWidth (Landroid/view/View;Lcom/facebook/react/uimanager/style/LogicalEdge;)Ljava/lang/Float;
public static final fun setBackgroundColor (Landroid/view/View;Ljava/lang/Integer;)V
public static final fun setBorderColor (Landroid/view/View;Lcom/facebook/react/uimanager/style/LogicalEdge;Ljava/lang/Integer;)V
public static final fun setBorderRadius (Landroid/view/View;Lcom/facebook/react/uimanager/style/BorderRadiusProp;Lcom/facebook/react/uimanager/LengthPercentage;)V
public static final fun setBorderStyle (Landroid/view/View;Lcom/facebook/react/uimanager/style/BorderStyle;)V
public static final fun setBorderWidth (Landroid/view/View;Lcom/facebook/react/uimanager/style/LogicalEdge;Ljava/lang/Float;)V
public static final fun setShadows (Landroid/view/View;Ljava/util/List;)V
}

public abstract class com/facebook/react/uimanager/BaseViewManager : com/facebook/react/uimanager/ViewManager, android/view/View$OnLayoutChangeListener, com/facebook/react/uimanager/BaseViewManagerInterface {
public fun <init> ()V
public fun <init> (Lcom/facebook/react/bridge/ReactApplicationContext;)V
Expand Down Expand Up @@ -5915,6 +5931,49 @@ public final class com/facebook/react/uimanager/style/BorderRadiusStyle {
public fun toString ()Ljava/lang/String;
}

public final class com/facebook/react/uimanager/style/BorderStyle : java/lang/Enum {
public static final field Companion Lcom/facebook/react/uimanager/style/BorderStyle$Companion;
public static final field DASHED Lcom/facebook/react/uimanager/style/BorderStyle;
public static final field DOTTED Lcom/facebook/react/uimanager/style/BorderStyle;
public static final field SOLID Lcom/facebook/react/uimanager/style/BorderStyle;
public static final fun fromString (Ljava/lang/String;)Lcom/facebook/react/uimanager/style/BorderStyle;
public static fun getEntries ()Lkotlin/enums/EnumEntries;
public static fun valueOf (Ljava/lang/String;)Lcom/facebook/react/uimanager/style/BorderStyle;
public static fun values ()[Lcom/facebook/react/uimanager/style/BorderStyle;
}

public final class com/facebook/react/uimanager/style/BorderStyle$Companion {
public final fun fromString (Ljava/lang/String;)Lcom/facebook/react/uimanager/style/BorderStyle;
}

public final class com/facebook/react/uimanager/style/BoxShadow {
public static final field Companion Lcom/facebook/react/uimanager/style/BoxShadow$Companion;
public fun <init> (FFLjava/lang/Integer;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Boolean;)V
public synthetic fun <init> (FFLjava/lang/Integer;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Boolean;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun component1 ()F
public final fun component2 ()F
public final fun component3 ()Ljava/lang/Integer;
public final fun component4 ()Ljava/lang/Float;
public final fun component5 ()Ljava/lang/Float;
public final fun component6 ()Ljava/lang/Boolean;
public final fun copy (FFLjava/lang/Integer;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Boolean;)Lcom/facebook/react/uimanager/style/BoxShadow;
public static synthetic fun copy$default (Lcom/facebook/react/uimanager/style/BoxShadow;FFLjava/lang/Integer;Ljava/lang/Float;Ljava/lang/Float;Ljava/lang/Boolean;ILjava/lang/Object;)Lcom/facebook/react/uimanager/style/BoxShadow;
public fun equals (Ljava/lang/Object;)Z
public final fun getBlurRadius ()Ljava/lang/Float;
public final fun getColor ()Ljava/lang/Integer;
public final fun getInset ()Ljava/lang/Boolean;
public final fun getOffsetX ()F
public final fun getOffsetY ()F
public final fun getSpreadRadius ()Ljava/lang/Float;
public fun hashCode ()I
public static final fun parse (Lcom/facebook/react/bridge/ReadableMap;)Lcom/facebook/react/uimanager/style/BoxShadow;
public fun toString ()Ljava/lang/String;
}

public final class com/facebook/react/uimanager/style/BoxShadow$Companion {
public final fun parse (Lcom/facebook/react/bridge/ReadableMap;)Lcom/facebook/react/uimanager/style/BoxShadow;
}

public final class com/facebook/react/uimanager/style/ComputedBorderRadius {
public fun <init> ()V
public fun <init> (FFFF)V
Expand Down Expand Up @@ -5945,6 +6004,47 @@ public final class com/facebook/react/uimanager/style/ComputedBorderRadiusProp :
public static fun values ()[Lcom/facebook/react/uimanager/style/ComputedBorderRadiusProp;
}

public abstract class com/facebook/react/uimanager/style/LogicalEdge : java/lang/Enum {
public static final field ALL Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field BLOCK Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field BLOCK_END Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field BLOCK_START Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field BOTTOM Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field Companion Lcom/facebook/react/uimanager/style/LogicalEdge$Companion;
public static final field END Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field HORIZONTAL Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field LEFT Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field RIGHT Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field START Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field TOP Lcom/facebook/react/uimanager/style/LogicalEdge;
public static final field VERTICAL Lcom/facebook/react/uimanager/style/LogicalEdge;
public synthetic fun <init> (Ljava/lang/String;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public static final fun fromSpacingType (I)Lcom/facebook/react/uimanager/style/LogicalEdge;
public static fun getEntries ()Lkotlin/enums/EnumEntries;
public abstract fun toSpacingType ()I
public static fun valueOf (Ljava/lang/String;)Lcom/facebook/react/uimanager/style/LogicalEdge;
public static fun values ()[Lcom/facebook/react/uimanager/style/LogicalEdge;
}

public final class com/facebook/react/uimanager/style/LogicalEdge$Companion {
public final fun fromSpacingType (I)Lcom/facebook/react/uimanager/style/LogicalEdge;
}

public final class com/facebook/react/uimanager/style/Overflow : java/lang/Enum {
public static final field Companion Lcom/facebook/react/uimanager/style/Overflow$Companion;
public static final field HIDDEN Lcom/facebook/react/uimanager/style/Overflow;
public static final field SCROLL Lcom/facebook/react/uimanager/style/Overflow;
public static final field VISIBLE Lcom/facebook/react/uimanager/style/Overflow;
public static final fun fromString (Ljava/lang/String;)Lcom/facebook/react/uimanager/style/Overflow;
public static fun getEntries ()Lkotlin/enums/EnumEntries;
public static fun valueOf (Ljava/lang/String;)Lcom/facebook/react/uimanager/style/Overflow;
public static fun values ()[Lcom/facebook/react/uimanager/style/Overflow;
}

public final class com/facebook/react/uimanager/style/Overflow$Companion {
public final fun fromString (Ljava/lang/String;)Lcom/facebook/react/uimanager/style/Overflow;
}

public class com/facebook/react/uimanager/util/ReactFindViewUtil {
public fun <init> ()V
public static fun addViewListener (Lcom/facebook/react/uimanager/util/ReactFindViewUtil$OnViewFoundListener;)V
Expand Down
8 changes: 7 additions & 1 deletion ...Android/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<ca939ab47fa68fbb5acf5ea34481def9>>
* @generated SignedSource<<d00002000e9117592286a80a11b8b1f8>>
*/

/**
Expand Down Expand Up @@ -76,6 +76,12 @@ public object ReactNativeFeatureFlags {
@JvmStatic
public fun enableAlignItemsBaselineOnFabricIOS(): Boolean = accessor.enableAlignItemsBaselineOnFabricIOS()

/**
* Use BackgroundStyleApplicator in place of other background/border drawing code
*/
@JvmStatic
public fun enableBackgroundStyleApplicator(): Boolean = accessor.enableBackgroundStyleApplicator()

/**
* Clean yoga node when <TextInput /> does not change.
*/
Expand Down
12 changes: 11 additions & 1 deletion .../main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<2a8d5ca8a0ac46b4d3177cb8b12ad7ac>>
* @generated SignedSource<<ce8cf6803eef7df49f3cb0bcd57a292a>>
*/

/**
Expand All @@ -28,6 +28,7 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
private var completeReactInstanceCreationOnBgThreadOnAndroidCache: Boolean? = null
private var destroyFabricSurfacesInReactInstanceManagerCache: Boolean? = null
private var enableAlignItemsBaselineOnFabricIOSCache: Boolean? = null
private var enableBackgroundStyleApplicatorCache: Boolean? = null
private var enableCleanTextInputYogaNodeCache: Boolean? = null
private var enableFabricRendererExclusivelyCache: Boolean? = null
private var enableGranularShadowTreeStateReconciliationCache: Boolean? = null
Expand Down Expand Up @@ -130,6 +131,15 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
return cached
}

override fun enableBackgroundStyleApplicator(): Boolean {
var cached = enableBackgroundStyleApplicatorCache
if (cached == null) {
cached = ReactNativeFeatureFlagsCxxInterop.enableBackgroundStyleApplicator()
enableBackgroundStyleApplicatorCache = cached
}
return cached
}

override fun enableCleanTextInputYogaNode(): Boolean {
var cached = enableCleanTextInputYogaNodeCache
if (cached == null) {
Expand Down
4 changes: 3 additions & 1 deletion ...c/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<aaf205098eaac9171aa15bc8f7bda805>>
* @generated SignedSource<<5dbc425b8d99c30ea6d5a5896145e1c6>>
*/

/**
Expand Down Expand Up @@ -44,6 +44,8 @@ public object ReactNativeFeatureFlagsCxxInterop {

@DoNotStrip @JvmStatic public external fun enableAlignItemsBaselineOnFabricIOS(): Boolean

@DoNotStrip @JvmStatic public external fun enableBackgroundStyleApplicator(): Boolean

@DoNotStrip @JvmStatic public external fun enableCleanTextInputYogaNode(): Boolean

@DoNotStrip @JvmStatic public external fun enableFabricRendererExclusively(): Boolean
Expand Down
4 changes: 3 additions & 1 deletion ...src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<abdee8d0b85b0d9940207b9cbe6d3f78>>
* @generated SignedSource<<d6a0d31fe4d2bc64172be989e6a6dcbc>>
*/

/**
Expand Down Expand Up @@ -39,6 +39,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi

override fun enableAlignItemsBaselineOnFabricIOS(): Boolean = true

override fun enableBackgroundStyleApplicator(): Boolean = false

override fun enableCleanTextInputYogaNode(): Boolean = false

override fun enableFabricRendererExclusively(): Boolean = false
Expand Down
13 changes: 12 additions & 1 deletion ...ain/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<82f6d4eda4011bee81810af366f5d677>>
* @generated SignedSource<<54b74f1ba5e46b981b9b4e9a0b6c8dc0>>
*/

/**
Expand Down Expand Up @@ -32,6 +32,7 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
private var completeReactInstanceCreationOnBgThreadOnAndroidCache: Boolean? = null
private var destroyFabricSurfacesInReactInstanceManagerCache: Boolean? = null
private var enableAlignItemsBaselineOnFabricIOSCache: Boolean? = null
private var enableBackgroundStyleApplicatorCache: Boolean? = null
private var enableCleanTextInputYogaNodeCache: Boolean? = null
private var enableFabricRendererExclusivelyCache: Boolean? = null
private var enableGranularShadowTreeStateReconciliationCache: Boolean? = null
Expand Down Expand Up @@ -142,6 +143,16 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
return cached
}

override fun enableBackgroundStyleApplicator(): Boolean {
var cached = enableBackgroundStyleApplicatorCache
if (cached == null) {
cached = currentProvider.enableBackgroundStyleApplicator()
accessedFeatureFlags.add("enableBackgroundStyleApplicator")
enableBackgroundStyleApplicatorCache = cached
}
return cached
}

override fun enableCleanTextInputYogaNode(): Boolean {
var cached = enableCleanTextInputYogaNodeCache
if (cached == null) {
Expand Down
4 changes: 3 additions & 1 deletion ...src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<ece587d5e6643fb906cfee816824f224>>
* @generated SignedSource<<b5618b0c006281e1f6d8bfc9e952539d>>
*/

/**
Expand Down Expand Up @@ -39,6 +39,8 @@ public interface ReactNativeFeatureFlagsProvider {

@DoNotStrip public fun enableAlignItemsBaselineOnFabricIOS(): Boolean

@DoNotStrip public fun enableBackgroundStyleApplicator(): Boolean

@DoNotStrip public fun enableCleanTextInputYogaNode(): Boolean

@DoNotStrip public fun enableFabricRendererExclusively(): Boolean
Expand Down
Loading