Revert D61726506 (#46266)

Summary: Pull Request resolved: #46266 This diff reverts D61726506 T200279372 Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D61986793 fbshipit-source-id: bbf462b79192b67801a6cf56727f8f43ade8fd56
facebook · Aug 30, 2024 · acbde24 · acbde24
1 parent 4351247
commit acbde24
Show file tree

Hide file tree

Showing 16 changed files with 67 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -788,8 +788,8 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
-  boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
-  filter?: $ReadOnlyArray<FilterFunction> | string,
+  experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
+  experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
   experimental_mixBlendMode?: ____BlendMode_Internal,
   experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | 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
@@ -8398,8 +8398,8 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   elevation?: number,
   pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\",
   cursor?: CursorValue,
-  boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
-  filter?: $ReadOnlyArray<FilterFunction> | string,
+  experimental_boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
+  experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
   experimental_mixBlendMode?: ____BlendMode_Internal,
   experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
   isolation?: \\"auto\\" | \\"isolate\\",

diff --git 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
@@ -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
@@ -155,15 +155,15 @@ BaseViewProps::BaseViewProps(
                                                  : convertRawProp(
                                                        context,
                                                        rawProps,
-                                                       "boxShadow",
+                                                       "experimental_boxShadow",
                                                        sourceProps.boxShadow,
                                                        {})),
       filter(
           CoreFeatures::enablePropIteratorSetter ? sourceProps.filter
                                                  : 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
@@ -150,8 +150,11 @@ declare module '.' {
   }
 
   export interface ViewStyle {
-    boxShadow?: ReadonlyArray<BoxShadowPrimitive> | string | undefined;
-    filter?: ReadonlyArray<FilterFunction> | string | undefined;
+    experimental_boxShadow?:
+      | ReadonlyArray<BoxShadowPrimitive>
+      | string
+      | undefined;
+    experimental_filter?: ReadonlyArray<FilterFunction> | string | undefined;
     experimental_mixBlendMode?: BlendMode | undefined;
     experimental_backgroundImage?:
       | ReadonlyArray<GradientValue>

diff --git 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
@@ -107,7 +107,7 @@ exports.examples = [
     render(): React.Node {
       return (
         <StaticViewAndImage
-          style={{filter: [{brightness: 1.5}]}}
+          style={{experimental_filter: [{brightness: 1.5}]}}
           testID="filter-test-brightness"
         />
       );
@@ -118,7 +118,9 @@ exports.examples = [
     description: 'opacity(0.5)',
     name: 'opacity',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{opacity: 0.5}]}} />;
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{opacity: 0.5}]}} />
+      );
     },
   },
   {
@@ -127,7 +129,9 @@ exports.examples = [
     name: 'contrast',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{contrast: 0.5}]}} />;
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{contrast: 0.5}]}} />
+      );
     },
   },
   {
@@ -136,7 +140,9 @@ exports.examples = [
     name: 'sepia',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{sepia: 0.5}]}} />;
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{sepia: 0.5}]}} />
+      );
     },
   },
   {
@@ -145,7 +151,9 @@ exports.examples = [
     name: 'grayscale',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{grayscale: 0.5}]}} />;
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{grayscale: 0.5}]}} />
+      );
     },
   },
   {
@@ -154,7 +162,9 @@ exports.examples = [
     name: 'saturate',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{saturate: 4}]}} />;
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{saturate: 4}]}} />
+      );
     },
   },
   {
@@ -163,7 +173,11 @@ exports.examples = [
     name: 'hueRotate',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{hueRotate: '-90deg'}]}} />;
+      return (
+        <StaticViewAndImage
+          style={{experimental_filter: [{hueRotate: '-90deg'}]}}
+        />
+      );
     },
   },
   {
@@ -172,7 +186,9 @@ exports.examples = [
     name: 'invert',
     platform: 'android',
     render(): React.Node {
-      return <StaticViewAndImage style={{filter: [{invert: 0.7}]}} />;
+      return (
+        <StaticViewAndImage style={{experimental_filter: [{invert: 0.7}]}} />
+      );
     },
   },
   {
@@ -183,7 +199,7 @@ exports.examples = [
     render(): React.Node {
       return (
         <StaticViewAndImage
-          style={{filter: [{blur: 10}]}}
+          style={{experimental_filter: [{blur: 10}]}}
           testID="filter-test-blur"
         />
       );
@@ -198,7 +214,7 @@ exports.examples = [
       return (
         <StaticViewAndImage
           style={{
-            filter: [{dropShadow: '30px 10px 4px #4444dd'}],
+            experimental_filter: [{dropShadow: '30px 10px 4px #4444dd'}],
           }}
           testID="filter-test-drop-shadow"
           imageSource={alphaHotdog}
@@ -213,7 +229,7 @@ exports.examples = [
     render(): React.Node {
       return (
         <StaticViewAndImageWithState
-          style={{filter: [{brightness: 1.5}, {opacity: 0.5}]}}
+          style={{experimental_filter: [{brightness: 1.5}, {opacity: 0.5}]}}
           testID="filter-test-chain"
         />
       );
@@ -224,7 +240,9 @@ exports.examples = [
     description: 'Turn brightness(1.5) on and off every 5 seconds',
     render(): React.Node {
       return (
-        <StaticViewAndImageWithState style={{filter: [{brightness: 1.5}]}} />
+        <StaticViewAndImageWithState
+          style={{experimental_filter: [{brightness: 1.5}]}}
+        />
       );
     },
   },

diff --git 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
@@ -292,13 +292,13 @@ examples.push(
           <LayeredView
             style={{
               experimental_mixBlendMode: 'luminosity',
-              filter: 'blur(3px)',
+              experimental_filter: 'blur(3px)',
             }}
           />
           <LayeredImage
             style={{
               experimental_mixBlendMode: 'difference',
-              filter: 'hue-rotate(90deg)',
+              experimental_filter: 'hue-rotate(90deg)',
             }}
           />
         </View>

diff --git 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
@@ -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
@@ -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',
           }}
         />
         <View
@@ -473,7 +473,7 @@ function BoxShadowExample(): React.Node {
             borderRadius: 30,
             borderWidth: 5,
             borderColor: 'red',
-            boxShadow: 'inset 0 0 10px 0 black',
+            experimental_boxShadow: 'inset 0 0 10px 0 black',
           }}
         />
         <View
@@ -482,7 +482,7 @@ function BoxShadowExample(): React.Node {
             borderRadius: 30,
             borderWidth: 5,
             borderColor: 'red',
-            boxShadow:
+            experimental_boxShadow:
               'inset 15px -5px 5px 5px cyan, inset 15px -5px 20px 10px orange, -5px 5px 5px 0px green, 0px -10px 0px 5px black',
           }}
         />
@@ -491,7 +491,7 @@ function BoxShadowExample(): React.Node {
         <View
           style={{
             ...defaultStyleSize,
-            boxShadow: '0px 0px 5px 5px black',
+            experimental_boxShadow: '0px 0px 5px 5px black',
           }}>
           <View
             style={{
@@ -506,15 +506,15 @@ function BoxShadowExample(): React.Node {
           style={{
             ...defaultStyleSize,
             backgroundColor: 'red',
-            boxShadow: 'inset 0px 0px 5px 5px black',
+            experimental_boxShadow: 'inset 0px 0px 5px 5px black',
           }}
         />
         <View style={{...defaultStyleSize, flexDirection: 'row'}}>
           <View style={{width: 25, height: 25, backgroundColor: 'cyan'}} />
           <View
             style={{
               ...defaultStyleSize,
-              boxShadow: ' 0px 0px 20px 5px black',
+              experimental_boxShadow: ' 0px 0px 20px 5px black',
             }}
           />
           <View style={{width: 25, height: 25, backgroundColor: 'cyan'}} />
@@ -525,7 +525,7 @@ function BoxShadowExample(): React.Node {
           style={{
             ...defaultStyleSize,
             backgroundColor: 'green',
-            boxShadow: '0px 10px',
+            experimental_boxShadow: '0px 10px',
           }}
         />
       </View>