feat(image): wip resize mode c++ props

Author: mateoguzmana

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

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,15 +31,15 @@ static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode
     case UIViewContentModeCenter:
       return RCTResizeModeCenter;
       break;
-    case UIViewContentModeTopLeft:
+    case UIViewContentModeTopRight:
       return RCTResizeModeNone;
       break;
     case UIViewContentModeRedraw:
     case UIViewContentModeTop:
     case UIViewContentModeBottom:
     case UIViewContentModeLeft:
     case UIViewContentModeRight:
-    case UIViewContentModeTopRight:
+    case UIViewContentModeTopLeft:
     case UIViewContentModeBottomLeft:
     case UIViewContentModeBottomRight:
       return RCTResizeModeRepeat;

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