feat: Added objectFit style prop for Image

Libraries/Image/Image.android.js

@@ -22,6 +22,8 @@ import NativeImageLoaderAndroid from './NativeImageLoaderAndroid';
 import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
 
 import type {ImageProps as ImagePropsType} from './ImageProps';
+import type {ImageObjectFit} from './ImageObjectFit';
+import type {ImageResizeMode} from './ImageResizeMode';
 import type {RootTag} from '../Types/RootTagTypes';
 
 let _requestId = 1;
@@ -51,6 +53,21 @@ function getSize(
     );
 }
 
+function getResizeModeEquivalentFromObjectFit(
+  objectFit?: ?ImageObjectFit,
+): ?ImageResizeMode {
+  if (!objectFit) {
+    return null;
+  }
+  const objectFitMappingToResizeMode = {
+    contain: 'contain',
+    cover: 'cover',
+    fill: 'stretch',
+    'scale-down': 'contain',
+  };
+  return objectFitMappingToResizeMode[objectFit] ?? null;
+}
+
 /**
  * Retrieve the width and height (in pixels) of an image prior to displaying it
  * with the ability to provide the headers for the request
@@ -188,6 +205,9 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     ref: forwardedRef,
   };
 
+  const updatedResizeMode =
+    getResizeModeEquivalentFromObjectFit(style?.objectFit) || props.resizeMode;
+
   return (
     <ImageAnalyticsTagContext.Consumer>
       {analyticTag => {
@@ -206,15 +226,20 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
                 return (
                   <TextInlineImageNativeComponent
                     style={style}
-                    resizeMode={props.resizeMode}
+                    resizeMode={updatedResizeMode}
                     headers={nativeProps.headers}
                     src={src}
                     ref={forwardedRef}
                   />
                 );
               }
 
-              return <ImageViewNativeComponent {...nativePropsWithAnalytics} />;
+              return (
+                <ImageViewNativeComponent
+                  resizeMode={updatedResizeMode}
+                  {...nativePropsWithAnalytics}
+                />
+              );
             }}
           </TextAncestor.Consumer>
         );

Libraries/Image/Image.ios.js

@@ -17,6 +17,8 @@ import flattenStyle from '../StyleSheet/flattenStyle';
 import resolveAssetSource from './resolveAssetSource';
 
 import type {ImageProps as ImagePropsType} from './ImageProps';
+import type {ImageObjectFit} from './ImageObjectFit';
+import type {ImageResizeMode} from './ImageResizeMode';
 
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import NativeImageLoaderIOS from './NativeImageLoaderIOS';
@@ -39,6 +41,21 @@ function getSize(
     );
 }
 
+function getResizeModeEquivalentFromObjectFit(
+  objectFit?: ?ImageObjectFit,
+): ?ImageResizeMode {
+  if (!objectFit) {
+    return null;
+  }
+  const objectFitMappingToResizeMode = {
+    contain: 'contain',
+    cover: 'cover',
+    fill: 'stretch',
+    'scale-down': 'contain',
+  };
+  return objectFitMappingToResizeMode[objectFit] ?? null;
+}
+
 function getSizeWithHeaders(
   uri: string,
   headers: {[string]: string, ...},
@@ -128,6 +145,11 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
 
   // $FlowFixMe[prop-missing]
   const resizeMode = props.resizeMode || style.resizeMode || 'cover';
+
+  const updatedResizeMode =
+    // $FlowFixMe[prop-missing]
+    getResizeModeEquivalentFromObjectFit(style?.objectFit) || resizeMode;
+
   // $FlowFixMe[prop-missing]
   const tintColor = style.tintColor;
 
@@ -151,7 +173,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
             {...props}
             ref={forwardedRef}
             style={style}
-            resizeMode={resizeMode}
+            resizeMode={updatedResizeMode}
             tintColor={tintColor}
             source={sources}
             internal_analyticTag={analyticTag}

Libraries/Image/ImageObjectFit.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+'use strict';
+
+/**
+ * ImageObjectFit partially equals to ImageResizeMode, defines valid values for different image resizing modes set
+ * via the `objectFit` style property on `<Image>`.
+ */
+export type ImageObjectFit =
+  // Resize such that the entire area of the view is covered by the image,
+  // potentially clipping parts of the image.
+  | 'cover'
+
+  // 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.
+  | 'fill'
+
+  // Resize such that it will be completely visible, contained within the frame
+  // of the View.
+  | 'scale-down'
+
+  // Resize such that it will be completely visible, contained within the frame
+  // of the View.
+  | 'contain';

Libraries/StyleSheet/StyleSheetTypes.js

@@ -642,6 +642,7 @@ export type ____TextStyle_Internal = $ReadOnly<{
 export type ____ImageStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
   resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+  objectFit?: 'cover' | 'fill' | 'scale-down' | 'contain',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;
@@ -654,6 +655,7 @@ export type ____ImageStyle_Internal = $ReadOnly<{
 export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   ...$Exact<____TextStyle_Internal>,
   resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+  objectFit?: 'cover' | 'fill' | 'scale-down' | 'contain',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -602,6 +602,28 @@ const styles = StyleSheet.create({
     fontSize: 11,
     marginBottom: 3,
   },
+  objectFit: {
+    width: 90,
+    height: 60,
+    borderWidth: 0.5,
+    borderColor: 'black',
+  },
+  objectFitCover: {
+    objectFit: 'cover',
+  },
+  objectFitFill: {
+    objectFit: 'fill',
+  },
+  objectFitScaleDown: {
+    objectFit: 'scale-down',
+  },
+  objectFitContain: {
+    objectFit: 'contain',
+  },
+  objectFitText: {
+    fontSize: 11,
+    marginBottom: 3,
+  },
   icon: {
     width: 15,
     height: 15,
@@ -1046,6 +1068,56 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Object Fit',
+    description:
+      ('The `objectFit` style props that are partially equivalent to resizeMode style prop, controls how the image is ' +
+        'rendered within the frame.': string),
+    render: function (): React.Node {
+      return (
+        <View>
+          {[smallImage, fullImage].map((image, index) => {
+            return (
+              <View key={index}>
+                <View style={styles.horizontal}>
+                  <View>
+                    <Text style={styles.objectFitText}>Cover</Text>
+                    <Image
+                      style={[styles.objectFit, styles.objectFitCover]}
+                      source={image}
+                    />
+                  </View>
+                  <View style={styles.leftMargin}>
+                    <Text style={styles.objectFitText}>Fill</Text>
+                    <Image
+                      style={[styles.objectFit, styles.objectFitFill]}
+                      source={image}
+                    />
+                  </View>
+                </View>
+                <View style={styles.horizontal}>
+                  <View>
+                    <Text style={styles.objectFitText}>Scale Down</Text>
+                    <Image
+                      style={[styles.objectFit, styles.objectFitScaleDown]}
+                      source={image}
+                    />
+                  </View>
+                  <View style={styles.leftMargin}>
+                    <Text style={styles.objectFitText}>Contain</Text>
+                    <Image
+                      style={[styles.objectFit, styles.objectFitContain]}
+                      source={image}
+                    />
+                  </View>
+                </View>
+              </View>
+            );
+          })}
+        </View>
+      );
+    },
+  },
   {
     title: 'Animated GIF',
     render: function (): React.Node {