Remove experimental_ prefix from filter (#46406)

Summary: Pull Request resolved: #46406 As title Second attempt at landing the new name. There were 2 issues previously which led us to revert. 1. **Error on workrooms tests.** This ended up not being caused by us but rather by D61896776. After renaming the error changed which might've caused the renaming to be blamed for the issue. It has since been resolved 2. **FB crash** FB was crashing when using drop-shadow after renaming. For some reason after renaming `filter` an invalid stylex property was making FB crash. We don't know why renaming uncovered the issue but the the code was using unsupported features on RN (`calc` & `stylex`) which then led to passing a raw unsupported value for `filter` and crashing on the `processFilter` function. FB was fixed here D62407454 to prevent crashing after landing this diff Changelog: [General] [Changed] - Add official `filter` CSSProperty. Reviewed By: NickGerleman Differential Revision: D62401985 fbshipit-source-id: 14422603c40b7ddf8300029165a85655354075c3
facebook · Sep 12, 2024 · 6b369a4 · 6b369a4
1 parent ec39b8b
commit 6b369a4
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 42 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
    */
-  experimental_filter: {process: processFilter},
+  filter: {process: processFilter},
 
   /**
    * MixBlendMode

diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js
@@ -172,7 +172,7 @@ const validAttributesForNonEventProps = {
   boxShadow: {
     process: require('../StyleSheet/processBoxShadow').default,
   },
-  experimental_filter: {
+  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,7 +222,7 @@ const validAttributesForNonEventProps = {
   hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
   collapsable: true,
   collapsableChildren: true,
-  experimental_filter: {
+  filter: {
     process: require('../StyleSheet/processFilter').default,
   },
   boxShadow: {

diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -337,6 +337,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   isolation?: 'auto' | 'isolate' | undefined;
   cursor?: CursorValue | undefined;
   boxShadow?: ReadonlyArray<BoxShadowPrimitive> | string | undefined;
+  filter?: ReadonlyArray<FilterFunction> | string | undefined;
 }
 
 export type FontVariant =

diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js
@@ -789,7 +789,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
   cursor?: CursorValue,
   boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
-  experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
+  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
@@ -8367,7 +8367,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\",
   cursor?: CursorValue,
   boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
-  experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
+  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
@@ -431,7 +431,7 @@ - (void)updateAccessibilityTraitsForRole:(RCTView *)view withDefaultView:(RCTVie
   // filtered by view configs.
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(experimental_filter, NSArray *, RCTView)
+RCT_CUSTOM_VIEW_PROPERTY(filter, 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
@@ -137,7 +137,7 @@ public object ViewProps {
   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 = "experimental_filter"
+  public const val FILTER: String = "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
@@ -163,7 +163,7 @@ BaseViewProps::BaseViewProps(
                                                  : convertRawProp(
                                                        context,
                                                        rawProps,
-                                                       "experimental_filter",
+                                                       "filter",
                                                        sourceProps.filter,
                                                        {})),
       backgroundImage(
@@ -346,7 +346,7 @@ 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, "experimental_filter");
+    RAW_SET_PROP_SWITCH_CASE(filter, "filter");
     RAW_SET_PROP_SWITCH_CASE(boxShadow, "boxShadow");
     // events field
     VIEW_EVENT_CASE(PointerEnter);

diff --git a/packages/react-native/types/experimental.d.ts b/packages/react-native/types/experimental.d.ts
@@ -150,7 +150,6 @@ declare module '.' {
   }
 
   export interface ViewStyle {
-    experimental_filter?: ReadonlyArray<FilterFunction> | string | undefined;
     experimental_mixBlendMode?: BlendMode | undefined;
     experimental_backgroundImage?:
       | ReadonlyArray<GradientValue>

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

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',
-              experimental_filter: 'blur(3px)',
+              filter: 'blur(3px)',
             }}
           />
           <LayeredImage
             style={{
               experimental_mixBlendMode: 'difference',
-              experimental_filter: 'hue-rotate(90deg)',
+              filter: 'hue-rotate(90deg)',
             }}
           />
         </View>