From 7844386bbdfe8a8540e64d5d670bcfbb426debe9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nishan=20=28o=5E=E2=96=BD=5Eo=29?= Date: Tue, 18 Aug 2026 09:31:55 -0700 Subject: [PATCH] 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 https://github.com/react/react-native/issues/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: https://github.com/react/react-native/pull/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 --- .../View/ReactNativeStyleAttributes.js | 6 + .../NativeComponent/BaseViewConfig.android.js | 3 + .../Libraries/StyleSheet/StyleSheetTypes.js | 3 + .../ReactAndroid/api/ReactAndroid.api | 6 + .../com/facebook/react/uimanager/ViewProps.kt | 12 +- .../react/views/view/ReactViewManager.kt | 36 ++++ .../components/view/BaseViewProps.cpp | 30 +++- packages/react-native/ReactNativeApi.d.ts | 160 +++++++++++------- .../Libraries/StyleSheet/StyleSheetTypes.d.ts | 4 + .../BackgroundImage/BackgroundImageExample.js | 46 ++--- 10 files changed, 209 insertions(+), 97 deletions(-) diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js index d3883ea7b85..db39c72950e 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -205,16 +205,22 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { /** * BackgroundSize */ + backgroundSize: backgroundSizeAttribute, + /** @deprecated Use `backgroundSize` instead. */ experimental_backgroundSize: backgroundSizeAttribute, /** * BackgroundPosition */ + backgroundPosition: backgroundPositionAttribute, + /** @deprecated Use `backgroundPosition` instead. */ experimental_backgroundPosition: backgroundPositionAttribute, /** * BackgroundRepeat */ + backgroundRepeat: backgroundRepeatAttribute, + /** @deprecated Use `backgroundRepeat` instead. */ experimental_backgroundRepeat: backgroundRepeatAttribute, /** diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js index 0f93c41709c..6e3ee698720 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js @@ -213,8 +213,11 @@ const validAttributesForNonEventProps = { transformOrigin: true, backgroundImage: backgroundImageAttribute, experimental_backgroundImage: backgroundImageAttribute, + backgroundSize: backgroundSizeAttribute, experimental_backgroundSize: backgroundSizeAttribute, + backgroundPosition: backgroundPositionAttribute, experimental_backgroundPosition: backgroundPositionAttribute, + backgroundRepeat: backgroundRepeatAttribute, experimental_backgroundRepeat: backgroundRepeatAttribute, boxShadow: boxShadowAttribute, filter: filterAttribute, diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index dfee208d203..5a1951a1e2c 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -893,9 +893,12 @@ export type ____ViewStyle_InternalBase = Readonly<{ mixBlendMode?: ____BlendMode_Internal, backgroundImage?: ReadonlyArray | string, experimental_backgroundImage?: ReadonlyArray | string, + backgroundSize?: ReadonlyArray | string, experimental_backgroundSize?: ReadonlyArray | string, + backgroundPosition?: ReadonlyArray | string, experimental_backgroundPosition?: ReadonlyArray | string, + backgroundRepeat?: ReadonlyArray | string, experimental_backgroundRepeat?: ReadonlyArray | string, isolation?: 'auto' | 'isolate', }>; diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api index d8aa43d8622..a78d8fbd869 100644 --- a/packages/react-native/ReactAndroid/api/ReactAndroid.api +++ b/packages/react-native/ReactAndroid/api/ReactAndroid.api @@ -4555,6 +4555,9 @@ public final class com/facebook/react/uimanager/ViewProps { public static final field ENABLED Ljava/lang/String; public static final field END Ljava/lang/String; public static final field EXPERIMENTAL_BACKGROUND_IMAGE Ljava/lang/String; + public static final field EXPERIMENTAL_BACKGROUND_POSITION Ljava/lang/String; + public static final field EXPERIMENTAL_BACKGROUND_REPEAT Ljava/lang/String; + public static final field EXPERIMENTAL_BACKGROUND_SIZE Ljava/lang/String; public static final field FILTER Ljava/lang/String; public static final field FLEX Ljava/lang/String; public static final field FLEX_BASIS Ljava/lang/String; @@ -6555,6 +6558,9 @@ public class com/facebook/react/views/view/ReactViewManager : com/facebook/react public fun setCollapsable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V public fun setCollapsableChildren (Lcom/facebook/react/views/view/ReactViewGroup;Z)V public fun setExperimentalBackgroundImage (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V + public fun setExperimentalBackgroundPosition (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V + public fun setExperimentalBackgroundRepeat (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V + public fun setExperimentalBackgroundSize (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V public fun setFocusable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V public fun setHitSlop (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/Dynamic;)V public fun setNativeBackground (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableMap;)V 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 index 07d7e132e7d..8aeb0684837 100644 --- 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 @@ -75,9 +75,15 @@ public object ViewProps { public const val BACKGROUND_IMAGE: String = "backgroundImage" // Backwards-compatible alias for the original experimental_ prefixed prop name. public const val EXPERIMENTAL_BACKGROUND_IMAGE: String = "experimental_backgroundImage" - public const val BACKGROUND_SIZE: String = "experimental_backgroundSize" - public const val BACKGROUND_POSITION: String = "experimental_backgroundPosition" - public const val BACKGROUND_REPEAT: String = "experimental_backgroundRepeat" + public const val BACKGROUND_SIZE: String = "backgroundSize" + // Backwards-compatible alias for the original experimental_ prefixed prop name. + public const val EXPERIMENTAL_BACKGROUND_SIZE: String = "experimental_backgroundSize" + public const val BACKGROUND_POSITION: String = "backgroundPosition" + // Backwards-compatible alias for the original experimental_ prefixed prop name. + public const val EXPERIMENTAL_BACKGROUND_POSITION: String = "experimental_backgroundPosition" + public const val BACKGROUND_REPEAT: String = "backgroundRepeat" + // Backwards-compatible alias for the original experimental_ prefixed prop name. + public const val EXPERIMENTAL_BACKGROUND_REPEAT: String = "experimental_backgroundRepeat" public const val FOREGROUND_COLOR: String = "foregroundColor" public const val COLOR: String = "color" public const val FONT_SIZE: String = "fontSize" diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt index 009b2c064a0..fc0629f9cf7 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt @@ -174,6 +174,18 @@ public open class ReactViewManager : ReactClippingViewManager() } } + @Deprecated( + "Use setBackgroundSize instead.", + ReplaceWith("setBackgroundSize(view, backgroundSize)"), + ) + @ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_SIZE, customType = "BackgroundSize") + public open fun setExperimentalBackgroundSize( + view: ReactViewGroup, + backgroundSize: ReadableArray?, + ) { + setBackgroundSize(view, backgroundSize) + } + @ReactProp(name = ViewProps.BACKGROUND_POSITION, customType = "BackgroundPosition") public open fun setBackgroundPosition(view: ReactViewGroup, backgroundPosition: ReadableArray?) { if (backgroundPosition != null && backgroundPosition.size() > 0) { @@ -191,6 +203,18 @@ public open class ReactViewManager : ReactClippingViewManager() } } + @Deprecated( + "Use setBackgroundPosition instead.", + ReplaceWith("setBackgroundPosition(view, backgroundPosition)"), + ) + @ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_POSITION, customType = "BackgroundPosition") + public open fun setExperimentalBackgroundPosition( + view: ReactViewGroup, + backgroundPosition: ReadableArray?, + ) { + setBackgroundPosition(view, backgroundPosition) + } + @ReactProp(name = ViewProps.BACKGROUND_REPEAT, customType = "BackgroundRepeat") public open fun setBackgroundRepeat(view: ReactViewGroup, backgroundRepeat: ReadableArray?) { if (backgroundRepeat != null && backgroundRepeat.size() > 0) { @@ -208,6 +232,18 @@ public open class ReactViewManager : ReactClippingViewManager() } } + @Deprecated( + "Use setBackgroundRepeat instead.", + ReplaceWith("setBackgroundRepeat(view, backgroundRepeat)"), + ) + @ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_REPEAT, customType = "BackgroundRepeat") + public open fun setExperimentalBackgroundRepeat( + view: ReactViewGroup, + backgroundRepeat: ReadableArray?, + ) { + setBackgroundRepeat(view, backgroundRepeat) + } + @ReactProp(name = "nextFocusDown", defaultInt = View.NO_ID) public open fun nextFocusDown(view: ReactViewGroup, viewId: Int) { view.nextFocusDownId = viewId diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp index 4f8e4265d89..1cb30b0ed6a 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp @@ -217,20 +217,35 @@ BaseViewProps::BaseViewProps( backgroundSize(convertRawProp( context, rawProps, - "experimental_backgroundSize", - sourceProps.backgroundSize, + "backgroundSize", + convertRawProp( + context, + rawProps, + "experimental_backgroundSize", + sourceProps.backgroundSize, + {}), {})), backgroundPosition(convertRawProp( context, rawProps, - "experimental_backgroundPosition", - sourceProps.backgroundPosition, + "backgroundPosition", + convertRawProp( + context, + rawProps, + "experimental_backgroundPosition", + sourceProps.backgroundPosition, + {}), {})), backgroundRepeat(convertRawProp( context, rawProps, - "experimental_backgroundRepeat", - sourceProps.backgroundRepeat, + "backgroundRepeat", + convertRawProp( + context, + rawProps, + "experimental_backgroundRepeat", + sourceProps.backgroundRepeat, + {}), {})), mixBlendMode(convertRawProp( context, @@ -338,9 +353,12 @@ void BaseViewProps::setProp( RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundColor); RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundImage); RAW_SET_PROP_SWITCH_CASE(backgroundImage, "experimental_backgroundImage"); + RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundSize); RAW_SET_PROP_SWITCH_CASE(backgroundSize, "experimental_backgroundSize"); + RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundPosition); RAW_SET_PROP_SWITCH_CASE( backgroundPosition, "experimental_backgroundPosition"); + RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundRepeat); RAW_SET_PROP_SWITCH_CASE(backgroundRepeat, "experimental_backgroundRepeat"); RAW_SET_PROP_SWITCH_CASE_BASIC(shadowColor); RAW_SET_PROP_SWITCH_CASE_BASIC(shadowOffset); diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index 2755823b602..c1ac9628efe 100644 --- a/packages/react-native/ReactNativeApi.d.ts +++ b/packages/react-native/ReactNativeApi.d.ts @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<> + * @generated SignedSource<<2199d280ef42e2a63ec4d6c405af893a>> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -853,6 +853,9 @@ declare type ____ViewStyle_InternalBase = { readonly backfaceVisibility?: "hidden" | "visible" readonly backgroundColor?: ____ColorValue_Internal readonly backgroundImage?: ReadonlyArray | string + readonly backgroundPosition?: ReadonlyArray | string + readonly backgroundRepeat?: ReadonlyArray | string + readonly backgroundSize?: ReadonlyArray | string readonly borderBlockColor?: ____ColorValue_Internal readonly borderBlockEndColor?: ____ColorValue_Internal readonly borderBlockStartColor?: ____ColorValue_Internal @@ -1587,6 +1590,33 @@ declare type AttributeType = } declare type AutoCapitalize = "characters" | "none" | "sentences" | "words" declare type BackgroundImageValue = LinearGradientValue | RadialGradientValue +declare type BackgroundPositionValue = + | { + bottom: number | string + left: number | string + } + | { + bottom: number | string + right: number | string + } + | { + left: number | string + top: number | string + } + | { + right: number | string + top: number | string + } +declare type BackgroundRepeatKeyword = + "no-repeat" | "repeat" | "round" | "space" +declare type BackgroundRepeatValue = { + x: BackgroundRepeatKeyword + y: BackgroundRepeatKeyword +} +declare type BackgroundSizeValue = { + x: number | string + y: number | string +} declare type BackHandler = typeof BackHandler declare type BackPressEventName = "backPress" | "hardwareBackPress" declare type BaseKeyboardEvent = { @@ -5722,18 +5752,18 @@ export { AccessibilityValue, // cf8bcb74 ActionSheetIOS, // b558559e ActionSheetIOSOptions, // 1756eb5a - ActivityIndicator, // e43c68bb + ActivityIndicator, // 085c0bdd ActivityIndicatorInstance, // a82dd4e7 - ActivityIndicatorProps, // 619842eb + ActivityIndicatorProps, // 7597a087 Alert, // a398a509 AlertButton, // bf1a3b60 AlertButtonStyle, // ec9fb242 AlertOptions, // 8a116d2a AlertType, // 5ab91217 AndroidKeyboardEvent, // e03becc8 - Animated, // c8741f58 + Animated, // 8ed2ff0a AppConfig, // 35c0ca70 - AppRegistry, // 1e8c5a00 + AppRegistry, // 5bc2bced AppState, // 12012be5 AppStateEvent, // 80f034c3 AppStateStatus, // 447e5ef2 @@ -5745,8 +5775,8 @@ export { BackPressEventName, // 4620fb76 BlurEvent, // 4ba4f941 BoxShadowValue, // b679703f - Button, // 586b24c2 - ButtonInstance, // e3c42339 + Button, // af384e38 + ButtonInstance, // 3f6e29ea ButtonProps, // 21c5780c Clipboard, // 41addb89 CodegenTypes, // ab4986cc @@ -5765,9 +5795,9 @@ export { DimensionsPayload, // 653bc26c DisplayMetrics, // 1dc35cef DisplayMetricsAndroid, // 872e62eb - DrawerLayoutAndroid, // 7843b7b5 + DrawerLayoutAndroid, // 787ba7e2 DrawerLayoutAndroidInstance, // c0694352 - DrawerLayoutAndroidProps, // 0c1d6155 + DrawerLayoutAndroidProps, // 658000f3 DrawerSlideEvent, // c4ab8fba DropShadowValue, // e9df2606 DynamicColorIOS, // d96c228c @@ -5783,9 +5813,9 @@ export { EventSubscription, // b8d084aa ExtendedExceptionData, // 5a6ccf5a FilterFunction, // bf24c0e3 - FlatList, // 2a814748 - FlatListInstance, // 696cc805 - FlatListProps, // 6d5e2d1f + FlatList, // 901c50da + FlatListInstance, // c2dd86eb + FlatListProps, // 3bd11d32 FocusEvent, // 850f1517 FontVariant, // 7c7558bb GestureResponderEvent, // 14d3e77a @@ -5796,17 +5826,17 @@ export { IEventEmitter, // fbef6131 IOSKeyboardEvent, // e67bfe3a IgnorePattern, // ec6f6ece - Image, // 87b793a4 - ImageBackground, // abfd6c1d - ImageBackgroundInstance, // 50bc4cb3 - ImageBackgroundProps, // e04f173a + Image, // 23ec0708 + ImageBackground, // 4922fef8 + ImageBackgroundInstance, // a693a792 + ImageBackgroundProps, // 9a257b18 ImageErrorEvent, // 978933f4 ImageInstance, // 9a100753 ImageLoadEvent, // 77f0b718 ImageProgressEventIOS, // 445331a4 - ImageProps, // c50cfe0d + ImageProps, // 9acb1a99 ImagePropsAndroid, // ee00e1d5 - ImagePropsBase, // fa3f8e21 + ImagePropsBase, // ceee1a0e ImagePropsIOS, // 9e19c85d ImageRequireSource, // 681d683b ImageResizeMode, // d51106e2 @@ -5814,19 +5844,19 @@ export { ImageSize, // 1c47cf88 ImageSource, // ea31cf4a ImageSourcePropType, // f522e093 - ImageStyle, // 4b7c1906 + ImageStyle, // c972b651 ImageURISource, // 443d047c - InputAccessoryView, // 9695d393 - InputAccessoryViewProps, // d94dc290 + InputAccessoryView, // 69da97d8 + InputAccessoryViewProps, // 6c4ba417 InputModeOptions, // 4e8581b9 Insets, // e7fe432a KeyDownEvent, // 5b147614 KeyEvent, // 20fa4267 KeyUpEvent, // 57f832c5 Keyboard, // 49414c97 - KeyboardAvoidingView, // fbf69b90 - KeyboardAvoidingViewInstance, // f6c63fc9 - KeyboardAvoidingViewProps, // 8609524c + KeyboardAvoidingView, // 206bbaad + KeyboardAvoidingViewInstance, // 9fc99a9a + KeyboardAvoidingViewProps, // 1661b30c KeyboardEvent, // c3f895d4 KeyboardEventEasing, // af4091c8 KeyboardEventName, // 59299ad6 @@ -5851,10 +5881,10 @@ export { MeasureInWindowOnSuccessCallback, // a285f598 MeasureLayoutOnSuccessCallback, // 3592502a MeasureOnSuccessCallback, // 82824e59 - Modal, // 252d448a + Modal, // 8e222ce5 ModalBaseProps, // c294cc46 ModalInstance, // d466ce77 - ModalProps, // 757e7cec + ModalProps, // dc3dfe04 ModalPropsAndroid, // 515fb173 ModalPropsIOS, // 664ecb7e ModeChangeEvent, // f64bf69d @@ -5890,15 +5920,15 @@ export { PointerEvent, // ff599afe PressabilityConfig, // fea539a5 PressabilityEventHandlers, // c222648b - Pressable, // ed5391ac + Pressable, // 148fa542 PressableAndroidRippleConfig, // ee32eaca PressableInstance, // eebfe911 - PressableProps, // d6bfa55b + PressableProps, // 0610ea0a PressableStateCallbackType, // 9af36561 ProcessedColorValue, // 33f74304 - ProgressBarAndroid, // 2dd6dbfd + ProgressBarAndroid, // 48034c58 ProgressBarAndroidInstance, // ab545ef1 - ProgressBarAndroidProps, // 07fa83a1 + ProgressBarAndroidProps, // 9c1b93a7 PublicRootInstance, // 8040afd7 PublicTextInstance, // 6937c7bf PushNotificationEventName, // 84e7e150 @@ -5906,9 +5936,9 @@ export { PushNotificationPermissions, // c2e7ae4f Rationale, // 5df1b1c1 ReactNativeVersion, // abd76827 - RefreshControl, // 947cb880 - RefreshControlInstance, // 55f1814a - RefreshControlProps, // eb2b1cbe + RefreshControl, // 76837d3f + RefreshControlInstance, // 4c4b2643 + RefreshControlProps, // d41ad947 RefreshControlPropsAndroid, // 8ac931ca RefreshControlPropsIOS, // 72a36381 Registry, // 6c39216d @@ -5917,27 +5947,27 @@ export { Role, // af7b889d RootTag, // 3cd10504 RootTagContext, // 38bfc8f6 - RootViewStyleProvider, // 8792d506 + RootViewStyleProvider, // a4547094 Runnable, // 594dd93a Runnables, // 4367c557 - SafeAreaView, // 9ce03f75 + SafeAreaView, // 718d200c SafeAreaViewInstance, // 21dba39c ScaledSize, // 07e417c7 ScrollEvent, // d7abdd0a - ScrollResponderType, // ba188eae + ScrollResponderType, // 603c33d5 ScrollToLocationParamsType, // d7ecdad1 - ScrollView, // 66fa774d - ScrollViewImperativeMethods, // 904c66fd - ScrollViewInstance, // ccf4f341 - ScrollViewProps, // 678e4360 + ScrollView, // a644be1d + ScrollViewImperativeMethods, // 480a85e1 + ScrollViewInstance, // 1030cf7f + ScrollViewProps, // 901ba6eb ScrollViewPropsAndroid, // 02f3df2e ScrollViewPropsIOS, // 807cb4f6 ScrollViewScrollToOptions, // 3313411e SectionBase, // 9f13db00 - SectionList, // 4a8d5792 + SectionList, // d3af1e2c SectionListData, // 1a4de01a - SectionListInstance, // b6326f35 - SectionListProps, // d0058bb4 + SectionListInstance, // 07b91520 + SectionListProps, // ea05da1f SectionListRenderItem, // 715b2086 SectionListRenderItemInfo, // 4a48a922 Separators, // 6a45f7e3 @@ -5954,19 +5984,19 @@ export { StatusBarProps, // c2a44d88 StatusBarStyle, // 78f53eea StyleProp, // fa0e9b4a - StyleSheet, // a6a3620c + StyleSheet, // f7fe407a SubmitBehavior, // c4ddf490 - Switch, // f495bab3 + Switch, // b3e75e79 SwitchChangeEvent, // 899635b1 SwitchInstance, // 3c50eec5 - SwitchProps, // cadfd0c4 + SwitchProps, // 31d4e162 Systrace, // 626d178c TVViewPropsIOS, // 330ce7b5 TargetedEvent, // 16e98910 TaskProvider, // 266dedf2 - Text, // 72e323cd + Text, // 6f2a9453 TextContentType, // 239b3ecc - TextInput, // e1821dbc + TextInput, // e7689ddb TextInputAndroidProps, // 9ebbc103 TextInputBlurEvent, // b77af40e TextInputChangeEvent, // f55eef98 @@ -5976,44 +6006,44 @@ export { TextInputIOSProps, // fb3c9327 TextInputInstance, // 5a0c0e0d TextInputKeyPressEvent, // 546c5d07 - TextInputProps, // f6b0ba24 + TextInputProps, // 665a095f TextInputSelectionChangeEvent, // e58f2abc TextInputSubmitEditingEvent, // 6bcb2aa5 TextInstance, // 05463a96 TextLayoutEvent, // 3f54186f - TextProps, // 921f7adc - TextStyle, // 01a21fd1 + TextProps, // 278dd30a + TextStyle, // bea26d6b ToastAndroid, // 88a8969a - TouchableHighlight, // 3a6eaed4 + TouchableHighlight, // 4b9ae440 TouchableHighlightInstance, // b510c0eb - TouchableHighlightProps, // 00e100c4 - TouchableNativeFeedback, // fe739e82 - TouchableNativeFeedbackInstance, // 0877e3e4 - TouchableNativeFeedbackProps, // 1d0c2f30 - TouchableOpacity, // 3eccd75e + TouchableHighlightProps, // 8e8c6680 + TouchableNativeFeedback, // 49b246df + TouchableNativeFeedbackInstance, // 95dc4a1d + TouchableNativeFeedbackProps, // b32639f0 + TouchableOpacity, // 36c0926f TouchableOpacityInstance, // b186055b - TouchableOpacityProps, // dd9e3393 - TouchableWithoutFeedback, // ed159ba7 - TouchableWithoutFeedbackProps, // e613ed05 + TouchableOpacityProps, // d7db3879 + TouchableWithoutFeedback, // 4bf9d65a + TouchableWithoutFeedbackProps, // 931958b6 TransformsStyle, // 65e70f18 TurboModule, // dfe29706 TurboModuleRegistry, // 4ace6db2 UIManager, // afbcdf05 UTFSequence, // ad625158 Vibration, // 31e4bbf8 - View, // 3e72139a + View, // c31ebc5e ViewInstance, // ffde5573 - ViewProps, // 763271bb + ViewProps, // e2c15ef7 ViewPropsAndroid, // 55e81851 ViewPropsIOS, // 58ee19bf - ViewStyle, // e45056b1 + ViewStyle, // 1848a17c VirtualViewMode, // 6be59722 VirtualizedList, // 68c7345e VirtualizedListInstance, // 423ee7c0 - VirtualizedListProps, // 743d6082 + VirtualizedListProps, // 3194847b VirtualizedSectionList, // 9fd9cd61 VirtualizedSectionListInstance, // 12b706d5 - VirtualizedSectionListProps, // 99c0a403 + VirtualizedSectionListProps, // f42f54c4 WrapperComponentProvider, // 9ef54e61 codegenNativeCommands, // 628a7c0a codegenNativeComponent, // 32a1bca6 diff --git a/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts index 04b13f46ad9..95a4acd756f 100644 --- a/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -502,10 +502,14 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle { backgroundImage?: ReadonlyArray | string | undefined; experimental_backgroundImage?: ReadonlyArray | string | undefined; + backgroundSize?: ReadonlyArray | string | undefined; experimental_backgroundSize?: ReadonlyArray | string | undefined; + backgroundPosition?: + ReadonlyArray | string | undefined; experimental_backgroundPosition?: ReadonlyArray | string | undefined; + backgroundRepeat?: ReadonlyArray | string | undefined; experimental_backgroundRepeat?: ReadonlyArray | string | undefined; } diff --git a/packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js b/packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js index cab3deb3109..e1ca7d92ef4 100644 --- a/packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js +++ b/packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js @@ -195,8 +195,8 @@ exports.examples = [ height: 200, backgroundImage: 'linear-gradient(45deg, #ff6b6b 25%, transparent 25%), linear-gradient(-45deg, #4ecdc4 25%, transparent 25%)', - experimental_backgroundRepeat: 'repeat', - experimental_backgroundSize: '20px 20px', + backgroundRepeat: 'repeat', + backgroundSize: '20px 20px', }} testID="background-image-repeat-1" /> @@ -208,8 +208,8 @@ exports.examples = [ width: 200, height: 200, backgroundImage: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)', - experimental_backgroundRepeat: 'space', - experimental_backgroundSize: '50px 50px', + backgroundRepeat: 'space', + backgroundSize: '50px 50px', }} testID="background-image-repeat-2" /> @@ -223,8 +223,8 @@ exports.examples = [ width: 200, height: 200, backgroundImage: 'linear-gradient(90deg, #a8edea, #fed6e3)', - experimental_backgroundRepeat: 'round', - experimental_backgroundSize: '60px 60px', + backgroundRepeat: 'round', + backgroundSize: '60px 60px', }} testID="background-image-repeat-3" /> @@ -236,8 +236,8 @@ exports.examples = [ width: 200, height: 200, backgroundImage: 'radial-gradient(circle, #ffecd2, #fcb69f)', - experimental_backgroundRepeat: 'no-repeat', - experimental_backgroundSize: '100px 100px', + backgroundRepeat: 'no-repeat', + backgroundSize: '100px 100px', backgroundColor: 'purple', }} testID="background-image-repeat-4" @@ -259,9 +259,9 @@ exports.examples = [ @@ -285,10 +285,10 @@ exports.examples = [ @@ -316,16 +316,16 @@ exports.examples = [ linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%); `, - experimental_backgroundRepeat: + backgroundRepeat: 'no-repeat, no-repeat, repeat, repeat, repeat, repeat', - experimental_backgroundSize: ` + backgroundSize: ` 500px 500px, 400px 400px, 50px 50px, 50px 50px, 100px 100px, 100px 100px`, - experimental_backgroundPosition: ` + backgroundPosition: ` top left, bottom right, 0 0, @@ -412,19 +412,19 @@ exports.examples = [ ], }, ], - experimental_backgroundRepeat: [ + backgroundRepeat: [ { x: 'no-repeat', y: 'no-repeat', }, ], - experimental_backgroundPosition: [ + backgroundPosition: [ { top: '50%', left: '50%', }, ], - experimental_backgroundSize: [ + backgroundSize: [ { x: '100%', y: '100%',