hack to get box shadow propagated

Differential Revision: D60083271
joevilches · Jul 25, 2024 · 3a376a6 · 3a376a6
1 parent 8af5e89
commit 3a376a6
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 3 deletions.
diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js
@@ -109,7 +109,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   shadowOffset: {diff: sizesDiffer},
   shadowOpacity: true,
   shadowRadius: true,
-
+  unstable_boxShadow: true,
   /**
    * Transform
    */

diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js
@@ -174,6 +174,7 @@ const validAttributesForNonEventProps = {
   elevation: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},
   zIndex: true,
+  unstable_boxShadow: true,
   renderToHardwareTextureAndroid: true,
   testID: true,
   nativeID: true,

diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js
@@ -665,6 +665,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
    * @platform ios
    */
   shadowColor?: ____ColorValue_Internal,
+  unstable_boxShadow?: mixed,
   /**
    * Sets the drop shadow offset
    * @platform ios

diff --git a/...react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/...react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
@@ -10,6 +10,8 @@
 import android.graphics.BlendMode;
 import android.graphics.Color;
 import android.graphics.Paint;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.LayerDrawable;
 import android.os.Build;
 import android.text.TextUtils;
 import android.view.View;
@@ -33,13 +35,19 @@
 import com.facebook.react.uimanager.annotations.ReactProp;
 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.drawable.InsetBoxShadowDrawable;
+import com.facebook.react.uimanager.drawable.OutsetBoxShadowDrawable;
 import com.facebook.react.uimanager.events.PointerEventHelper;
 import com.facebook.react.uimanager.util.ReactFindViewUtil;
 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
+import android.util.Log;
+
+
 /**
  * Base class that should be suitable for the majority of subclasses of {@link ViewManager}. It
  * provides support for base view properties such as backgroundColor, opacity, etc.
@@ -213,6 +221,38 @@ public void setMixBlendMode(@NonNull T view, @Nullable String mixBlendMode) {
     }
   }
 
+  @ReactProp(name = ViewProps.BOX_SHADOW)
+  public void setBoxShadow(@NonNull T view, @Nullable ReadableArray boxShadow) {
+    Log.i("foo", "joevilchess Hi there");
+    if (Build.VERSION.SDK_INT < 31) {
+      FLog.w(ReactConstants.TAG, "boxShadow is not supported on Android API < 31");
+    }
+    if (boxShadow == null) {
+      Log.i("foo", "joevilchess shadow is null");
+      return;
+    }
+
+    int color = Color.BLACK;
+    float offsetX = (float) boxShadow.getDouble(1);
+    float offsetY = (float) boxShadow.getDouble(2);
+    float blur = (float) boxShadow.getDouble(3);
+    float spread = (float) boxShadow.getDouble(4);
+    boolean inset = boxShadow.getString(5) != null;
+
+    CSSBackgroundDrawable backgroundDrawable = (CSSBackgroundDrawable) view.getBackground();
+    if (inset) {
+      Drawable boxShadowDrawable =
+          new InsetBoxShadowDrawable(
+              view.getContext(), backgroundDrawable, color, offsetX, offsetY, blur, spread);
+      view.setBackground(new LayerDrawable(new Drawable[] {backgroundDrawable, boxShadowDrawable}));
+    } else {
+      Drawable boxShadowDrawable =
+          new OutsetBoxShadowDrawable(
+              view.getContext(), backgroundDrawable, color, offsetX, offsetY, blur, spread);
+      view.setBackground(new LayerDrawable(new Drawable[] {backgroundDrawable, boxShadowDrawable}));
+    }
+  }
+
   @Override
   @ReactProp(name = ViewProps.TRANSFORM)
   public void setTransform(@NonNull T view, @Nullable ReadableArray matrix) {

diff --git a/...ive/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java b/...ive/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManagerInterface.java
@@ -52,6 +52,8 @@ public interface BaseViewManagerInterface<T extends View> {
 
   void setMixBlendMode(T view, String setMixBlendMode);
 
+  void setBoxShadow(T view, @Nullable ReadableArray boxShadow);
+
   void setShadowColor(T view, int shadowColor);
 
   void setImportantForAccessibility(T view, @Nullable String importantForAccessibility);

diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt
@@ -161,6 +161,8 @@ public object ViewProps {
   public const val SCALE_Y: String = "scaleY"
   public const val TRANSLATE_X: String = "translateX"
   public const val TRANSLATE_Y: String = "translateY"
+  public const val BOX_SHADOW: String = "unstable_boxShadow"
+
   /** Used to locate views in end-to-end (UI) tests. */
   public const val TEST_ID: String = "testID"
   public const val NATIVE_ID: String = "nativeID"

diff --git a/...react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java b/...react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.java
@@ -226,8 +226,7 @@ public void setBackgroundColor(int color) {
 
   @Override
   public void setBackground(Drawable drawable) {
-    throw new UnsupportedOperationException(
-        "This method is not supported for ReactViewGroup instances");
+    super.setBackground(drawable);
   }
 
   public void setTranslucentBackgroundDrawable(@Nullable Drawable background) {