From 4ec2fdd022cc40fa8fc53f8cdd7d56507cceb3cc Mon Sep 17 00:00:00 2001 From: Jorge Cabiedes Acosta Date: Thu, 29 Aug 2024 17:29:51 -0700 Subject: [PATCH] Revert D61726506 (#46266) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/46266 This diff reverts D61726506 T200279372 Changelog: [Internal] Differential Revision: D61986793 --- .../View/ReactNativeStyleAttributes.js | 4 +- .../NativeComponent/BaseViewConfig.android.js | 4 +- .../NativeComponent/BaseViewConfig.ios.js | 4 +- .../Libraries/StyleSheet/StyleSheetTypes.js | 4 +- .../__snapshots__/public-api-test.js.snap | 4 +- .../react-native/React/Views/RCTViewManager.m | 2 +- .../com/facebook/react/uimanager/ViewProps.kt | 4 +- .../components/view/BaseViewProps.cpp | 8 ++-- packages/react-native/types/experimental.d.ts | 7 +++- .../js/components/RNTPressableRow.js | 2 +- .../js/examples/Filter/FilterExample.js | 42 +++++++++++++------ .../js/examples/Image/ImageExample.js | 6 +-- .../MixBlendMode/MixBlendModeExample.js | 4 +- .../js/examples/Text/TextExample.android.js | 2 +- .../js/examples/Text/TextExample.ios.js | 2 +- .../rn-tester/js/examples/View/ViewExample.js | 14 +++---- 16 files changed, 67 insertions(+), 46 deletions(-) diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js index df1ed4cd5d97..c186586d9a09 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -120,7 +120,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { /** * Filter */ - filter: {process: processFilter}, + experimental_filter: {process: processFilter}, /** * MixBlendMode @@ -135,7 +135,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { /* * BoxShadow */ - boxShadow: {process: processBoxShadow}, + experimental_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 70765523f984..bceab558d60e 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js @@ -169,10 +169,10 @@ const validAttributesForNonEventProps = { experimental_backgroundImage: { process: require('../StyleSheet/processBackgroundImage').default, }, - boxShadow: { + experimental_boxShadow: { process: require('../StyleSheet/processBoxShadow').default, }, - filter: { + experimental_filter: { process: require('../StyleSheet/processFilter').default, }, experimental_mixBlendMode: true, diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js index 778568f7c013..d2259be0f8e9 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js @@ -222,10 +222,10 @@ const validAttributesForNonEventProps = { hitSlop: {diff: require('../Utilities/differ/insetsDiffer')}, collapsable: true, collapsableChildren: true, - filter: { + experimental_filter: { process: require('../StyleSheet/processFilter').default, }, - boxShadow: { + experimental_boxShadow: { process: require('../StyleSheet/processBoxShadow').default, }, experimental_mixBlendMode: true, diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index 713a390fc134..09709ab8d977 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -788,8 +788,8 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{ elevation?: number, pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only', cursor?: CursorValue, - boxShadow?: $ReadOnlyArray | string, - filter?: $ReadOnlyArray | string, + experimental_boxShadow?: $ReadOnlyArray | string, + experimental_filter?: $ReadOnlyArray | string, experimental_mixBlendMode?: ____BlendMode_Internal, experimental_backgroundImage?: $ReadOnlyArray | string, isolation?: 'auto' | 'isolate', 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 f279e8bb6be4..e5f4590fdc51 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 @@ -8398,8 +8398,8 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{ elevation?: number, pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\", cursor?: CursorValue, - boxShadow?: $ReadOnlyArray | string, - filter?: $ReadOnlyArray | string, + experimental_boxShadow?: $ReadOnlyArray | string, + experimental_filter?: $ReadOnlyArray | string, experimental_mixBlendMode?: ____BlendMode_Internal, experimental_backgroundImage?: $ReadOnlyArray | string, isolation?: \\"auto\\" | \\"isolate\\", diff --git a/packages/react-native/React/Views/RCTViewManager.m b/packages/react-native/React/Views/RCTViewManager.m index 1280e80ed7b6..5fc4cbf2e9d4 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(boxShadow, NSArray *, RCTView) +RCT_CUSTOM_VIEW_PROPERTY(experimental_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 c35d9bfc179a..dfcd023945bd 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,8 +136,8 @@ 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 = "boxShadow" - public const val FILTER: String = "filter" + public const val BOX_SHADOW: String = "experimental_boxShadow" + public const val FILTER: String = "experimental_filter" public const val MIX_BLEND_MODE: String = "experimental_mixBlendMode" public const val TRANSFORM: String = "transform" public const val TRANSFORM_ORIGIN: String = "transformOrigin" 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 4047aebc6eee..eddaa113e202 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, - "boxShadow", + "experimental_boxShadow", sourceProps.boxShadow, {})), filter( @@ -163,7 +163,7 @@ BaseViewProps::BaseViewProps( : convertRawProp( context, rawProps, - "filter", + "experimental_filter", sourceProps.filter, {})), backgroundImage( @@ -346,8 +346,8 @@ void BaseViewProps::setProp( RAW_SET_PROP_SWITCH_CASE_BASIC(removeClippedSubviews); RAW_SET_PROP_SWITCH_CASE_BASIC(experimental_layoutConformance); RAW_SET_PROP_SWITCH_CASE_BASIC(cursor); - RAW_SET_PROP_SWITCH_CASE(filter, "filter"); - RAW_SET_PROP_SWITCH_CASE(boxShadow, "boxShadow"); + RAW_SET_PROP_SWITCH_CASE(filter, "experimental_filter"); + RAW_SET_PROP_SWITCH_CASE(boxShadow, "experimental_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 70ede6451aef..870bed861332 100644 --- a/packages/react-native/types/experimental.d.ts +++ b/packages/react-native/types/experimental.d.ts @@ -150,8 +150,11 @@ declare module '.' { } export interface ViewStyle { - boxShadow?: ReadonlyArray | string | undefined; - filter?: ReadonlyArray | string | undefined; + experimental_boxShadow?: + | ReadonlyArray + | string + | undefined; + experimental_filter?: ReadonlyArray | string | undefined; experimental_mixBlendMode?: BlendMode | undefined; experimental_backgroundImage?: | ReadonlyArray diff --git a/packages/rn-tester/js/components/RNTPressableRow.js b/packages/rn-tester/js/components/RNTPressableRow.js index 7892eabf81cc..5a972df412f1 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, - boxShadow: '0 2px 4px -1px rgba(0, 0, 0, 0.25)', + experimental_boxShadow: '0 2px 4px -1px rgba(0, 0, 0, 0.25)', borderRadius: 8, }, descriptionText: { diff --git a/packages/rn-tester/js/examples/Filter/FilterExample.js b/packages/rn-tester/js/examples/Filter/FilterExample.js index b5aebd467231..c97cb5789fa6 100644 --- a/packages/rn-tester/js/examples/Filter/FilterExample.js +++ b/packages/rn-tester/js/examples/Filter/FilterExample.js @@ -107,7 +107,7 @@ exports.examples = [ render(): React.Node { return ( ); @@ -118,7 +118,9 @@ exports.examples = [ description: 'opacity(0.5)', name: 'opacity', render(): React.Node { - return ; + return ( + + ); }, }, { @@ -127,7 +129,9 @@ exports.examples = [ name: 'contrast', platform: 'android', render(): React.Node { - return ; + return ( + + ); }, }, { @@ -136,7 +140,9 @@ exports.examples = [ name: 'sepia', platform: 'android', render(): React.Node { - return ; + return ( + + ); }, }, { @@ -145,7 +151,9 @@ exports.examples = [ name: 'grayscale', platform: 'android', render(): React.Node { - return ; + return ( + + ); }, }, { @@ -154,7 +162,9 @@ exports.examples = [ name: 'saturate', platform: 'android', render(): React.Node { - return ; + return ( + + ); }, }, { @@ -163,7 +173,11 @@ exports.examples = [ name: 'hueRotate', platform: 'android', render(): React.Node { - return ; + return ( + + ); }, }, { @@ -172,7 +186,9 @@ exports.examples = [ name: 'invert', platform: 'android', render(): React.Node { - return ; + return ( + + ); }, }, { @@ -183,7 +199,7 @@ exports.examples = [ render(): React.Node { return ( ); @@ -198,7 +214,7 @@ exports.examples = [ return ( ); @@ -224,7 +240,9 @@ exports.examples = [ description: 'Turn brightness(1.5) on and off every 5 seconds', render(): React.Node { return ( - + ); }, }, diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 8b05f65fb1fc..610b84fc5b43 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -830,10 +830,10 @@ const styles = StyleSheet.create({ }, boxShadowWithBackground: { backgroundColor: 'lightblue', - boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.5)', + experimental_boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.5)', }, boxShadowMultiOutsetInset: { - boxShadow: + experimental_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, @@ -846,7 +846,7 @@ const styles = StyleSheet.create({ borderBottomLeftRadius: 20, marginRight: 80, marginTop: 40, - boxShadow: '80px 0px 10px 0px hotpink', + experimental_boxShadow: '80px 0px 10px 0px hotpink', transform: 'rotate(-15deg)', }, }); diff --git a/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js b/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js index ca8cf821131d..c1c208db313d 100644 --- a/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js +++ b/packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js @@ -292,13 +292,13 @@ examples.push( diff --git a/packages/rn-tester/js/examples/Text/TextExample.android.js b/packages/rn-tester/js/examples/Text/TextExample.android.js index 771fcf609691..9b03b28ac640 100644 --- a/packages/rn-tester/js/examples/Text/TextExample.android.js +++ b/packages/rn-tester/js/examples/Text/TextExample.android.js @@ -1429,7 +1429,7 @@ const examples = [ testID="text-box-shadow" style={{ borderRadius: 10, - boxShadow: '0 0 10px red', + experimental_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 0316e0b47eb3..2a1e993f1913 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, - boxShadow: '0 0 10px red', + experimental_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 bddc7866765a..de44881b2acd 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', - boxShadow: '0 0 10px 0 black', + experimental_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', - boxShadow: '0px 10px', + experimental_boxShadow: '0px 10px', }} />