From 2241c3146ffbfb8b77f54599b7cebb717537c15a Mon Sep 17 00:00:00 2001 From: Jorge Cabiedes Acosta Date: Wed, 11 Sep 2024 16:01:06 -0700 Subject: [PATCH] Remove `experimental_` prefix from `boxShadow` (#46404) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/46404 As title Second attempt to rename the prop. BoxShadow caused no issues after renaming but it was batched with `filter` which we reverted. Changelog: [General] [Changed] - Add official `boxShadow` CSSProperty. Reviewed By: NickGerleman, cyan33 Differential Revision: D62400814 fbshipit-source-id: ad721f6d11d614e987048e55556b05ff74a4747d --- .../Components/View/ReactNativeStyleAttributes.js | 2 +- .../NativeComponent/BaseViewConfig.android.js | 2 +- .../NativeComponent/BaseViewConfig.ios.js | 2 +- .../Libraries/StyleSheet/StyleSheetTypes.d.ts | 1 + .../Libraries/StyleSheet/StyleSheetTypes.js | 2 +- .../__snapshots__/public-api-test.js.snap | 2 +- packages/react-native/React/Views/RCTViewManager.m | 2 +- .../java/com/facebook/react/uimanager/ViewProps.kt | 2 +- .../renderer/components/view/BaseViewProps.cpp | 4 ++-- packages/react-native/types/experimental.d.ts | 4 ---- .../rn-tester/js/components/RNTPressableRow.js | 2 +- .../rn-tester/js/examples/Image/ImageExample.js | 6 +++--- .../js/examples/Text/TextExample.android.js | 2 +- .../rn-tester/js/examples/Text/TextExample.ios.js | 2 +- packages/rn-tester/js/examples/View/ViewExample.js | 14 +++++++------- 15 files changed, 23 insertions(+), 26 deletions(-) diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js index c186586d9a0983..8d0c7d6159643f 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -135,7 +135,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { /* * BoxShadow */ - experimental_boxShadow: {process: processBoxShadow}, + boxShadow: {process: processBoxShadow}, /** * Linear Gradient diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js index bceab558d60ee6..6f207e0304f813 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js @@ -169,7 +169,7 @@ const validAttributesForNonEventProps = { experimental_backgroundImage: { process: require('../StyleSheet/processBackgroundImage').default, }, - experimental_boxShadow: { + boxShadow: { process: require('../StyleSheet/processBoxShadow').default, }, experimental_filter: { diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js index d2259be0f8e94a..2dd7dfa794cebf 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js @@ -225,7 +225,7 @@ const validAttributesForNonEventProps = { experimental_filter: { process: require('../StyleSheet/processFilter').default, }, - experimental_boxShadow: { + boxShadow: { process: require('../StyleSheet/processBoxShadow').default, }, experimental_mixBlendMode: true, diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts index ae0a11716f85c0..806c57d76f4943 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -336,6 +336,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle { pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined; isolation?: 'auto' | 'isolate' | undefined; cursor?: CursorValue | undefined; + boxShadow?: ReadonlyArray | string | undefined; } export type FontVariant = diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index 09709ab8d97761..64357d0cbbd142 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -788,7 +788,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{ elevation?: number, pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only', cursor?: CursorValue, - experimental_boxShadow?: $ReadOnlyArray | string, + boxShadow?: $ReadOnlyArray | string, experimental_filter?: $ReadOnlyArray | string, experimental_mixBlendMode?: ____BlendMode_Internal, experimental_backgroundImage?: $ReadOnlyArray | string, diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 1c2e4d0c9b64bc..952e65cb644ec4 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -8366,7 +8366,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{ elevation?: number, pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\", cursor?: CursorValue, - experimental_boxShadow?: $ReadOnlyArray | string, + boxShadow?: $ReadOnlyArray | string, experimental_filter?: $ReadOnlyArray | string, experimental_mixBlendMode?: ____BlendMode_Internal, experimental_backgroundImage?: $ReadOnlyArray | string, diff --git a/packages/react-native/React/Views/RCTViewManager.m b/packages/react-native/React/Views/RCTViewManager.m index 5fc4cbf2e9d4be..1280e80ed7b6e6 100644 --- a/packages/react-native/React/Views/RCTViewManager.m +++ b/packages/react-native/React/Views/RCTViewManager.m @@ -438,7 +438,7 @@ - (void)updateAccessibilityTraitsForRole:(RCTView *)view withDefaultView:(RCTVie // filtered by view configs. } -RCT_CUSTOM_VIEW_PROPERTY(experimental_boxShadow, NSArray *, RCTView) +RCT_CUSTOM_VIEW_PROPERTY(boxShadow, NSArray *, RCTView) { // Property is only to be used in the new renderer. // It is necessary to add it here, otherwise it gets 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 index dfcd023945bd73..0ad18868a047cc 100644 --- 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 @@ -136,7 +136,7 @@ public object ViewProps { public const val BORDER_START_COLOR: String = "borderStartColor" public const val BORDER_END_COLOR: String = "borderEndColor" public const val ON_LAYOUT: String = "onLayout" - public const val BOX_SHADOW: String = "experimental_boxShadow" + public const val BOX_SHADOW: String = "boxShadow" public const val FILTER: String = "experimental_filter" public const val MIX_BLEND_MODE: String = "experimental_mixBlendMode" public const val TRANSFORM: String = "transform" diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp index eddaa113e20240..b1c1a119399346 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp @@ -155,7 +155,7 @@ BaseViewProps::BaseViewProps( : convertRawProp( context, rawProps, - "experimental_boxShadow", + "boxShadow", sourceProps.boxShadow, {})), filter( @@ -347,7 +347,7 @@ void BaseViewProps::setProp( RAW_SET_PROP_SWITCH_CASE_BASIC(experimental_layoutConformance); RAW_SET_PROP_SWITCH_CASE_BASIC(cursor); RAW_SET_PROP_SWITCH_CASE(filter, "experimental_filter"); - RAW_SET_PROP_SWITCH_CASE(boxShadow, "experimental_boxShadow"); + RAW_SET_PROP_SWITCH_CASE(boxShadow, "boxShadow"); // events field VIEW_EVENT_CASE(PointerEnter); VIEW_EVENT_CASE(PointerEnterCapture); diff --git a/packages/react-native/types/experimental.d.ts b/packages/react-native/types/experimental.d.ts index 870bed86133253..0767a1f230fb93 100644 --- a/packages/react-native/types/experimental.d.ts +++ b/packages/react-native/types/experimental.d.ts @@ -150,10 +150,6 @@ declare module '.' { } export interface ViewStyle { - experimental_boxShadow?: - | ReadonlyArray - | string - | undefined; experimental_filter?: ReadonlyArray | string | undefined; experimental_mixBlendMode?: BlendMode | undefined; experimental_backgroundImage?: diff --git a/packages/rn-tester/js/components/RNTPressableRow.js b/packages/rn-tester/js/components/RNTPressableRow.js index 5a972df412f1cf..7892eabf81cc9b 100644 --- a/packages/rn-tester/js/components/RNTPressableRow.js +++ b/packages/rn-tester/js/components/RNTPressableRow.js @@ -69,7 +69,7 @@ const styles = StyleSheet.create({ paddingVertical: 16, marginVertical: 5, marginHorizontal: 16, - experimental_boxShadow: '0 2px 4px -1px rgba(0, 0, 0, 0.25)', + boxShadow: '0 2px 4px -1px rgba(0, 0, 0, 0.25)', borderRadius: 8, }, descriptionText: { diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 13656e1aee8603..65c033135e8bb7 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -826,10 +826,10 @@ const styles = StyleSheet.create({ }, boxShadowWithBackground: { backgroundColor: 'lightblue', - experimental_boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.5)', + boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.5)', }, boxShadowMultiOutsetInset: { - experimental_boxShadow: + boxShadow: '-5px -5px 10px 2px rgba(0, 128, 0, 0.5), 5px 5px 10px 2px rgba(128, 0, 0, 0.5), inset orange 0px 0px 20px 0px, black 0px 0px 5px 1px', borderColor: 'blue', borderWidth: 1, @@ -842,7 +842,7 @@ const styles = StyleSheet.create({ borderBottomLeftRadius: 20, marginRight: 80, marginTop: 40, - experimental_boxShadow: '80px 0px 10px 0px hotpink', + boxShadow: '80px 0px 10px 0px hotpink', transform: 'rotate(-15deg)', }, vectorDrawableRow: { diff --git a/packages/rn-tester/js/examples/Text/TextExample.android.js b/packages/rn-tester/js/examples/Text/TextExample.android.js index 1821b526a7747b..7789b23a15cb0d 100644 --- a/packages/rn-tester/js/examples/Text/TextExample.android.js +++ b/packages/rn-tester/js/examples/Text/TextExample.android.js @@ -1444,7 +1444,7 @@ const examples = [ testID="text-box-shadow" style={{ borderRadius: 10, - experimental_boxShadow: '0 0 10px red', + boxShadow: '0 0 10px red', }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. diff --git a/packages/rn-tester/js/examples/Text/TextExample.ios.js b/packages/rn-tester/js/examples/Text/TextExample.ios.js index 2a1e993f19136e..0316e0b47eb36d 100644 --- a/packages/rn-tester/js/examples/Text/TextExample.ios.js +++ b/packages/rn-tester/js/examples/Text/TextExample.ios.js @@ -1438,7 +1438,7 @@ const examples = [ testID="text-box-shadow" style={{ borderRadius: 10, - experimental_boxShadow: '0 0 10px red', + boxShadow: '0 0 10px red', }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js index de44881b2acde0..bddc7866765a0f 100644 --- a/packages/rn-tester/js/examples/View/ViewExample.js +++ b/packages/rn-tester/js/examples/View/ViewExample.js @@ -464,7 +464,7 @@ function BoxShadowExample(): React.Node { borderRadius: 10, borderWidth: 5, borderColor: 'red', - experimental_boxShadow: '0 0 10px 0 black', + boxShadow: '0 0 10px 0 black', }} /> @@ -491,7 +491,7 @@ function BoxShadowExample(): React.Node { @@ -514,7 +514,7 @@ function BoxShadowExample(): React.Node { @@ -525,7 +525,7 @@ function BoxShadowExample(): React.Node { style={{ ...defaultStyleSize, backgroundColor: 'green', - experimental_boxShadow: '0px 10px', + boxShadow: '0px 10px', }} />