feat(image): object-fit none support

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;
 

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'),
+  resizeMode?: ?(
+    | 'cover'
+    | 'contain'
+    | 'stretch'
+    | 'repeat'
+    | 'center'
+    | 'none'
+  ),
 
   /**
    * A unique identifier for this element to be used in UI Automation

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;
 }

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';

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 {

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;
   }

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:

packages/react-native/Libraries/Image/RCTResizeMode.mm

@@ -17,6 +17,7 @@ @implementation RCTConvert (RCTResizeMode)
       @"stretch" : @(RCTResizeModeStretch),
       @"center" : @(RCTResizeModeCenter),
       @"repeat" : @(RCTResizeModeRepeat),
+      @"none" : @(RCTResizeModeNone),
     }),
     RCTResizeModeStretch,
     integerValue)

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;
 }

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,
 }>;

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,
 }>;

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) {

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())

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";
   }
 }
 

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";
   }
 }
 

packages/react-native/ReactCommon/react/renderer/imagemanager/primitives.h

@@ -47,6 +47,7 @@ enum class ImageResizeMode {
   Stretch,
   Center,
   Repeat,
+  None,
 };
 
 class ImageErrorInfo {

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 = [
                     />
                   </View>
                 </View>
+                <View style={styles.horizontal}>
+                  <View>
+                    <RNTesterText style={styles.resizeModeText}>
+                      None
+                    </RNTesterText>
+                    <Image
+                      style={[styles.resizeMode, styles.objectFitNone]}
+                      source={image}
+                    />
+                  </View>
+                </View>
               </View>
             );
           })}
@@ -1462,6 +1476,18 @@ exports.examples = [
                     />
                   </View>
                 </View>
+                <View style={styles.horizontal}>
+                  <View>
+                    <RNTesterText style={styles.resizeModeText}>
+                      None
+                    </RNTesterText>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode="none"
+                      source={image}
+                    />
+                  </View>
+                </View>
               </View>
             );
           })}