zzos/react-native
1
0
Fork 0
mirror of https://github.com/react/react-native.git synced 2026-09-28 13:23:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(style): remove experimental_ prefix from backgroundSize, backgroundPosition and backgroundRepeat (#57563)

Browse Source 
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
This commit is contained in:
nishan (o^▽^o)
2026-08-18 09:31:55 -07:00
committed by meta-codesync[bot]
parent 2ec447a5c4
commit 7844386bbd
10 changed files with 209 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js
Vendored
+6
View File
@@ -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,
/**
packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js
+3
View File
@@ -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,
packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js
Vendored
+3
View File
@@ -893,9 +893,12 @@ export type ____ViewStyle_InternalBase = Readonly<{
mixBlendMode?: ____BlendMode_Internal,
backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
experimental_backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string,
experimental_backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string,
backgroundPosition?: ReadonlyArray<BackgroundPositionValue> | string,
experimental_backgroundPosition?:
ReadonlyArray<BackgroundPositionValue> | string,
backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string,
experimental_backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string,
isolation?: 'auto' | 'isolate',
}>;
packages/react-native/ReactAndroid/api/ReactAndroid.api
+6
View File
@@ -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
packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt
+9 -3
View File
@@ -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"
packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt
+36
View File
@@ -174,6 +174,18 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
}
}
@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<ReactViewGroup>()
}
}
@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<ReactViewGroup>()
}
}
@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
packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp
+24 -6
View File
@@ -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);
packages/react-native/ReactNativeApi.d.ts
Vendored
+95 -65
View File
@@ -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<<aa2e1e5d4537b814b54eaaeafe35469c>>
* @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<BackgroundImageValue> | string
readonly backgroundPosition?: ReadonlyArray<BackgroundPositionValue> | string
readonly backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string
readonly backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string
readonly borderBlockColor?: ____ColorValue_Internal
readonly borderBlockEndColor?: ____ColorValue_Internal
readonly borderBlockStartColor?: ____ColorValue_Internal
@@ -1587,6 +1590,33 @@ declare type AttributeType<T, V> =
}
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
packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts
Vendored
+4
View File
@@ -502,10 +502,14 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
backgroundImage?: ReadonlyArray<BackgroundImageValue> | string | undefined;
experimental_backgroundImage?:
ReadonlyArray<BackgroundImageValue> | string | undefined;
backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string | undefined;
experimental_backgroundSize?:
ReadonlyArray<BackgroundSizeValue> | string | undefined;
backgroundPosition?:
ReadonlyArray<BackgroundPositionValue> | string | undefined;
experimental_backgroundPosition?:
ReadonlyArray<BackgroundPositionValue> | string | undefined;
backgroundRepeat?: ReadonlyArray<BackgroundRepeatValue> | string | undefined;
experimental_backgroundRepeat?:
ReadonlyArray<BackgroundRepeatValue> | string | undefined;
}
packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js
+23 -23
View File
@@ -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 = [
<BackgroundImageBox
style={{
backgroundImage: 'radial-gradient(circle, #ff6b6b, #4ecdc4)',
experimental_backgroundRepeat: 'no-repeat',
experimental_backgroundPosition: 'center',
experimental_backgroundSize: '50px 50px',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: '50px 50px',
borderWidth: 1,
}}
testID="background-image-position-1"
@@ -272,10 +272,10 @@ exports.examples = [
<BackgroundImageBox
style={{
backgroundImage: 'radial-gradient(circle, #a8edea, #fed6e3)',
experimental_backgroundRepeat: 'no-repeat',
experimental_backgroundPosition: '25% 75%',
backgroundRepeat: 'no-repeat',
backgroundPosition: '25% 75%',
borderWidth: 1,
experimental_backgroundSize: '50px 50px',
backgroundSize: '50px 50px',
}}
testID="background-image-position-2"
/>
@@ -285,10 +285,10 @@ exports.examples = [
<BackgroundImageBox
style={{
backgroundImage: 'radial-gradient(circle, #ffecd2, #fcb69f)',
experimental_backgroundRepeat: 'no-repeat',
experimental_backgroundPosition: 'right bottom',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'right bottom',
borderWidth: 1,
experimental_backgroundSize: '50px 50px',
backgroundSize: '50px 50px',
}}
testID="background-image-position-3"
/>
@@ -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%',