diff --git a/packages/react-native/Libraries/Image/ImageViewNativeComponent.js b/packages/react-native/Libraries/Image/ImageViewNativeComponent.js index 29ff80a6140..44817e41069 100644 --- a/packages/react-native/Libraries/Image/ImageViewNativeComponent.js +++ b/packages/react-native/Libraries/Image/ImageViewNativeComponent.js @@ -113,6 +113,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = borderBottomRightRadius: true, borderTopRightRadius: true, loadingIndicatorSrc: true, + experimental_boxShadow: { + process: require('../StyleSheet/processBoxShadow').default, + }, }, } : { diff --git a/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js b/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js index efea30ac883..8e7ec4fea46 100644 --- a/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js +++ b/packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js @@ -10,6 +10,8 @@ 'use strict'; +import processBoxShadow from '../StyleSheet/processBoxShadow'; + const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes'); const resolveAssetSource = require('../Image/resolveAssetSource'); const processColor = require('../StyleSheet/processColor').default; @@ -193,6 +195,8 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any { return processFilter; case 'ImageSource': return resolveAssetSource; + case 'BoxShadow': + return processBoxShadow; } return null; } diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api index 352e1a00d99..8b839b9183f 100644 --- a/packages/react-native/ReactAndroid/api/ReactAndroid.api +++ b/packages/react-native/ReactAndroid/api/ReactAndroid.api @@ -4008,6 +4008,7 @@ public final class com/facebook/react/uimanager/BackgroundStyleApplicator { 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 setBoxShadow (Landroid/view/View;Lcom/facebook/react/bridge/ReadableArray;)V public static final fun setBoxShadow (Landroid/view/View;Ljava/util/List;)V } @@ -5440,6 +5441,7 @@ public final class com/facebook/react/uimanager/ViewProps { public static final field BORDER_WIDTH Ljava/lang/String; public static final field BOTTOM Ljava/lang/String; public static final field BOX_NONE Ljava/lang/String; + public static final field BOX_SHADOW Ljava/lang/String; public static final field COLLAPSABLE Ljava/lang/String; public static final field COLLAPSABLE_CHILDREN Ljava/lang/String; public static final field COLOR Ljava/lang/String; @@ -6515,6 +6517,7 @@ public final class com/facebook/react/views/image/ReactImageManager : com/facebo public final fun setBorderColor (Lcom/facebook/react/views/image/ReactImageView;Ljava/lang/Integer;)V public final fun setBorderRadius (Lcom/facebook/react/views/image/ReactImageView;IF)V public final fun setBorderWidth (Lcom/facebook/react/views/image/ReactImageView;F)V + public final fun setBoxShadow (Lcom/facebook/react/views/image/ReactImageView;Lcom/facebook/react/bridge/ReadableArray;)V public final fun setDefaultSource (Lcom/facebook/react/views/image/ReactImageView;Ljava/lang/String;)V public final fun setFadeDuration (Lcom/facebook/react/views/image/ReactImageView;I)V public final fun setHeaders (Lcom/facebook/react/views/image/ReactImageView;Lcom/facebook/react/bridge/ReadableMap;)V diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt index c5965342356..86b2739a55c 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt @@ -10,9 +10,12 @@ package com.facebook.react.uimanager import android.graphics.Canvas import android.graphics.Color import android.graphics.Rect +import android.os.Build import android.view.View import androidx.annotation.ColorInt import androidx.annotation.RequiresApi +import com.facebook.common.logging.FLog +import com.facebook.react.bridge.ReadableArray import com.facebook.react.common.annotations.UnstableReactNativeAPI import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable import com.facebook.react.uimanager.drawable.CompositeBackgroundDrawable @@ -121,6 +124,19 @@ public object BackgroundStyleApplicator { view.background = ensureCompositeBackgroundDrawable(view).withNewShadows(shadowDrawables) } + @JvmStatic + public fun setBoxShadow(view: View, shadows: ReadableArray): Unit { + if (Build.VERSION.SDK_INT < 31) { + FLog.w("BackgroundStyleApplicator", "\"boxShadow\" requires Android 12 or later") + } else { + val shadowStyles = mutableListOf() + for (i in 0..