Enable BackgroundStyleApplicator and boxShadow for View (facebook#45832)

Summary: Pull Request resolved: facebook#45832 The main one! This allows box-shadow to be used in View, and uses BackgroundStyleApplicator (if flag is enabled) for background management. Changelog: [Internal] Reviewed By: joevilches Differential Revision: D60491176 fbshipit-source-id: c068b1dc971253f1303de5bae62e42a9eceb0de6
rshest · Aug 1, 2024 · fdfa0b1 · fdfa0b1
1 parent 087193c
commit fdfa0b1
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 117 deletions.
diff --git a/packages/react-native/Libraries/Components/View/ViewNativeComponent.js b/packages/react-native/Libraries/Components/View/ViewNativeComponent.js
@@ -94,6 +94,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderBlockStartColor: {
             process: require('../../StyleSheet/processColor').default,
           },
+          experimental_boxShadow: {
+            process: require('../../StyleSheet/processBoxShadow').default,
+          },
 
           focusable: true,
           overflow: true,

diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api
@@ -4091,6 +4091,7 @@ public final class com/facebook/react/uimanager/BackgroundStyleApplicator {
 	public static final fun setBorderWidth (Landroid/view/View;Lcom/facebook/react/uimanager/style/LogicalEdge;Ljava/lang/Float;)V
 	public static final fun setBoxShadow (Landroid/view/View;Lcom/facebook/react/bridge/ReadableArray;)V
 	public static final fun setBoxShadow (Landroid/view/View;Ljava/util/List;)V
+	public static final fun setFeedbackUnderlay (Landroid/view/View;Landroid/graphics/drawable/Drawable;)V
 }
 
 public abstract class com/facebook/react/uimanager/BaseViewManager : com/facebook/react/uimanager/ViewManager, android/view/View$OnLayoutChangeListener, com/facebook/react/uimanager/BaseViewManagerInterface {
@@ -8195,7 +8196,6 @@ public class com/facebook/react/views/view/ReactViewGroup : android/view/ViewGro
 	public fun requestLayout ()V
 	public fun setBackfaceVisibility (Ljava/lang/String;)V
 	public fun setBackfaceVisibilityDependantOpacity ()V
-	public fun setBackground (Landroid/graphics/drawable/Drawable;)V
 	public fun setBackgroundColor (I)V
 	public fun setBorderColor (ILjava/lang/Integer;)V
 	public fun setBorderRadius (F)V
@@ -8234,11 +8234,14 @@ public class com/facebook/react/views/view/ReactViewManager : com/facebook/react
 	public fun receiveCommand (Lcom/facebook/react/views/view/ReactViewGroup;Ljava/lang/String;Lcom/facebook/react/bridge/ReadableArray;)V
 	public fun setAccessible (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
 	public fun setBackfaceVisibility (Lcom/facebook/react/views/view/ReactViewGroup;Ljava/lang/String;)V
+	public synthetic fun setBackgroundColor (Landroid/view/View;I)V
+	public fun setBackgroundColor (Lcom/facebook/react/views/view/ReactViewGroup;I)V
 	public fun setBorderColor (Lcom/facebook/react/views/view/ReactViewGroup;ILjava/lang/Integer;)V
 	public fun setBorderRadius (Lcom/facebook/react/views/view/ReactViewGroup;IF)V
 	public fun setBorderRadius (Lcom/facebook/react/views/view/ReactViewGroup;ILcom/facebook/react/bridge/Dynamic;)V
 	public fun setBorderStyle (Lcom/facebook/react/views/view/ReactViewGroup;Ljava/lang/String;)V
 	public fun setBorderWidth (Lcom/facebook/react/views/view/ReactViewGroup;IF)V
+	public fun setBoxShadow (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
 	public fun setCollapsable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
 	public fun setCollapsableChildren (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
 	public fun setFocusable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V

diff --git a/...tive/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt b/...tive/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt
@@ -10,6 +10,7 @@ package com.facebook.react.uimanager
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Rect
+import android.graphics.drawable.Drawable
 import android.os.Build
 import android.view.View
 import androidx.annotation.ColorInt
@@ -149,6 +150,11 @@ public object BackgroundStyleApplicator {
     BackgroundStyleApplicator.setBoxShadow(view, shadowStyles)
   }
 
+  @JvmStatic
+  public fun setFeedbackUnderlay(view: View, drawable: Drawable?): Unit {
+    view.background = ensureCompositeBackgroundDrawable(view).withNewFeedbackUnderlay(drawable)
+  }
+
   @JvmStatic
   public fun clipToPaddingBox(view: View, canvas: Canvas): Unit {
     // The canvas may be scrolled, so we need to offset

diff --git a/...ndroid/src/main/java/com/facebook/react/uimanager/drawable/CompositeBackgroundDrawable.kt b/...ndroid/src/main/java/com/facebook/react/uimanager/drawable/CompositeBackgroundDrawable.kt
@@ -34,11 +34,11 @@ internal class CompositeBackgroundDrawable(
      */
     public val cssBackground: CSSBackgroundDrawable? = null,
 
+    /** TouchableNativeFeeback set selection background, like "SelectableBackground" */
+    public val feedbackUnderlay: Drawable? = null,
+
     /** Inset box-shadows */
     public val innerShadows: List<Drawable> = emptyList(),
-
-    /** Native riplple effect (e.g. used by TouchableNativeFeedback) */
-    public val nativeRipple: Drawable? = null
 ) :
     LayerDrawable(
         listOfNotNull(
@@ -48,8 +48,8 @@ internal class CompositeBackgroundDrawable(
                 // https://drafts.csswg.org/css-backgrounds/#shadow-layers
                 *outerShadows.asReversed().toTypedArray(),
                 cssBackground,
-                *innerShadows.asReversed().toTypedArray(),
-                nativeRipple)
+                feedbackUnderlay,
+                *innerShadows.asReversed().toTypedArray())
             .toTypedArray()) {
 
   init {
@@ -63,19 +63,19 @@ internal class CompositeBackgroundDrawable(
       cssBackground: CSSBackgroundDrawable?
   ): CompositeBackgroundDrawable {
     return CompositeBackgroundDrawable(
-        originalBackground, outerShadows, cssBackground, innerShadows, nativeRipple)
+        originalBackground, outerShadows, cssBackground, feedbackUnderlay, innerShadows)
   }
 
   public fun withNewShadows(
       outerShadows: List<Drawable>,
       innerShadows: List<Drawable>
   ): CompositeBackgroundDrawable {
     return CompositeBackgroundDrawable(
-        originalBackground, outerShadows, cssBackground, innerShadows, nativeRipple)
+        originalBackground, outerShadows, cssBackground, feedbackUnderlay, innerShadows)
   }
 
-  public fun withNewNativeRipple(newRipple: Drawable?): CompositeBackgroundDrawable {
+  public fun withNewFeedbackUnderlay(newUnderlay: Drawable?): CompositeBackgroundDrawable {
     return CompositeBackgroundDrawable(
-        originalBackground, outerShadows, cssBackground, innerShadows, newRipple)
+        originalBackground, outerShadows, cssBackground, newUnderlay, innerShadows)
   }
 }