Remove experimental_ prefix from filter

Summary:
As title

Changelog: [General] [Changed] - Add official `filter` CSSProperty.

Differential Revision: D62401985

Author: jorge-cab

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

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,

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: {

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',

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -8315,7 +8315,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\\",

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

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"

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);

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>

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}]}} />
       );
     },
   },

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>