From 1514f64c9f9951553f999f78af500f23e2fa5ecd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Tue, 15 Oct 2024 23:49:36 +0200 Subject: [PATCH 1/7] feat(image): object-fit none support --- .../react-native/Libraries/Image/ImageUtils.js | 9 ++++++++- .../react-native/Libraries/Image/RCTImageUtils.mm | 1 + .../react-native/Libraries/Image/RCTResizeMode.h | 5 ++++- .../react-native/Libraries/Image/RCTResizeMode.mm | 1 + .../Libraries/StyleSheet/StyleSheetTypes.d.ts | 2 +- .../Libraries/StyleSheet/StyleSheetTypes.js | 4 ++-- .../rn-tester/js/examples/Image/ImageExample.js | 14 ++++++++++++++ 7 files changed, 31 insertions(+), 5 deletions(-) diff --git a/packages/react-native/Libraries/Image/ImageUtils.js b/packages/react-native/Libraries/Image/ImageUtils.js index 732b5733bc6e..0f6d944280b6 100644 --- a/packages/react-native/Libraries/Image/ImageUtils.js +++ b/packages/react-native/Libraries/Image/ImageUtils.js @@ -8,13 +8,20 @@ * @format */ -type ResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center'; +type ResizeMode = + | 'cover' + | 'contain' + | 'stretch' + | 'repeat' + | 'center' + | 'none'; const objectFitMap: {[string]: ResizeMode} = { contain: 'contain', cover: 'cover', fill: 'stretch', 'scale-down': 'contain', + none: 'none', }; export function convertObjectFitToResizeMode(objectFit: ?string): ?ResizeMode { diff --git a/packages/react-native/Libraries/Image/RCTImageUtils.mm b/packages/react-native/Libraries/Image/RCTImageUtils.mm index 38fbd6bad434..dc24797f0532 100644 --- a/packages/react-native/Libraries/Image/RCTImageUtils.mm +++ b/packages/react-native/Libraries/Image/RCTImageUtils.mm @@ -249,6 +249,7 @@ BOOL RCTUpscalingRequired( case RCTResizeModeRepeat: case RCTResizeModeCenter: + case RCTResizeModeNone: return NO; } diff --git a/packages/react-native/Libraries/Image/RCTResizeMode.h b/packages/react-native/Libraries/Image/RCTResizeMode.h index 148e3dd2fe96..e65f113a0dc1 100644 --- a/packages/react-native/Libraries/Image/RCTResizeMode.h +++ b/packages/react-native/Libraries/Image/RCTResizeMode.h @@ -13,6 +13,7 @@ typedef NS_ENUM(NSInteger, RCTResizeMode) { RCTResizeModeStretch = UIViewContentModeScaleToFill, RCTResizeModeCenter = UIViewContentModeCenter, RCTResizeModeRepeat = -1, // Use negative values to avoid conflicts with iOS enum values. + RCTResizeModeNone = UIViewContentModeTopLeft, }; static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode mode) @@ -30,12 +31,14 @@ static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode case UIViewContentModeCenter: return RCTResizeModeCenter; break; + case UIViewContentModeTopLeft: + return RCTResizeModeNone; + break; case UIViewContentModeRedraw: case UIViewContentModeTop: case UIViewContentModeBottom: case UIViewContentModeLeft: case UIViewContentModeRight: - case UIViewContentModeTopLeft: case UIViewContentModeTopRight: case UIViewContentModeBottomLeft: case UIViewContentModeBottomRight: diff --git a/packages/react-native/Libraries/Image/RCTResizeMode.mm b/packages/react-native/Libraries/Image/RCTResizeMode.mm index c35c32e3fd16..b0f986b45a36 100644 --- a/packages/react-native/Libraries/Image/RCTResizeMode.mm +++ b/packages/react-native/Libraries/Image/RCTResizeMode.mm @@ -17,6 +17,7 @@ @implementation RCTConvert (RCTResizeMode) @"stretch" : @(RCTResizeModeStretch), @"center" : @(RCTResizeModeCenter), @"repeat" : @(RCTResizeModeRepeat), + @"none" : @(RCTResizeModeNone) }), RCTResizeModeStretch, integerValue) diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts index 88f80f23a11f..5235d646bba0 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -562,6 +562,6 @@ export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle { overlayColor?: ColorValue | undefined; tintColor?: ColorValue | undefined; opacity?: AnimatableNumericValue | undefined; - objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined; + objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none' | undefined; cursor?: CursorValue | undefined; } diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index d6902bc8bcd3..624edb86413f 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -942,7 +942,7 @@ export type ____TextStyle_Internal = $ReadOnly<{ export type ____ImageStyle_InternalCore = $ReadOnly<{ ...$Exact<____ViewStyle_Internal>, resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat', - objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down', + objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none', tintColor?: ____ColorValue_Internal, overlayColor?: string, }>; @@ -955,7 +955,7 @@ export type ____ImageStyle_Internal = $ReadOnly<{ export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{ ...$Exact<____TextStyle_Internal>, resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat', - objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down', + objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none', tintColor?: ____ColorValue_Internal, overlayColor?: string, }>; diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 9caf2f276b81..7fd3d21a50d5 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -766,6 +766,9 @@ const styles = StyleSheet.create({ objectFitScaleDown: { objectFit: 'scale-down', }, + objectFitNone: { + objectFit: 'none', + }, imageInBundle: { borderColor: 'yellow', borderWidth: 4, @@ -1391,6 +1394,17 @@ exports.examples = [ /> + + + + None + + + + ); })} From 366e26a1897a928e0004d8a99362826b6ec42a6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Wed, 16 Oct 2024 21:38:49 +0200 Subject: [PATCH 2/7] feat(wip): resize mode 'none' ios props --- packages/react-native/Libraries/Image/Image.d.ts | 2 ++ .../react-native/Libraries/Image/ImageProps.js | 2 +- .../Libraries/Image/ImageResizeMode.d.ts | 9 ++++++++- .../Libraries/Image/ImageResizeMode.js | 5 ++++- .../Libraries/Image/RCTImageUtils.mm | 9 +++++++++ .../rn-tester/js/examples/Image/ImageExample.js | 16 ++++++++++++++-- 6 files changed, 38 insertions(+), 5 deletions(-) diff --git a/packages/react-native/Libraries/Image/Image.d.ts b/packages/react-native/Libraries/Image/Image.d.ts index 9eeb0cbd12fc..ba4fe2e23f2d 100644 --- a/packages/react-native/Libraries/Image/Image.d.ts +++ b/packages/react-native/Libraries/Image/Image.d.ts @@ -190,6 +190,8 @@ export interface ImagePropsBase * 'center': Scale the image down so that it is completely visible, * if bigger than the area of the view. * The image will not be scaled up. + * + * 'none': Do not resize the image. The image will be displayed at its intrinsic size. */ resizeMode?: ImageResizeMode | undefined; diff --git a/packages/react-native/Libraries/Image/ImageProps.js b/packages/react-native/Libraries/Image/ImageProps.js index c0c39075872f..e7df6b662c7c 100644 --- a/packages/react-native/Libraries/Image/ImageProps.js +++ b/packages/react-native/Libraries/Image/ImageProps.js @@ -234,7 +234,7 @@ export type ImageProps = $ReadOnly<{| * * See https://reactnative.dev/docs/image#resizemode */ - resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'), + resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center' | 'none'), /** * A unique identifier for this element to be used in UI Automation diff --git a/packages/react-native/Libraries/Image/ImageResizeMode.d.ts b/packages/react-native/Libraries/Image/ImageResizeMode.d.ts index 84174e3da962..5df952b678de 100644 --- a/packages/react-native/Libraries/Image/ImageResizeMode.d.ts +++ b/packages/react-native/Libraries/Image/ImageResizeMode.d.ts @@ -12,7 +12,8 @@ export type ImageResizeMode = | 'contain' | 'stretch' | 'repeat' - | 'center'; + | 'center' + | 'none'; /** * @see ImageResizeMode.js @@ -46,4 +47,10 @@ export interface ImageResizeModeStatic { * image will keep it's size and aspect ratio. */ repeat: ImageResizeMode; + + /** + * none - The image will be displayed at its intrinsic size, which means the + * image will not be scaled up or down. + */ + none: ImageResizeMode; } diff --git a/packages/react-native/Libraries/Image/ImageResizeMode.js b/packages/react-native/Libraries/Image/ImageResizeMode.js index b63627b793bd..50001ce552c8 100644 --- a/packages/react-native/Libraries/Image/ImageResizeMode.js +++ b/packages/react-native/Libraries/Image/ImageResizeMode.js @@ -33,4 +33,7 @@ export type ImageResizeMode = // Resize by stretching it to fill the entire frame of the view without // clipping. This may change the aspect ratio of the image, distorting it. - | 'stretch'; + | 'stretch' + + // The image will not be resized at all. + | 'none'; diff --git a/packages/react-native/Libraries/Image/RCTImageUtils.mm b/packages/react-native/Libraries/Image/RCTImageUtils.mm index dc24797f0532..6d9568a0524a 100644 --- a/packages/react-native/Libraries/Image/RCTImageUtils.mm +++ b/packages/react-native/Libraries/Image/RCTImageUtils.mm @@ -145,6 +145,14 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, CGFloat destScale, RCTR RCTFloorValue((destSize.height - sourceSize.height) / 2, destScale), }, RCTCeilSize(sourceSize, destScale)}; + case RCTResizeModeNone: + + return (CGRect){ + { + 0, + 0, + }, + RCTCeilSize(sourceSize, destScale)}; } } @@ -167,6 +175,7 @@ CGSize RCTTargetSize( { switch (resizeMode) { case RCTResizeModeCenter: + case RCTResizeModeNone: return RCTTargetRect(sourceSize, destSize, destScale, resizeMode).size; diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 7fd3d21a50d5..59de71edf9d9 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -659,8 +659,8 @@ const styles = StyleSheet.create({ color: 'white', }, resizeMode: { - width: 90, - height: 60, + width: 416, + height: 416, borderWidth: 0.5, borderColor: 'black', }, @@ -1476,6 +1476,18 @@ exports.examples = [ /> + + + + None + + + + ); })} From b58d98b7eed54d44bea5ce703905c6f564ffd0bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Thu, 17 Oct 2024 16:22:25 +0200 Subject: [PATCH 3/7] feat(image): wip resize mode c++ props --- .../react-native/Libraries/Image/RCTImageUtils.mm | 15 ++++++--------- .../react-native/Libraries/Image/RCTResizeMode.h | 6 +++--- .../facebook/react/views/image/ImageResizeMode.kt | 5 ++++- .../react/renderer/components/image/conversions.h | 4 ++++ .../imagemanager/RCTImagePrimitivesConversions.h | 4 ++++ .../react/renderer/imagemanager/primitives.h | 1 + 6 files changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/react-native/Libraries/Image/RCTImageUtils.mm b/packages/react-native/Libraries/Image/RCTImageUtils.mm index 6d9568a0524a..32026ae8496f 100644 --- a/packages/react-native/Libraries/Image/RCTImageUtils.mm +++ b/packages/react-native/Libraries/Image/RCTImageUtils.mm @@ -75,7 +75,7 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, CGFloat destScale, RCTR // Calculate target aspect ratio if needed CGFloat targetAspect = 0.0; - if (resizeMode != RCTResizeModeCenter && resizeMode != RCTResizeModeStretch) { + if (resizeMode != RCTResizeModeCenter && resizeMode != RCTResizeModeStretch && resizeMode != RCTResizeModeNone) { targetAspect = destSize.width / destSize.height; if (aspect == targetAspect) { resizeMode = RCTResizeModeStretch; @@ -146,12 +146,10 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, CGFloat destScale, RCTR }, RCTCeilSize(sourceSize, destScale)}; case RCTResizeModeNone: - + // print something + NSLog(@"Testing RCTResizeModeNone"); return (CGRect){ - { - 0, - 0, - }, + CGPointZero, RCTCeilSize(sourceSize, destScale)}; } } @@ -174,9 +172,8 @@ CGSize RCTTargetSize( BOOL allowUpscaling) { switch (resizeMode) { - case RCTResizeModeCenter: case RCTResizeModeNone: - + case RCTResizeModeCenter: return RCTTargetRect(sourceSize, destSize, destScale, resizeMode).size; case RCTResizeModeStretch: @@ -257,8 +254,8 @@ BOOL RCTUpscalingRequired( } case RCTResizeModeRepeat: - case RCTResizeModeCenter: case RCTResizeModeNone: + case RCTResizeModeCenter: return NO; } diff --git a/packages/react-native/Libraries/Image/RCTResizeMode.h b/packages/react-native/Libraries/Image/RCTResizeMode.h index e65f113a0dc1..3d0b2d323d8b 100644 --- a/packages/react-native/Libraries/Image/RCTResizeMode.h +++ b/packages/react-native/Libraries/Image/RCTResizeMode.h @@ -12,8 +12,8 @@ typedef NS_ENUM(NSInteger, RCTResizeMode) { RCTResizeModeContain = UIViewContentModeScaleAspectFit, RCTResizeModeStretch = UIViewContentModeScaleToFill, RCTResizeModeCenter = UIViewContentModeCenter, + RCTResizeModeNone = UIViewContentModeTopRight, RCTResizeModeRepeat = -1, // Use negative values to avoid conflicts with iOS enum values. - RCTResizeModeNone = UIViewContentModeTopLeft, }; static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode mode) @@ -31,7 +31,7 @@ static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode case UIViewContentModeCenter: return RCTResizeModeCenter; break; - case UIViewContentModeTopLeft: + case UIViewContentModeTopRight: return RCTResizeModeNone; break; case UIViewContentModeRedraw: @@ -39,7 +39,7 @@ static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode case UIViewContentModeBottom: case UIViewContentModeLeft: case UIViewContentModeRight: - case UIViewContentModeTopRight: + case UIViewContentModeTopLeft: case UIViewContentModeBottomLeft: case UIViewContentModeBottomRight: return RCTResizeModeRepeat; diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.kt index 76da29958b11..61098ad9c387 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.kt @@ -19,6 +19,7 @@ public object ImageResizeMode { private const val RESIZE_MODE_STRETCH = "stretch" private const val RESIZE_MODE_CENTER = "center" private const val RESIZE_MODE_REPEAT = "repeat" + private const val RESIZE_MODE_NONE = "none" /** Converts JS resize modes into `ScalingUtils.ScaleType`. See `ImageResizeMode.js`. */ @JvmStatic @@ -30,6 +31,7 @@ public object ImageResizeMode { RESIZE_MODE_CENTER -> return ScalingUtils.ScaleType.CENTER_INSIDE // Handled via a combination of ScaleType and TileMode RESIZE_MODE_REPEAT -> return ScaleTypeStartInside.INSTANCE + RESIZE_MODE_NONE -> return ScaleTypeStartInside.INSTANCE } if (resizeModeValue != null) { @@ -45,7 +47,8 @@ public object ImageResizeMode { if (RESIZE_MODE_CONTAIN == resizeModeValue || RESIZE_MODE_COVER == resizeModeValue || RESIZE_MODE_STRETCH == resizeModeValue || - RESIZE_MODE_CENTER == resizeModeValue) { + RESIZE_MODE_CENTER == resizeModeValue || + RESIZE_MODE_NONE == resizeModeValue) { return TileMode.CLAMP } if (RESIZE_MODE_REPEAT == resizeModeValue) { diff --git a/packages/react-native/ReactCommon/react/renderer/components/image/conversions.h b/packages/react-native/ReactCommon/react/renderer/components/image/conversions.h index 0a76824f588b..2803206c792d 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/image/conversions.h +++ b/packages/react-native/ReactCommon/react/renderer/components/image/conversions.h @@ -148,6 +148,8 @@ inline void fromRawValue( result = ImageResizeMode::Center; } else if (stringValue == "repeat") { result = ImageResizeMode::Repeat; + } else if (stringValue == "none") { + result = ImageResizeMode::None; } else { LOG(ERROR) << "Unsupported ImageResizeMode value: " << stringValue; react_native_expect(false); @@ -168,6 +170,8 @@ inline std::string toString(const ImageResizeMode& value) { return "center"; case ImageResizeMode::Repeat: return "repeat"; + case ImageResizeMode::None: + return "none"; } } diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/react/renderer/imagemanager/RCTImagePrimitivesConversions.h b/packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/react/renderer/imagemanager/RCTImagePrimitivesConversions.h index 88487f94d48c..50194b7a7548 100644 --- a/packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/react/renderer/imagemanager/RCTImagePrimitivesConversions.h +++ b/packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/react/renderer/imagemanager/RCTImagePrimitivesConversions.h @@ -26,6 +26,8 @@ inline static UIViewContentMode RCTContentModeFromImageResizeMode(facebook::reac // Repeat resize mode is handled by the UIImage. Use scale to fill // so the repeated image fills the UIImageView. return UIViewContentModeScaleToFill; + case facebook::react::ImageResizeMode::None: + return UIViewContentModeTopLeft; } } @@ -42,6 +44,8 @@ inline std::string toString(const facebook::react::ImageResizeMode &value) return "center"; case facebook::react::ImageResizeMode::Repeat: return "repeat"; + case facebook::react::ImageResizeMode::None: + return "none"; } } diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/primitives.h b/packages/react-native/ReactCommon/react/renderer/imagemanager/primitives.h index 18aba9e10b53..e8d4be21db45 100644 --- a/packages/react-native/ReactCommon/react/renderer/imagemanager/primitives.h +++ b/packages/react-native/ReactCommon/react/renderer/imagemanager/primitives.h @@ -47,6 +47,7 @@ enum class ImageResizeMode { Stretch, Center, Repeat, + None, }; class ImageErrorInfo { From 57189aa67f4f5162e682d83086dd2e6cf2da01e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Thu, 17 Oct 2024 18:58:38 +0200 Subject: [PATCH 4/7] test(public-api): adjusting resizeMode and objectFit cases --- .../__snapshots__/public-api-test.js.snap | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 57bc4eafb1b9..144400c429c1 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -4872,7 +4872,14 @@ export type ImageProps = $ReadOnly<{| | \\"strict-origin-when-cross-origin\\" | \\"unsafe-url\\" ), - resizeMode?: ?(\\"cover\\" | \\"contain\\" | \\"stretch\\" | \\"repeat\\" | \\"center\\"), + resizeMode?: ?( + | \\"cover\\" + | \\"contain\\" + | \\"stretch\\" + | \\"repeat\\" + | \\"center\\" + | \\"none\\" + ), testID?: ?string, tintColor?: ColorValue, src?: ?string, @@ -4895,7 +4902,8 @@ exports[`public API should not change unintentionally Libraries/Image/ImageResiz | \\"contain\\" | \\"cover\\" | \\"repeat\\" - | \\"stretch\\"; + | \\"stretch\\" + | \\"none\\"; " `; @@ -4992,7 +5000,13 @@ export type { ImageProps } from \\"./ImageProps\\"; `; exports[`public API should not change unintentionally Libraries/Image/ImageUtils.js 1`] = ` -"type ResizeMode = \\"cover\\" | \\"contain\\" | \\"stretch\\" | \\"repeat\\" | \\"center\\"; +"type ResizeMode = + | \\"cover\\" + | \\"contain\\" + | \\"stretch\\" + | \\"repeat\\" + | \\"center\\" + | \\"none\\"; declare export function convertObjectFitToResizeMode( objectFit: ?string ): ?ResizeMode; @@ -8262,7 +8276,7 @@ export type ____TextStyle_Internal = $ReadOnly<{ export type ____ImageStyle_InternalCore = $ReadOnly<{ ...$Exact<____ViewStyle_Internal>, resizeMode?: \\"contain\\" | \\"cover\\" | \\"stretch\\" | \\"center\\" | \\"repeat\\", - objectFit?: \\"cover\\" | \\"contain\\" | \\"fill\\" | \\"scale-down\\", + objectFit?: \\"cover\\" | \\"contain\\" | \\"fill\\" | \\"scale-down\\" | \\"none\\", tintColor?: ____ColorValue_Internal, overlayColor?: string, }>; @@ -8273,7 +8287,7 @@ export type ____ImageStyle_Internal = $ReadOnly<{ export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{ ...$Exact<____TextStyle_Internal>, resizeMode?: \\"contain\\" | \\"cover\\" | \\"stretch\\" | \\"center\\" | \\"repeat\\", - objectFit?: \\"cover\\" | \\"contain\\" | \\"fill\\" | \\"scale-down\\", + objectFit?: \\"cover\\" | \\"contain\\" | \\"fill\\" | \\"scale-down\\" | \\"none\\", tintColor?: ____ColorValue_Internal, overlayColor?: string, }>; From f7842909ebf99208a0d45ccce55707a9db1817da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Thu, 17 Oct 2024 22:42:19 +0200 Subject: [PATCH 5/7] test(image): linting new props --- packages/react-native/Libraries/Image/ImageProps.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/Image/ImageProps.js b/packages/react-native/Libraries/Image/ImageProps.js index e7df6b662c7c..2dce79919382 100644 --- a/packages/react-native/Libraries/Image/ImageProps.js +++ b/packages/react-native/Libraries/Image/ImageProps.js @@ -234,7 +234,14 @@ export type ImageProps = $ReadOnly<{| * * See https://reactnative.dev/docs/image#resizemode */ - resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center' | 'none'), + resizeMode?: ?( + | 'cover' + | 'contain' + | 'stretch' + | 'repeat' + | 'center' + | 'none' + ), /** * A unique identifier for this element to be used in UI Automation From 1e1bad154d96ce05228c763d07a6635ba454557f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Fri, 18 Oct 2024 00:10:48 +0200 Subject: [PATCH 6/7] fix(image): reverting changes for paper and adding android test case --- .../react-native/Libraries/Image/RCTImageUtils.mm | 11 ++--------- packages/react-native/Libraries/Image/RCTResizeMode.h | 5 +---- .../react-native/Libraries/Image/RCTResizeMode.mm | 1 - .../facebook/react/views/image/ImageResizeModeTest.kt | 2 ++ packages/rn-tester/js/examples/Image/ImageExample.js | 4 ++-- 5 files changed, 7 insertions(+), 16 deletions(-) diff --git a/packages/react-native/Libraries/Image/RCTImageUtils.mm b/packages/react-native/Libraries/Image/RCTImageUtils.mm index 32026ae8496f..38fbd6bad434 100644 --- a/packages/react-native/Libraries/Image/RCTImageUtils.mm +++ b/packages/react-native/Libraries/Image/RCTImageUtils.mm @@ -75,7 +75,7 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, CGFloat destScale, RCTR // Calculate target aspect ratio if needed CGFloat targetAspect = 0.0; - if (resizeMode != RCTResizeModeCenter && resizeMode != RCTResizeModeStretch && resizeMode != RCTResizeModeNone) { + if (resizeMode != RCTResizeModeCenter && resizeMode != RCTResizeModeStretch) { targetAspect = destSize.width / destSize.height; if (aspect == targetAspect) { resizeMode = RCTResizeModeStretch; @@ -145,12 +145,6 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, CGFloat destScale, RCTR RCTFloorValue((destSize.height - sourceSize.height) / 2, destScale), }, RCTCeilSize(sourceSize, destScale)}; - case RCTResizeModeNone: - // print something - NSLog(@"Testing RCTResizeModeNone"); - return (CGRect){ - CGPointZero, - RCTCeilSize(sourceSize, destScale)}; } } @@ -172,8 +166,8 @@ CGSize RCTTargetSize( BOOL allowUpscaling) { switch (resizeMode) { - case RCTResizeModeNone: case RCTResizeModeCenter: + return RCTTargetRect(sourceSize, destSize, destScale, resizeMode).size; case RCTResizeModeStretch: @@ -254,7 +248,6 @@ BOOL RCTUpscalingRequired( } case RCTResizeModeRepeat: - case RCTResizeModeNone: case RCTResizeModeCenter: return NO; diff --git a/packages/react-native/Libraries/Image/RCTResizeMode.h b/packages/react-native/Libraries/Image/RCTResizeMode.h index 3d0b2d323d8b..148e3dd2fe96 100644 --- a/packages/react-native/Libraries/Image/RCTResizeMode.h +++ b/packages/react-native/Libraries/Image/RCTResizeMode.h @@ -12,7 +12,6 @@ typedef NS_ENUM(NSInteger, RCTResizeMode) { RCTResizeModeContain = UIViewContentModeScaleAspectFit, RCTResizeModeStretch = UIViewContentModeScaleToFill, RCTResizeModeCenter = UIViewContentModeCenter, - RCTResizeModeNone = UIViewContentModeTopRight, RCTResizeModeRepeat = -1, // Use negative values to avoid conflicts with iOS enum values. }; @@ -31,15 +30,13 @@ static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode case UIViewContentModeCenter: return RCTResizeModeCenter; break; - case UIViewContentModeTopRight: - return RCTResizeModeNone; - break; case UIViewContentModeRedraw: case UIViewContentModeTop: case UIViewContentModeBottom: case UIViewContentModeLeft: case UIViewContentModeRight: case UIViewContentModeTopLeft: + case UIViewContentModeTopRight: case UIViewContentModeBottomLeft: case UIViewContentModeBottomRight: return RCTResizeModeRepeat; diff --git a/packages/react-native/Libraries/Image/RCTResizeMode.mm b/packages/react-native/Libraries/Image/RCTResizeMode.mm index b0f986b45a36..c35c32e3fd16 100644 --- a/packages/react-native/Libraries/Image/RCTResizeMode.mm +++ b/packages/react-native/Libraries/Image/RCTResizeMode.mm @@ -17,7 +17,6 @@ @implementation RCTConvert (RCTResizeMode) @"stretch" : @(RCTResizeModeStretch), @"center" : @(RCTResizeModeCenter), @"repeat" : @(RCTResizeModeRepeat), - @"none" : @(RCTResizeModeNone) }), RCTResizeModeStretch, integerValue) diff --git a/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.kt b/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.kt index 1c6f98d76ec7..c3c589986af9 100644 --- a/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.kt +++ b/packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.kt @@ -28,6 +28,8 @@ class ImageResizeModeTest { .isEqualTo(ScalingUtils.ScaleType.FIT_XY) Assertions.assertThat(ImageResizeMode.toScaleType("center")) .isEqualTo(ScalingUtils.ScaleType.CENTER_INSIDE) + Assertions.assertThat(ImageResizeMode.toScaleType("none")) + .isEqualTo(ScaleTypeStartInside.INSTANCE) // No resizeMode set Assertions.assertThat(ImageResizeMode.defaultValue()) diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 59de71edf9d9..785b8e77e04c 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -659,8 +659,8 @@ const styles = StyleSheet.create({ color: 'white', }, resizeMode: { - width: 416, - height: 416, + width: 90, + height: 60, borderWidth: 0.5, borderColor: 'black', }, From 4af97a86f0fa865e04bf407e711b2853c6bb8ee7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Fri, 18 Oct 2024 22:13:40 +0200 Subject: [PATCH 7/7] feat(image): resizeMode support for 'none' in paper --- packages/react-native/Libraries/Image/RCTImageUtils.mm | 2 ++ packages/react-native/Libraries/Image/RCTResizeMode.h | 5 ++++- packages/react-native/Libraries/Image/RCTResizeMode.mm | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/Image/RCTImageUtils.mm b/packages/react-native/Libraries/Image/RCTImageUtils.mm index 38fbd6bad434..b7f85f83fc33 100644 --- a/packages/react-native/Libraries/Image/RCTImageUtils.mm +++ b/packages/react-native/Libraries/Image/RCTImageUtils.mm @@ -85,6 +85,7 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize, CGFloat destScale, RCTR switch (resizeMode) { case RCTResizeModeStretch: case RCTResizeModeRepeat: + case RCTResizeModeNone: return (CGRect){CGPointZero, RCTCeilSize(destSize, destScale)}; @@ -249,6 +250,7 @@ BOOL RCTUpscalingRequired( case RCTResizeModeRepeat: case RCTResizeModeCenter: + case RCTResizeModeNone: return NO; } diff --git a/packages/react-native/Libraries/Image/RCTResizeMode.h b/packages/react-native/Libraries/Image/RCTResizeMode.h index 148e3dd2fe96..e65f113a0dc1 100644 --- a/packages/react-native/Libraries/Image/RCTResizeMode.h +++ b/packages/react-native/Libraries/Image/RCTResizeMode.h @@ -13,6 +13,7 @@ typedef NS_ENUM(NSInteger, RCTResizeMode) { RCTResizeModeStretch = UIViewContentModeScaleToFill, RCTResizeModeCenter = UIViewContentModeCenter, RCTResizeModeRepeat = -1, // Use negative values to avoid conflicts with iOS enum values. + RCTResizeModeNone = UIViewContentModeTopLeft, }; static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode mode) @@ -30,12 +31,14 @@ static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode case UIViewContentModeCenter: return RCTResizeModeCenter; break; + case UIViewContentModeTopLeft: + return RCTResizeModeNone; + break; case UIViewContentModeRedraw: case UIViewContentModeTop: case UIViewContentModeBottom: case UIViewContentModeLeft: case UIViewContentModeRight: - case UIViewContentModeTopLeft: case UIViewContentModeTopRight: case UIViewContentModeBottomLeft: case UIViewContentModeBottomRight: diff --git a/packages/react-native/Libraries/Image/RCTResizeMode.mm b/packages/react-native/Libraries/Image/RCTResizeMode.mm index c35c32e3fd16..88ea96eb036e 100644 --- a/packages/react-native/Libraries/Image/RCTResizeMode.mm +++ b/packages/react-native/Libraries/Image/RCTResizeMode.mm @@ -17,6 +17,7 @@ @implementation RCTConvert (RCTResizeMode) @"stretch" : @(RCTResizeModeStretch), @"center" : @(RCTResizeModeCenter), @"repeat" : @(RCTResizeModeRepeat), + @"none" : @(RCTResizeModeNone), }), RCTResizeModeStretch, integerValue)