Skip to content

Commit 34dfcd6

Browse files
intergalacticspacehighwayintergalacticspacehighway
committed
feat(style): keep experimental_ prefixed background props as aliases
Graduating `backgroundSize`, `backgroundPosition` and `backgroundRepeat` by renaming them outright would break any app already using the `experimental_` prefixed names. Instead, keep the prefixed names working as aliases alongside the new ones, so the removal can happen in a later release. This mirrors what `backgroundImage` already does. The non-prefixed name takes precedence when both are set. - C++: nested `convertRawProp` fallback in the `BaseViewProps` constructor (this is also what registers the alias key with the raw props parser), plus an extra `RAW_SET_PROP_SWITCH_CASE` per prop in `setProp`. This is what covers iOS, which reads the typed props and never the raw names. - JS: alias entries in `ReactNativeStyleAttributes` (used wholesale as `style` by `BaseViewConfig.ios.js`) and in `BaseViewConfig.android.js`, plus the Flow and TypeScript style types. - Android additionally dispatches props to ViewManagers by string name, so each alias needs its own `ViewProps` constant and `@ReactProp` setter delegating to the real one.
1 parent 229e916 commit 34dfcd6

8 files changed

Lines changed: 74 additions & 3 deletions

File tree

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,16 +201,19 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
201201
* BackgroundSize
202202
*/
203203
backgroundSize: backgroundSizeAttribute,
204+
experimental_backgroundSize: backgroundSizeAttribute,
204205

205206
/**
206207
* BackgroundPosition
207208
*/
208209
backgroundPosition: backgroundPositionAttribute,
210+
experimental_backgroundPosition: backgroundPositionAttribute,
209211

210212
/**
211213
* BackgroundRepeat
212214
*/
213215
backgroundRepeat: backgroundRepeatAttribute,
216+
experimental_backgroundRepeat: backgroundRepeatAttribute,
214217

215218
/**
216219
* View

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,8 +214,11 @@ const validAttributesForNonEventProps = {
214214
backgroundImage: backgroundImageAttribute,
215215
experimental_backgroundImage: backgroundImageAttribute,
216216
backgroundSize: backgroundSizeAttribute,
217+
experimental_backgroundSize: backgroundSizeAttribute,
217218
backgroundPosition: backgroundPositionAttribute,
219+
experimental_backgroundPosition: backgroundPositionAttribute,
218220
backgroundRepeat: backgroundRepeatAttribute,
221+
experimental_backgroundRepeat: backgroundRepeatAttribute,
219222
boxShadow: boxShadowAttribute,
220223
filter: filterAttribute,
221224
mixBlendMode: true,

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -503,9 +503,15 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
503503
experimental_backgroundImage?:
504504
ReadonlyArray<BackgroundImageValue> | string | undefined;
505505
backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string | undefined;
506+
experimental_backgroundSize?:
507+
ReadonlyArray<BackgroundSizeValue> | string | undefined;
506508
backgroundPosition?:
507509
ReadonlyArray<BackgroundPositionValue> | string | undefined;
510+
experimental_backgroundPosition?:
511+
ReadonlyArray<BackgroundPositionValue> | string | undefined;
508512
backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string | undefined;
513+
experimental_backgroundRepeat?:
514+
ReadonlyArray<BackgroundRepeatValue> | string | undefined;
509515
}
510516

511517
export type FontVariant =

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -894,8 +894,12 @@ export type ____ViewStyle_InternalBase = Readonly<{
894894
backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
895895
experimental_backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
896896
backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string,
897+
experimental_backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string,
897898
backgroundPosition?: ReadonlyArray<BackgroundPositionValue> | string,
899+
experimental_backgroundPosition?:
900+
ReadonlyArray<BackgroundPositionValue> | string,
898901
backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string,
902+
experimental_backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string,
899903
isolation?: 'auto' | 'isolate',
900904
}>;
901905

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4532,6 +4532,9 @@ public final class com/facebook/react/uimanager/ViewProps {
45324532
public static final field ENABLED Ljava/lang/String;
45334533
public static final field END Ljava/lang/String;
45344534
public static final field EXPERIMENTAL_BACKGROUND_IMAGE Ljava/lang/String;
4535+
public static final field EXPERIMENTAL_BACKGROUND_POSITION Ljava/lang/String;
4536+
public static final field EXPERIMENTAL_BACKGROUND_REPEAT Ljava/lang/String;
4537+
public static final field EXPERIMENTAL_BACKGROUND_SIZE Ljava/lang/String;
45354538
public static final field FILTER Ljava/lang/String;
45364539
public static final field FLEX Ljava/lang/String;
45374540
public static final field FLEX_BASIS Ljava/lang/String;
@@ -6523,6 +6526,9 @@ public class com/facebook/react/views/view/ReactViewManager : com/facebook/react
65236526
public fun setCollapsable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
65246527
public fun setCollapsableChildren (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
65256528
public fun setExperimentalBackgroundImage (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
6529+
public fun setExperimentalBackgroundPosition (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
6530+
public fun setExperimentalBackgroundRepeat (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
6531+
public fun setExperimentalBackgroundSize (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
65266532
public fun setFocusable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
65276533
public fun setHitSlop (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/Dynamic;)V
65286534
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: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,14 @@ public object ViewProps {
7676
// Backwards-compatible alias for the original experimental_ prefixed prop name.
7777
public const val EXPERIMENTAL_BACKGROUND_IMAGE: String = "experimental_backgroundImage"
7878
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"
7981
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"
8084
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: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,14 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
174174
}
175175
}
176176

177+
@ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_SIZE, customType = "BackgroundSize")
178+
public open fun setExperimentalBackgroundSize(
179+
view: ReactViewGroup,
180+
backgroundSize: ReadableArray?,
181+
) {
182+
setBackgroundSize(view, backgroundSize)
183+
}
184+
177185
@ReactProp(name = ViewProps.BACKGROUND_POSITION, customType = "BackgroundPosition")
178186
public open fun setBackgroundPosition(view: ReactViewGroup, backgroundPosition: ReadableArray?) {
179187
if (backgroundPosition != null && backgroundPosition.size() > 0) {
@@ -191,6 +199,14 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
191199
}
192200
}
193201

202+
@ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_POSITION, customType = "BackgroundPosition")
203+
public open fun setExperimentalBackgroundPosition(
204+
view: ReactViewGroup,
205+
backgroundPosition: ReadableArray?,
206+
) {
207+
setBackgroundPosition(view, backgroundPosition)
208+
}
209+
194210
@ReactProp(name = ViewProps.BACKGROUND_REPEAT, customType = "BackgroundRepeat")
195211
public open fun setBackgroundRepeat(view: ReactViewGroup, backgroundRepeat: ReadableArray?) {
196212
if (backgroundRepeat != null && backgroundRepeat.size() > 0) {
@@ -208,6 +224,14 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
208224
}
209225
}
210226

227+
@ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_REPEAT, customType = "BackgroundRepeat")
228+
public open fun setExperimentalBackgroundRepeat(
229+
view: ReactViewGroup,
230+
backgroundRepeat: ReadableArray?,
231+
) {
232+
setBackgroundRepeat(view, backgroundRepeat)
233+
}
234+
211235
@ReactProp(name = "nextFocusDown", defaultInt = View.NO_ID)
212236
public open fun nextFocusDown(view: ReactViewGroup, viewId: Int) {
213237
view.nextFocusDownId = viewId

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -218,19 +218,34 @@ BaseViewProps::BaseViewProps(
218218
context,
219219
rawProps,
220220
"backgroundSize",
221-
sourceProps.backgroundSize,
221+
convertRawProp(
222+
context,
223+
rawProps,
224+
"experimental_backgroundSize",
225+
sourceProps.backgroundSize,
226+
{}),
222227
{})),
223228
backgroundPosition(convertRawProp(
224229
context,
225230
rawProps,
226231
"backgroundPosition",
227-
sourceProps.backgroundPosition,
232+
convertRawProp(
233+
context,
234+
rawProps,
235+
"experimental_backgroundPosition",
236+
sourceProps.backgroundPosition,
237+
{}),
228238
{})),
229239
backgroundRepeat(convertRawProp(
230240
context,
231241
rawProps,
232242
"backgroundRepeat",
233-
sourceProps.backgroundRepeat,
243+
convertRawProp(
244+
context,
245+
rawProps,
246+
"experimental_backgroundRepeat",
247+
sourceProps.backgroundRepeat,
248+
{}),
234249
{})),
235250
mixBlendMode(convertRawProp(
236251
context,
@@ -339,8 +354,12 @@ void BaseViewProps::setProp(
339354
RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundImage);
340355
RAW_SET_PROP_SWITCH_CASE(backgroundImage, "experimental_backgroundImage");
341356
RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundSize);
357+
RAW_SET_PROP_SWITCH_CASE(backgroundSize, "experimental_backgroundSize");
342358
RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundPosition);
359+
RAW_SET_PROP_SWITCH_CASE(
360+
backgroundPosition, "experimental_backgroundPosition");
343361
RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundRepeat);
362+
RAW_SET_PROP_SWITCH_CASE(backgroundRepeat, "experimental_backgroundRepeat");
344363
RAW_SET_PROP_SWITCH_CASE_BASIC(shadowColor);
345364
RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOffset);
346365
RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOpacity);

0 commit comments

Comments
 (0)