diff --git a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js index ba345e117cae..f70b0f04c7b6 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js @@ -194,7 +194,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { /** * BackgroundImage */ - experimental_backgroundImage: backgroundImageAttribute, + backgroundImage: backgroundImageAttribute, /** * BackgroundSize diff --git a/packages/react-native/Libraries/Components/View/__tests__/View-itest.js b/packages/react-native/Libraries/Components/View/__tests__/View-itest.js index ea83fd0e7eb3..15d1ac88ccb7 100644 --- a/packages/react-native/Libraries/Components/View/__tests__/View-itest.js +++ b/packages/react-native/Libraries/Components/View/__tests__/View-itest.js @@ -335,13 +335,12 @@ describe('', () => { <> | string | undefined; mixBlendMode?: BlendMode | undefined; - experimental_backgroundImage?: - | ReadonlyArray - | string - | undefined; + backgroundImage?: ReadonlyArray | string | undefined; experimental_backgroundSize?: | ReadonlyArray | string diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index 1bf46c32b078..f9921d0efbc6 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -887,7 +887,7 @@ export type ____ViewStyle_InternalBase = Readonly<{ boxShadow?: ReadonlyArray | string, filter?: ReadonlyArray | string, mixBlendMode?: ____BlendMode_Internal, - experimental_backgroundImage?: ReadonlyArray | string, + backgroundImage?: ReadonlyArray | string, experimental_backgroundSize?: ReadonlyArray | string, experimental_backgroundPosition?: | ReadonlyArray 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 16176a0f29c2..ac281c11be27 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 @@ -72,7 +72,7 @@ public object ViewProps { // Props that affect more than just layout public const val ENABLED: String = "enabled" public const val BACKGROUND_COLOR: String = "backgroundColor" - public const val BACKGROUND_IMAGE: String = "experimental_backgroundImage" + public const val BACKGROUND_IMAGE: String = "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" 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 9fe8d764f6ae..c0f5584911f6 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp @@ -223,7 +223,7 @@ BaseViewProps::BaseViewProps( : convertRawProp( context, rawProps, - "experimental_backgroundImage", + "backgroundImage", sourceProps.backgroundImage, {})), backgroundSize( @@ -403,7 +403,7 @@ void BaseViewProps::setProp( switch (hash) { RAW_SET_PROP_SWITCH_CASE_BASIC(opacity); RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundColor); - RAW_SET_PROP_SWITCH_CASE(backgroundImage, "experimental_backgroundImage"); + RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundImage); RAW_SET_PROP_SWITCH_CASE(backgroundSize, "experimental_backgroundSize"); RAW_SET_PROP_SWITCH_CASE( backgroundPosition, "experimental_backgroundPosition"); diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp index f430a9570978..349b5215d9dd 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp @@ -636,7 +636,7 @@ folly::dynamic HostPlatformViewProps::getDiffProps( } if (backgroundImage != oldProps->backgroundImage) { - result["experimental_backgroundImage"] = toDynamic(backgroundImage); + result["backgroundImage"] = toDynamic(backgroundImage); } if (mixBlendMode != oldProps->mixBlendMode) { diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index 13c53f3f59ab..86da452451ea 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<<1c8637ab03a5fec9d39704d1ae305595>> + * @generated SignedSource<<3576d0f7a8f6d9d33cc1e572f237176a>> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -938,6 +938,7 @@ declare type ____ViewStyle_Internal = Readonly< declare type ____ViewStyle_InternalBase = { readonly backfaceVisibility?: "hidden" | "visible" readonly backgroundColor?: ____ColorValue_Internal + readonly backgroundImage?: ReadonlyArray | string readonly borderBlockColor?: ____ColorValue_Internal readonly borderBlockEndColor?: ____ColorValue_Internal readonly borderBlockStartColor?: ____ColorValue_Internal @@ -1715,6 +1716,7 @@ declare type AttributeType = readonly process?: (arg1: V) => T } declare type AutoCapitalize = "characters" | "none" | "sentences" | "words" +declare type BackgroundImageValue = LinearGradientValue | RadialGradientValue declare type BackHandler = typeof BackHandler declare type BackPressEventName = "backPress" | "hardwareBackPress" declare type BaseKeyboardEvent = { @@ -3016,6 +3018,14 @@ declare interface LegacyHostInstanceMethods { ): void setNativeProps(nativeProps: {}): void } +declare type LinearGradientValue = { + colorStops: ReadonlyArray<{ + color: ____ColorValue_Internal + positions?: ReadonlyArray + }> + direction?: string + type: "linear-gradient" +} declare type Linking = typeof Linking declare type LinkingEventDefinitions = { url: [ @@ -3960,6 +3970,45 @@ declare type PushNotificationPermissions = { badge: boolean sound: boolean } +declare type RadialExtent = + | "closest-corner" + | "closest-side" + | "farthest-corner" + | "farthest-side" +declare type RadialGradientPosition = + | { + 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 RadialGradientShape = "circle" | "ellipse" +declare type RadialGradientSize = + | RadialExtent + | { + x: number | string + y: number | string + } +declare type RadialGradientValue = { + colorStops: ReadonlyArray<{ + color: ____ColorValue_Internal + positions?: ReadonlyArray + }> + position: RadialGradientPosition + shape: RadialGradientShape + size: RadialGradientSize + type: "radial-gradient" +} declare type Rationale = { buttonNegative?: string buttonNeutral?: string @@ -6056,17 +6105,17 @@ export { AccessibilityValue, // cf8bcb74 ActionSheetIOS, // b558559e ActionSheetIOSOptions, // 1756eb5a - ActivityIndicator, // 9b127a18 - ActivityIndicatorProps, // 40142bf3 + ActivityIndicator, // 4a86aa5c + ActivityIndicatorProps, // 97e889ac Alert, // 5bf12165 AlertButton, // bf1a3b60 AlertButtonStyle, // ec9fb242 AlertOptions, // a0cdac0f AlertType, // 5ab91217 AndroidKeyboardEvent, // e03becc8 - Animated, // 0652b5d1 + Animated, // 89eeb2f0 AppConfig, // ce4209a7 - AppRegistry, // 5edf0524 + AppRegistry, // 1e444b14 AppState, // 12012be5 AppStateEvent, // 80f034c3 AppStateStatus, // 447e5ef2 @@ -6076,7 +6125,7 @@ export { BackPressEventName, // 4620fb76 BlurEvent, // e6151a1f BoxShadowValue, // b679703f - Button, // 53167a86 + Button, // faec1385 ButtonProps, // 0df9cb59 Clipboard, // 41addb89 CodegenTypes, // 0b8108a8 @@ -6095,8 +6144,8 @@ export { DimensionsPayload, // 653bc26c DisplayMetrics, // 1dc35cef DisplayMetricsAndroid, // 872e62eb - DrawerLayoutAndroid, // c0fe33a6 - DrawerLayoutAndroidProps, // 6ce7fb3d + DrawerLayoutAndroid, // 22847bf6 + DrawerLayoutAndroidProps, // 0c9ee716 DrawerSlideEvent, // 0256d35a DropShadowValue, // e9df2606 DynamicColorIOS, // d96c228c @@ -6111,8 +6160,8 @@ export { EventSubscription, // b8d084aa ExtendedExceptionData, // 5a6ccf5a FilterFunction, // bf24c0e3 - FlatList, // 8c50f04a - FlatListProps, // e170f2c9 + FlatList, // defb06cc + FlatListProps, // 786ff1c7 FocusEvent, // 62fc1eb8 FontVariant, // 7c7558bb GestureResponderEvent, // f693e9a5 @@ -6124,25 +6173,25 @@ export { IEventEmitter, // fbef6131 IOSKeyboardEvent, // e67bfe3a IgnorePattern, // ec6f6ece - Image, // a2358f8c - ImageBackground, // 414c60ba - ImageBackgroundProps, // 65c127f9 + Image, // 59d6cb95 + ImageBackground, // 1cbf11e5 + ImageBackgroundProps, // a08548f6 ImageErrorEvent, // d3ee606e ImageLoadEvent, // 6b547ea5 ImageProgressEventIOS, // 4c866a82 - ImageProps, // d917cbd6 + ImageProps, // 73567b18 ImagePropsAndroid, // 9fd9bcbb - ImagePropsBase, // c9521ea0 + ImagePropsBase, // 31f21b6f ImagePropsIOS, // c4ae0c06 ImageRequireSource, // 681d683b ImageResolvedAssetSource, // f3060931 ImageSize, // 1c47cf88 ImageSource, // 48c7f316 ImageSourcePropType, // bfb5e5c6 - ImageStyle, // ad6a6dee + ImageStyle, // b184020c ImageURISource, // 016eb083 - InputAccessoryView, // 2a113ad4 - InputAccessoryViewProps, // 273c1565 + InputAccessoryView, // c247869e + InputAccessoryViewProps, // 03478ffd InputModeOptions, // 4e8581b9 Insets, // e7fe432a InteractionManager, // c324d6e3 @@ -6150,8 +6199,8 @@ export { KeyEvent, // 20fa4267 KeyUpEvent, // bc6bd87b Keyboard, // 49414c97 - KeyboardAvoidingView, // 79591758 - KeyboardAvoidingViewProps, // 7cd981a2 + KeyboardAvoidingView, // c7e93ab2 + KeyboardAvoidingViewProps, // 318c655d KeyboardEvent, // c3f895d4 KeyboardEventEasing, // af4091c8 KeyboardEventName, // 59299ad6 @@ -6176,9 +6225,9 @@ export { MeasureInWindowOnSuccessCallback, // a285f598 MeasureLayoutOnSuccessCallback, // 3592502a MeasureOnSuccessCallback, // 82824e59 - Modal, // dad0b1ce + Modal, // 14a4cf69 ModalBaseProps, // cbd3c10d - ModalProps, // 8e1508c6 + ModalProps, // 6504f71c ModalPropsAndroid, // 515fb173 ModalPropsIOS, // 144bbc95 ModeChangeEvent, // a5e9864f @@ -6216,13 +6265,13 @@ export { PointerEvent, // fe3989a1 PressabilityConfig, // 6dedcb61 PressabilityEventHandlers, // 3e6c0f56 - Pressable, // aef6bb57 + Pressable, // 4dc0a013 PressableAndroidRippleConfig, // 42bc9727 - PressableProps, // 3912691c + PressableProps, // 5acf8782 PressableStateCallbackType, // 9af36561 ProcessedColorValue, // 33f74304 - ProgressBarAndroid, // 36757db1 - ProgressBarAndroidProps, // 8bf4dfa6 + ProgressBarAndroid, // 4f0e4ba7 + ProgressBarAndroidProps, // 5c06dedd PromiseTask, // 5102c862 PublicRootInstance, // 8040afd7 PublicTextInstance, // cd0d8f8d @@ -6231,8 +6280,8 @@ export { PushNotificationPermissions, // c2e7ae4f Rationale, // 5df1b1c1 ReactNativeVersion, // abd76827 - RefreshControl, // b8659b1f - RefreshControlProps, // e747ed5d + RefreshControl, // aabfd501 + RefreshControlProps, // bcc3ddf5 RefreshControlPropsAndroid, // 99f64c97 RefreshControlPropsIOS, // 72a36381 Registry, // 6c39216d @@ -6241,24 +6290,24 @@ export { Role, // af7b889d RootTag, // 3cd10504 RootTagContext, // 38bfc8f6 - RootViewStyleProvider, // d4818465 + RootViewStyleProvider, // 8792d506 Runnable, // 594dd93a Runnables, // 4367c557 - SafeAreaView, // 9589fa67 + SafeAreaView, // e092c6bd ScaledSize, // 07e417c7 ScrollEvent, // 5d529218 - ScrollResponderType, // c6860ec8 + ScrollResponderType, // d62e97ee ScrollToLocationParamsType, // d7ecdad1 - ScrollView, // a3918d1a - ScrollViewImperativeMethods, // 7cd8d8de - ScrollViewProps, // 429fdd65 + ScrollView, // 77e743c4 + ScrollViewImperativeMethods, // c9e5250a + ScrollViewProps, // 70d78a8c ScrollViewPropsAndroid, // 44210553 ScrollViewPropsIOS, // b34b696c ScrollViewScrollToOptions, // 3313411e SectionBase, // b376bddc - SectionList, // 92031230 + SectionList, // 40298342 SectionListData, // 119baf83 - SectionListProps, // c0d0a46a + SectionListProps, // 040ab2cc SectionListRenderItem, // 1fad0435 SectionListRenderItemInfo, // 745e1992 Separators, // 6a45f7e3 @@ -6275,18 +6324,18 @@ export { StatusBarProps, // 06c98add StatusBarStyle, // 986b2051 StyleProp, // fa0e9b4a - StyleSheet, // e77dd046 + StyleSheet, // 3305b34f SubmitBehavior, // c4ddf490 - Switch, // 3434138b + Switch, // 330a26c0 SwitchChangeEvent, // 63e9c50b - SwitchProps, // 083b753d + SwitchProps, // fa42bcba Systrace, // b5aa21fc TVViewPropsIOS, // 330ce7b5 TargetedEvent, // 16e98910 TaskProvider, // 266dedf2 - Text, // 717d25fe + Text, // 997e1997 TextContentType, // 239b3ecc - TextInput, // ed3a8375 + TextInput, // 1fb2f1bb TextInputAndroidProps, // 3f09ce49 TextInputChangeEvent, // 3ab11bb4 TextInputContentSizeChangeEvent, // f71f8571 @@ -6294,38 +6343,38 @@ export { TextInputFocusEvent, // 020507e6 TextInputIOSProps, // 0d05a855 TextInputKeyPressEvent, // 3924ad9b - TextInputProps, // 9b370db2 + TextInputProps, // ac14a85c TextInputSelectionChangeEvent, // d4d10630 TextInputSubmitEditingEvent, // 22885c31 TextLayoutEvent, // 73ab173e - TextProps, // 68a1c0e8 - TextStyle, // bb9b7a58 + TextProps, // 95d52cf1 + TextStyle, // facf52f4 ToastAndroid, // 88a8969a Touchable, // da3239ee - TouchableHighlight, // 9d67503a - TouchableHighlightProps, // b2aa6f4b - TouchableNativeFeedback, // 2ed83cf4 - TouchableNativeFeedbackProps, // 1209959b - TouchableOpacity, // fcbaef78 - TouchableOpacityProps, // 13fbd043 - TouchableWithoutFeedback, // 39070327 - TouchableWithoutFeedbackProps, // b847de29 + TouchableHighlight, // 0af9b4e1 + TouchableHighlightProps, // ef84b3fb + TouchableNativeFeedback, // 078a6134 + TouchableNativeFeedbackProps, // 73c59348 + TouchableOpacity, // ca27d081 + TouchableOpacityProps, // d8e6dcae + TouchableWithoutFeedback, // b99ed1d8 + TouchableWithoutFeedbackProps, // 281f82eb TransformsStyle, // 65e70f18 TurboModule, // dfe29706 TurboModuleRegistry, // 4ace6db2 UIManager, // a1a7cc01 UTFSequence, // ad625158 Vibration, // 31e4bbf8 - View, // 02678ca8 - ViewProps, // 15e5f6b9 + View, // 6ee21bc3 + ViewProps, // 0d192bc2 ViewPropsAndroid, // bdfc84a1 ViewPropsIOS, // 58ee19bf - ViewStyle, // 00a0f8fb + ViewStyle, // e45056b1 VirtualViewMode, // 6be59722 VirtualizedList, // 68c7345e - VirtualizedListProps, // c7e8e7d7 + VirtualizedListProps, // 50623efd VirtualizedSectionList, // 9fd9cd61 - VirtualizedSectionListProps, // 53a7e6a4 + VirtualizedSectionListProps, // c0eaaa9a WrapperComponentProvider, // 9cf3844c codegenNativeCommands, // 628a7c0a codegenNativeComponent, // 2baac257 diff --git a/packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js b/packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js index 4857fed46e61..cab3deb3109a 100644 --- a/packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js +++ b/packages/rn-tester/js/examples/BackgroundImage/BackgroundImageExample.js @@ -67,7 +67,7 @@ exports.examples = [ return ( Basic @@ -85,8 +85,7 @@ exports.examples = [ 45deg @@ -95,8 +94,7 @@ exports.examples = [ 90deg @@ -105,8 +103,7 @@ exports.examples = [ 180deg @@ -125,7 +122,7 @@ exports.examples = [ 3 colors 4 colors Rainbow Circle @@ -175,8 +171,7 @@ exports.examples = [ Ellipse @@ -198,7 +193,7 @@ exports.examples = [ style={{ width: 200, height: 200, - experimental_backgroundImage: + backgroundImage: 'linear-gradient(45deg, #ff6b6b 25%, transparent 25%), linear-gradient(-45deg, #4ecdc4 25%, transparent 25%)', experimental_backgroundRepeat: 'repeat', experimental_backgroundSize: '20px 20px', @@ -212,8 +207,7 @@ exports.examples = [ style={{ width: 200, height: 200, - experimental_backgroundImage: - 'linear-gradient(45deg, #ff6b6b, #4ecdc4)', + backgroundImage: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)', experimental_backgroundRepeat: 'space', experimental_backgroundSize: '50px 50px', }} @@ -228,8 +222,7 @@ exports.examples = [ style={{ width: 200, height: 200, - experimental_backgroundImage: - 'linear-gradient(90deg, #a8edea, #fed6e3)', + backgroundImage: 'linear-gradient(90deg, #a8edea, #fed6e3)', experimental_backgroundRepeat: 'round', experimental_backgroundSize: '60px 60px', }} @@ -242,8 +235,7 @@ exports.examples = [ style={{ width: 200, height: 200, - experimental_backgroundImage: - 'radial-gradient(circle, #ffecd2, #fcb69f)', + backgroundImage: 'radial-gradient(circle, #ffecd2, #fcb69f)', experimental_backgroundRepeat: 'no-repeat', experimental_backgroundSize: '100px 100px', backgroundColor: 'purple', @@ -266,8 +258,7 @@ exports.examples = [ center 25% 75% right bottom borderRadius borderWidth + borderColor non uniform borderRadius non uniform borderWidth Linear Gradient @@ -73,7 +73,7 @@ exports.examples = [ return ( @@ -128,8 +127,7 @@ exports.examples = [ return ( @@ -144,7 +142,7 @@ exports.examples = [ @@ -159,7 +157,7 @@ exports.examples = [ @@ -258,7 +254,7 @@ exports.examples = [ return ( ); diff --git a/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js b/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js index c0c5c2d7be81..34c640610fcb 100644 --- a/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js +++ b/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js @@ -57,7 +57,7 @@ exports.examples = [ return ( Radial Gradient @@ -73,8 +73,7 @@ exports.examples = [ return ( @@ -89,7 +88,7 @@ exports.examples = [ return ( @@ -120,7 +119,7 @@ exports.examples = [ @@ -161,7 +159,7 @@ exports.examples = [ @@ -199,7 +197,7 @@ exports.examples = [ @@ -244,7 +242,7 @@ exports.examples = [