Skip to content

Commit 7844386

Browse files
intergalacticspacehighwaymeta-codesync[bot]
intergalacticspacehighway
authored and
meta-codesync[bot]
committed
feat(style): remove experimental_ prefix from backgroundSize, backgroundPosition and backgroundRepeat (#57563)
Summary: Promote `backgroundSize`, `backgroundPosition` and `backgroundRepeat` from their `experimental_` prefixed names to stable style props, following `backgroundImage` which was recently graduated in #57165. They have been available in experimental mode alongside `backgroundImage` for some time with no reported issues. ## Changelog: [GENERAL][CHANGED] - Remove `experimental_` prefix from `backgroundSize`, `backgroundPosition` and `backgroundRepeat` Pull Request resolved: #57563 Test Plan: Built and ran RNTester on Android and iOS. Migrated the Background Image example (size / position / repeat) to the graduated prop names. cc - jorge-cab Reviewed By: huntie Differential Revision: D116456865 Pulled By: javache fbshipit-source-id: bacfd74226467b6a16f49b2e812b586bfa66cd4c
1 parent 2ec447a commit 7844386

10 files changed

Lines changed: 209 additions & 97 deletions

File tree

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,16 +205,22 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
205205
/**
206206
* BackgroundSize
207207
*/
208+
backgroundSize: backgroundSizeAttribute,
209+
/** @deprecated Use `backgroundSize` instead. */
208210
experimental_backgroundSize: backgroundSizeAttribute,
209211

210212
/**
211213
* BackgroundPosition
212214
*/
215+
backgroundPosition: backgroundPositionAttribute,
216+
/** @deprecated Use `backgroundPosition` instead. */
213217
experimental_backgroundPosition: backgroundPositionAttribute,
214218

215219
/**
216220
* BackgroundRepeat
217221
*/
222+
backgroundRepeat: backgroundRepeatAttribute,
223+
/** @deprecated Use `backgroundRepeat` instead. */
218224
experimental_backgroundRepeat: backgroundRepeatAttribute,
219225

220226
/**

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,8 +213,11 @@ const validAttributesForNonEventProps = {
213213
transformOrigin: true,
214214
backgroundImage: backgroundImageAttribute,
215215
experimental_backgroundImage: backgroundImageAttribute,
216+
backgroundSize: backgroundSizeAttribute,
216217
experimental_backgroundSize: backgroundSizeAttribute,
218+
backgroundPosition: backgroundPositionAttribute,
217219
experimental_backgroundPosition: backgroundPositionAttribute,
220+
backgroundRepeat: backgroundRepeatAttribute,
218221
experimental_backgroundRepeat: backgroundRepeatAttribute,
219222
boxShadow: boxShadowAttribute,
220223
filter: filterAttribute,

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -893,9 +893,12 @@ export type ____ViewStyle_InternalBase = Readonly<{
893893
mixBlendMode?: ____BlendMode_Internal,
894894
backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
895895
experimental_backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
896+
backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string,
896897
experimental_backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string,
898+
backgroundPosition?: ReadonlyArray<BackgroundPositionValue> | string,
897899
experimental_backgroundPosition?:
898900
ReadonlyArray<BackgroundPositionValue> | string,
901+
backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string,
899902
experimental_backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string,
900903
isolation?: 'auto' | 'isolate',
901904
}>;

‎packages/react-native/ReactAndroid/api/ReactAndroid.api‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4555,6 +4555,9 @@ public final class com/facebook/react/uimanager/ViewProps {
45554555
public static final field ENABLED Ljava/lang/String;
45564556
public static final field END Ljava/lang/String;
45574557
public static final field EXPERIMENTAL_BACKGROUND_IMAGE Ljava/lang/String;
4558+
public static final field EXPERIMENTAL_BACKGROUND_POSITION Ljava/lang/String;
4559+
public static final field EXPERIMENTAL_BACKGROUND_REPEAT Ljava/lang/String;
4560+
public static final field EXPERIMENTAL_BACKGROUND_SIZE Ljava/lang/String;
45584561
public static final field FILTER Ljava/lang/String;
45594562
public static final field FLEX Ljava/lang/String;
45604563
public static final field FLEX_BASIS Ljava/lang/String;
@@ -6555,6 +6558,9 @@ public class com/facebook/react/views/view/ReactViewManager : com/facebook/react
65556558
public fun setCollapsable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
65566559
public fun setCollapsableChildren (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
65576560
public fun setExperimentalBackgroundImage (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
6561+
public fun setExperimentalBackgroundPosition (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
6562+
public fun setExperimentalBackgroundRepeat (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
6563+
public fun setExperimentalBackgroundSize (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
65586564
public fun setFocusable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
65596565
public fun setHitSlop (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/Dynamic;)V
65606566
public fun setNativeBackground (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableMap;)V

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,15 @@ public object ViewProps {
7575
public const val BACKGROUND_IMAGE: String = "backgroundImage"
7676
// Backwards-compatible alias for the original experimental_ prefixed prop name.
7777
public const val EXPERIMENTAL_BACKGROUND_IMAGE: String = "experimental_backgroundImage"
78-
public const val BACKGROUND_SIZE: String = "experimental_backgroundSize"
79-
public const val BACKGROUND_POSITION: String = "experimental_backgroundPosition"
80-
public const val BACKGROUND_REPEAT: String = "experimental_backgroundRepeat"
78+
public const val BACKGROUND_SIZE: String = "backgroundSize"
79+
// Backwards-compatible alias for the original experimental_ prefixed prop name.
80+
public const val EXPERIMENTAL_BACKGROUND_SIZE: String = "experimental_backgroundSize"
81+
public const val BACKGROUND_POSITION: String = "backgroundPosition"
82+
// Backwards-compatible alias for the original experimental_ prefixed prop name.
83+
public const val EXPERIMENTAL_BACKGROUND_POSITION: String = "experimental_backgroundPosition"
84+
public const val BACKGROUND_REPEAT: String = "backgroundRepeat"
85+
// Backwards-compatible alias for the original experimental_ prefixed prop name.
86+
public const val EXPERIMENTAL_BACKGROUND_REPEAT: String = "experimental_backgroundRepeat"
8187
public const val FOREGROUND_COLOR: String = "foregroundColor"
8288
public const val COLOR: String = "color"
8389
public const val FONT_SIZE: String = "fontSize"

‎packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,18 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
174174
}
175175
}
176176

177+
@Deprecated(
178+
"Use setBackgroundSize instead.",
179+
ReplaceWith("setBackgroundSize(view, backgroundSize)"),
180+
)
181+
@ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_SIZE, customType = "BackgroundSize")
182+
public open fun setExperimentalBackgroundSize(
183+
view: ReactViewGroup,
184+
backgroundSize: ReadableArray?,
185+
) {
186+
setBackgroundSize(view, backgroundSize)
187+
}
188+
177189
@ReactProp(name = ViewProps.BACKGROUND_POSITION, customType = "BackgroundPosition")
178190
public open fun setBackgroundPosition(view: ReactViewGroup, backgroundPosition: ReadableArray?) {
179191
if (backgroundPosition != null && backgroundPosition.size() > 0) {
@@ -191,6 +203,18 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
191203
}
192204
}
193205

206+
@Deprecated(
207+
"Use setBackgroundPosition instead.",
208+
ReplaceWith("setBackgroundPosition(view, backgroundPosition)"),
209+
)
210+
@ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_POSITION, customType = "BackgroundPosition")
211+
public open fun setExperimentalBackgroundPosition(
212+
view: ReactViewGroup,
213+
backgroundPosition: ReadableArray?,
214+
) {
215+
setBackgroundPosition(view, backgroundPosition)
216+
}
217+
194218
@ReactProp(name = ViewProps.BACKGROUND_REPEAT, customType = "BackgroundRepeat")
195219
public open fun setBackgroundRepeat(view: ReactViewGroup, backgroundRepeat: ReadableArray?) {
196220
if (backgroundRepeat != null && backgroundRepeat.size() > 0) {
@@ -208,6 +232,18 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
208232
}
209233
}
210234

235+
@Deprecated(
236+
"Use setBackgroundRepeat instead.",
237+
ReplaceWith("setBackgroundRepeat(view, backgroundRepeat)"),
238+
)
239+
@ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_REPEAT, customType = "BackgroundRepeat")
240+
public open fun setExperimentalBackgroundRepeat(
241+
view: ReactViewGroup,
242+
backgroundRepeat: ReadableArray?,
243+
) {
244+
setBackgroundRepeat(view, backgroundRepeat)
245+
}
246+
211247
@ReactProp(name = "nextFocusDown", defaultInt = View.NO_ID)
212248
public open fun nextFocusDown(view: ReactViewGroup, viewId: Int) {
213249
view.nextFocusDownId = viewId

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

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -217,20 +217,35 @@ BaseViewProps::BaseViewProps(
217217
backgroundSize(convertRawProp(
218218
context,
219219
rawProps,
220-
"experimental_backgroundSize",
221-
sourceProps.backgroundSize,
220+
"backgroundSize",
221+
convertRawProp(
222+
context,
223+
rawProps,
224+
"experimental_backgroundSize",
225+
sourceProps.backgroundSize,
226+
{}),
222227
{})),
223228
backgroundPosition(convertRawProp(
224229
context,
225230
rawProps,
226-
"experimental_backgroundPosition",
227-
sourceProps.backgroundPosition,
231+
"backgroundPosition",
232+
convertRawProp(
233+
context,
234+
rawProps,
235+
"experimental_backgroundPosition",
236+
sourceProps.backgroundPosition,
237+
{}),
228238
{})),
229239
backgroundRepeat(convertRawProp(
230240
context,
231241
rawProps,
232-
"experimental_backgroundRepeat",
233-
sourceProps.backgroundRepeat,
242+
"backgroundRepeat",
243+
convertRawProp(
244+
context,
245+
rawProps,
246+
"experimental_backgroundRepeat",
247+
sourceProps.backgroundRepeat,
248+
{}),
234249
{})),
235250
mixBlendMode(convertRawProp(
236251
context,
@@ -338,9 +353,12 @@ void BaseViewProps::setProp(
338353
RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundColor);
339354
RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundImage);
340355
RAW_SET_PROP_SWITCH_CASE(backgroundImage, "experimental_backgroundImage");
356+
RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundSize);
341357
RAW_SET_PROP_SWITCH_CASE(backgroundSize, "experimental_backgroundSize");
358+
RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundPosition);
342359
RAW_SET_PROP_SWITCH_CASE(
343360
backgroundPosition, "experimental_backgroundPosition");
361+
RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundRepeat);
344362
RAW_SET_PROP_SWITCH_CASE(backgroundRepeat, "experimental_backgroundRepeat");
345363
RAW_SET_PROP_SWITCH_CASE_BASIC(shadowColor);
346364
RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOffset);

0 commit comments

Comments
 (0)