feat(wip): resize mode 'none' ios props

mateoguzmana · Oct 16, 2024 · 366e26a · 366e26a
1 parent 1514f64
commit 366e26a
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = [
                     />
                   </View>
                 </View>
+                <View style={styles.horizontal}>
+                  <View>
+                    <RNTesterText style={styles.resizeModeText}>
+                      None
+                    </RNTesterText>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode="none"
+                      source={image}
+                    />
+                  </View>
+                </View>
               </View>
             );
           })}