Skip to content

Commit 3f71f66

Browse files
jorge-cabfacebook-github-bot
jorge-cab
authored and
facebook-github-bot
committed
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. Differential Revision: D62401985
1 parent 9488e96 commit 3f71f66

File tree

12 files changed

+24
-42
lines changed

12 files changed

+24
-42
lines changed

‎packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
120120
/**
121121
* Filter
122122
*/
123-
experimental_filter: {process: processFilter},
123+
filter: {process: processFilter},
124124

125125
/**
126126
* MixBlendMode

‎packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ const validAttributesForNonEventProps = {
172172
boxShadow: {
173173
process: require('../StyleSheet/processBoxShadow').default,
174174
},
175-
experimental_filter: {
175+
filter: {
176176
process: require('../StyleSheet/processFilter').default,
177177
},
178178
experimental_mixBlendMode: true,

‎packages/react-native/Libraries/NativeComponent/BaseViewConfig.ios.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ const validAttributesForNonEventProps = {
222222
hitSlop: {diff: require('../Utilities/differ/insetsDiffer')},
223223
collapsable: true,
224224
collapsableChildren: true,
225-
experimental_filter: {
225+
filter: {
226226
process: require('../StyleSheet/processFilter').default,
227227
},
228228
boxShadow: {

‎packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
337337
isolation?: 'auto' | 'isolate' | undefined;
338338
cursor?: CursorValue | undefined;
339339
boxShadow?: ReadonlyArray<BoxShadowPrimitive> | string | undefined;
340+
filter?: ReadonlyArray<FilterFunction> | string | undefined;
340341
}
341342

342343
export type FontVariant =

‎packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -789,7 +789,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
789789
pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
790790
cursor?: CursorValue,
791791
boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
792-
experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
792+
filter?: $ReadOnlyArray<FilterFunction> | string,
793793
experimental_mixBlendMode?: ____BlendMode_Internal,
794794
experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
795795
isolation?: 'auto' | 'isolate',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -8358,7 +8358,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
83588358
pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\",
83598359
cursor?: CursorValue,
83608360
boxShadow?: $ReadOnlyArray<BoxShadowPrimitive> | string,
8361-
experimental_filter?: $ReadOnlyArray<FilterFunction> | string,
8361+
filter?: $ReadOnlyArray<FilterFunction> | string,
83628362
experimental_mixBlendMode?: ____BlendMode_Internal,
83638363
experimental_backgroundImage?: $ReadOnlyArray<GradientValue> | string,
83648364
isolation?: \\"auto\\" | \\"isolate\\",

‎packages/react-native/React/Views/RCTViewManager.m

+1-1
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ - (void)updateAccessibilityTraitsForRole:(RCTView *)view withDefaultView:(RCTVie
431431
// filtered by view configs.
432432
}
433433

434-
RCT_CUSTOM_VIEW_PROPERTY(experimental_filter, NSArray *, RCTView)
434+
RCT_CUSTOM_VIEW_PROPERTY(filter, NSArray *, RCTView)
435435
{
436436
// Property is only to be used in the new renderer.
437437
// It is necessary to add it here, otherwise it gets

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt

+1-1
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ public object ViewProps {
137137
public const val BORDER_END_COLOR: String = "borderEndColor"
138138
public const val ON_LAYOUT: String = "onLayout"
139139
public const val BOX_SHADOW: String = "boxShadow"
140-
public const val FILTER: String = "experimental_filter"
140+
public const val FILTER: String = "filter"
141141
public const val MIX_BLEND_MODE: String = "experimental_mixBlendMode"
142142
public const val TRANSFORM: String = "transform"
143143
public const val TRANSFORM_ORIGIN: String = "transformOrigin"

‎packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

+2-2
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ BaseViewProps::BaseViewProps(
163163
: convertRawProp(
164164
context,
165165
rawProps,
166-
"experimental_filter",
166+
"filter",
167167
sourceProps.filter,
168168
{})),
169169
backgroundImage(
@@ -346,7 +346,7 @@ void BaseViewProps::setProp(
346346
RAW_SET_PROP_SWITCH_CASE_BASIC(removeClippedSubviews);
347347
RAW_SET_PROP_SWITCH_CASE_BASIC(experimental_layoutConformance);
348348
RAW_SET_PROP_SWITCH_CASE_BASIC(cursor);
349-
RAW_SET_PROP_SWITCH_CASE(filter, "experimental_filter");
349+
RAW_SET_PROP_SWITCH_CASE(filter, "filter");
350350
RAW_SET_PROP_SWITCH_CASE(boxShadow, "boxShadow");
351351
// events field
352352
VIEW_EVENT_CASE(PointerEnter);

‎packages/react-native/types/experimental.d.ts

-1
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,6 @@ declare module '.' {
150150
}
151151

152152
export interface ViewStyle {
153-
experimental_filter?: ReadonlyArray<FilterFunction> | string | undefined;
154153
experimental_mixBlendMode?: BlendMode | undefined;
155154
experimental_backgroundImage?:
156155
| ReadonlyArray<GradientValue>

‎packages/rn-tester/js/examples/Filter/FilterExample.js

+12-30
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ exports.examples = [
107107
render(): React.Node {
108108
return (
109109
<StaticViewAndImage
110-
style={{experimental_filter: [{brightness: 1.5}]}}
110+
style={{filter: [{brightness: 1.5}]}}
111111
testID="filter-test-brightness"
112112
/>
113113
);
@@ -118,9 +118,7 @@ exports.examples = [
118118
description: 'opacity(0.5)',
119119
name: 'opacity',
120120
render(): React.Node {
121-
return (
122-
<StaticViewAndImage style={{experimental_filter: [{opacity: 0.5}]}} />
123-
);
121+
return <StaticViewAndImage style={{filter: [{opacity: 0.5}]}} />;
124122
},
125123
},
126124
{
@@ -129,9 +127,7 @@ exports.examples = [
129127
name: 'contrast',
130128
platform: 'android',
131129
render(): React.Node {
132-
return (
133-
<StaticViewAndImage style={{experimental_filter: [{contrast: 0.5}]}} />
134-
);
130+
return <StaticViewAndImage style={{filter: [{contrast: 0.5}]}} />;
135131
},
136132
},
137133
{
@@ -140,9 +136,7 @@ exports.examples = [
140136
name: 'sepia',
141137
platform: 'android',
142138
render(): React.Node {
143-
return (
144-
<StaticViewAndImage style={{experimental_filter: [{sepia: 0.5}]}} />
145-
);
139+
return <StaticViewAndImage style={{filter: [{sepia: 0.5}]}} />;
146140
},
147141
},
148142
{
@@ -151,9 +145,7 @@ exports.examples = [
151145
name: 'grayscale',
152146
platform: 'android',
153147
render(): React.Node {
154-
return (
155-
<StaticViewAndImage style={{experimental_filter: [{grayscale: 0.5}]}} />
156-
);
148+
return <StaticViewAndImage style={{filter: [{grayscale: 0.5}]}} />;
157149
},
158150
},
159151
{
@@ -162,9 +154,7 @@ exports.examples = [
162154
name: 'saturate',
163155
platform: 'android',
164156
render(): React.Node {
165-
return (
166-
<StaticViewAndImage style={{experimental_filter: [{saturate: 4}]}} />
167-
);
157+
return <StaticViewAndImage style={{filter: [{saturate: 4}]}} />;
168158
},
169159
},
170160
{
@@ -173,11 +163,7 @@ exports.examples = [
173163
name: 'hueRotate',
174164
platform: 'android',
175165
render(): React.Node {
176-
return (
177-
<StaticViewAndImage
178-
style={{experimental_filter: [{hueRotate: '-90deg'}]}}
179-
/>
180-
);
166+
return <StaticViewAndImage style={{filter: [{hueRotate: '-90deg'}]}} />;
181167
},
182168
},
183169
{
@@ -186,9 +172,7 @@ exports.examples = [
186172
name: 'invert',
187173
platform: 'android',
188174
render(): React.Node {
189-
return (
190-
<StaticViewAndImage style={{experimental_filter: [{invert: 0.7}]}} />
191-
);
175+
return <StaticViewAndImage style={{filter: [{invert: 0.7}]}} />;
192176
},
193177
},
194178
{
@@ -199,7 +183,7 @@ exports.examples = [
199183
render(): React.Node {
200184
return (
201185
<StaticViewAndImage
202-
style={{experimental_filter: [{blur: 10}]}}
186+
style={{filter: [{blur: 10}]}}
203187
testID="filter-test-blur"
204188
/>
205189
);
@@ -214,7 +198,7 @@ exports.examples = [
214198
return (
215199
<StaticViewAndImage
216200
style={{
217-
experimental_filter: [{dropShadow: '30px 10px 4px #4444dd'}],
201+
filter: [{dropShadow: '30px 10px 4px #4444dd'}],
218202
}}
219203
testID="filter-test-drop-shadow"
220204
imageSource={alphaHotdog}
@@ -229,7 +213,7 @@ exports.examples = [
229213
render(): React.Node {
230214
return (
231215
<StaticViewAndImageWithState
232-
style={{experimental_filter: [{brightness: 1.5}, {opacity: 0.5}]}}
216+
style={{filter: [{brightness: 1.5}, {opacity: 0.5}]}}
233217
testID="filter-test-chain"
234218
/>
235219
);
@@ -240,9 +224,7 @@ exports.examples = [
240224
description: 'Turn brightness(1.5) on and off every 5 seconds',
241225
render(): React.Node {
242226
return (
243-
<StaticViewAndImageWithState
244-
style={{experimental_filter: [{brightness: 1.5}]}}
245-
/>
227+
<StaticViewAndImageWithState style={{filter: [{brightness: 1.5}]}} />
246228
);
247229
},
248230
},

‎packages/rn-tester/js/examples/MixBlendMode/MixBlendModeExample.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -292,13 +292,13 @@ examples.push(
292292
<LayeredView
293293
style={{
294294
experimental_mixBlendMode: 'luminosity',
295-
experimental_filter: 'blur(3px)',
295+
filter: 'blur(3px)',
296296
}}
297297
/>
298298
<LayeredImage
299299
style={{
300300
experimental_mixBlendMode: 'difference',
301-
experimental_filter: 'hue-rotate(90deg)',
301+
filter: 'hue-rotate(90deg)',
302302
}}
303303
/>
304304
</View>

0 commit comments

Comments
 (0)