[Fabric] Add support for image content mode and tint features (microsoft#1828)

* Add RCTUIImageView to RCTUIKit to support iOS features on macOS.

* Add support for tint and resize mode to Image on Fabric.

* Clean up logging and add macOS tag.

* Fix code style to match the style guide.

---------

Co-authored-by: Nick <lefever@meta.com>

Author: lenaic

Libraries/Image/RCTUIImageViewAnimated.h

@@ -8,10 +8,5 @@
 #import <React/RCTAnimatedImage.h>
 #import <React/RCTDefines.h>
 
-#if !TARGET_OS_OSX // [macOS]
-@interface RCTUIImageViewAnimated : UIImageView
-#else // [macOS
-@interface RCTUIImageViewAnimated : NSImageView
-#endif  // macOS]
-
+@interface RCTUIImageViewAnimated : RCTUIImageView // [macOS]
 @end

React/Base/RCTUIKit.h

@@ -581,3 +581,17 @@ typedef UITouch RCTUITouch;
 @interface RCTUITouch : NSEvent
 @end
 #endif
+
+// RCTUIImageView
+
+#if !TARGET_OS_OSX
+typedef UIImageView RCTUIImageView;
+#else
+@interface RCTUIImageView : NSImageView
+NS_ASSUME_NONNULL_BEGIN
+@property (nonatomic, assign) BOOL clipsToBounds;
+@property (nonatomic, strong) RCTUIColor *tintColor;
+@property (nonatomic, assign) UIViewContentMode contentMode;
+NS_ASSUME_NONNULL_END
+@end
+#endif

React/Base/macOS/RCTUIKit.m

@@ -761,4 +761,86 @@ - (void)setHidden:(BOOL)hidden
 
 @end
 
+// RCTUIImageView
+
+@implementation RCTUIImageView
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    [self setLayer:[[CALayer alloc] init]];
+    [self setWantsLayer:YES];
+  }
+  
+  return self;
+}
+
+- (BOOL)clipsToBounds
+{
+  return [[self layer] masksToBounds];
+}
+
+- (void)setClipsToBounds:(BOOL)clipsToBounds
+{
+  [[self layer] setMasksToBounds:clipsToBounds];
+}
+
+- (void)setContentMode:(UIViewContentMode)contentMode
+{
+  _contentMode = contentMode;
+  
+  CALayer *layer = [self layer];
+  switch (contentMode) {
+    case UIViewContentModeScaleAspectFill:
+      [layer setContentsGravity:kCAGravityResizeAspectFill];
+      break;
+      
+    case UIViewContentModeScaleAspectFit:
+      [layer setContentsGravity:kCAGravityResizeAspect];
+      break;
+      
+    case UIViewContentModeScaleToFill:
+      [layer setContentsGravity:kCAGravityResize];
+      break;
+      
+    case UIViewContentModeCenter:
+      [layer setContentsGravity:kCAGravityCenter];
+      break;
+    
+    default:
+      break;
+  }
+}
+
+- (UIImage *)image
+{
+  return [[self layer] contents];
+}
+
+- (void)setImage:(UIImage *)image
+{
+  CALayer *layer = [self layer];
+  
+  if ([layer contents] != image || [layer backgroundColor] != nil) {
+    if (_tintColor != nil) {
+      image = [image copy];
+      [image lockFocus];
+      [_tintColor set];
+      NSRect imageRect = { NSZeroPoint, image.size };
+      NSRectFillUsingOperation(imageRect, NSCompositingOperationSourceIn);
+      [image unlockFocus];
+    }
+    
+    if (image != nil && [image resizingMode] == NSImageResizingModeTile) {
+      [layer setContents:nil];
+      [layer setBackgroundColor:[NSColor colorWithPatternImage:image].CGColor];
+    } else {
+      [layer setContents:image];
+      [layer setBackgroundColor:nil];
+    }
+  }
+}
+
+@end
+
 #endif

React/Fabric/Mounting/ComponentViews/Image/RCTImageComponentView.mm

@@ -31,10 +31,8 @@ - (instancetype)initWithFrame:(CGRect)frame
     _props = defaultProps;
 
     _imageView = [RCTUIImageViewAnimated new];
-#if !TARGET_OS_OSX // [macOS]
     _imageView.clipsToBounds = YES;
     _imageView.contentMode = RCTContentModeFromImageResizeMode(defaultProps->resizeMode);
-#endif // [macOS]
     _imageView.layer.minificationFilter = kCAFilterTrilinear;
     _imageView.layer.magnificationFilter = kCAFilterTrilinear;
 
@@ -58,7 +56,6 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   auto const &oldImageProps = *std::static_pointer_cast<ImageProps const>(_props);
   auto const &newImageProps = *std::static_pointer_cast<ImageProps const>(props);
 
-#if !TARGET_OS_OSX // [macOS]
   // `resizeMode`
   if (oldImageProps.resizeMode != newImageProps.resizeMode) {
     _imageView.contentMode = RCTContentModeFromImageResizeMode(newImageProps.resizeMode);
@@ -68,7 +65,6 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   if (oldImageProps.tintColor != newImageProps.tintColor) {
     _imageView.tintColor = RCTUIColorFromSharedColor(newImageProps.tintColor);
   }
-#endif // [macOS]
 
   [super updateProps:props oldProps:oldProps];
 }
@@ -149,6 +145,11 @@ - (void)didReceiveImage:(UIImage *)image metadata:(id)metadata fromObserver:(voi
     image = [image resizableImageWithCapInsets:RCTUIEdgeInsetsFromEdgeInsets(imageProps.capInsets)
                                   resizingMode:UIImageResizingModeStretch];
   }
+#else
+  if (imageProps.resizeMode == ImageResizeMode::Repeat) {
+    image.capInsets = RCTUIEdgeInsetsFromEdgeInsets(imageProps.capInsets);
+    image.resizingMode = NSImageResizingModeTile;
+  }
 #endif // [macOS]
 
   if (imageProps.blurRadius > __FLT_EPSILON__) {