Implement RCTUIImage

Author: Saadnajmi

packages/react-native/React/Base/RCTUIKit.h

@@ -264,7 +264,6 @@ extern "C" {
 
 // UIGraphics.h
 CGContextRef UIGraphicsGetCurrentContext(void);
-CGImageRef UIImageGetCGImageRef(NSImage *image);
 
 #ifdef __cplusplus
 }
@@ -330,28 +329,39 @@ NS_INLINE NSEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat botto
 #define UIApplication NSApplication
 
 // UIImage
-@compatibility_alias UIImage NSImage;
+// RCTUIImage is a subclass of NSImage that caches its CGImage representation.
+// This is needed because NSImage's CGImageForProposedRect: returns a new autoreleased
+// CGImage each time, which causes issues when used with CALayer.contents.
+@interface RCTUIImage : NSImage
+@property (nonatomic, readonly, nullable) CGImageRef CGImage;
+@end
+
+@compatibility_alias UIImage RCTUIImage;
 
 typedef NS_ENUM(NSInteger, UIImageRenderingMode) {
     UIImageRenderingModeAlwaysOriginal,
     UIImageRenderingModeAlwaysTemplate,
 };
 
 #ifdef __cplusplus
-extern "C"
+extern "C" {
 #endif
-CGFloat UIImageGetScale(NSImage *image);
 
-CGImageRef UIImageGetCGImageRef(NSImage *image);
+CGFloat UIImageGetScale(RCTUIImage *image);
+CGImageRef UIImageGetCGImageRef(RCTUIImage *image);
+
+#ifdef __cplusplus
+}
+#endif
 
-NS_INLINE UIImage *UIImageWithContentsOfFile(NSString *filePath)
+NS_INLINE RCTUIImage *UIImageWithContentsOfFile(NSString *filePath)
 {
-  return [[NSImage alloc] initWithContentsOfFile:filePath];
+  return [[RCTUIImage alloc] initWithContentsOfFile:filePath];
 }
 
-NS_INLINE UIImage *UIImageWithData(NSData *imageData)
+NS_INLINE RCTUIImage *UIImageWithData(NSData *imageData)
 {
-  return [[NSImage alloc] initWithData:imageData];
+  return [[RCTUIImage alloc] initWithData:imageData];
 }
 
 NSData *UIImagePNGRepresentation(NSImage *image);
@@ -624,7 +634,7 @@ typedef void (^RCTUIGraphicsImageDrawingActions)(RCTUIGraphicsImageRendererConte
 
 - (instancetype)initWithSize:(CGSize)size;
 - (instancetype)initWithSize:(CGSize)size format:(RCTUIGraphicsImageRendererFormat *)format;
-- (NSImage *)imageWithActions:(NS_NOESCAPE RCTUIGraphicsImageDrawingActions)actions;
+- (RCTUIImage *)imageWithActions:(NS_NOESCAPE RCTUIGraphicsImageDrawingActions)actions;
 
 @end
 NS_ASSUME_NONNULL_END

packages/react-native/React/Base/macOS/RCTUIKit.m

@@ -57,7 +57,7 @@ CGContextRef UIGraphicsGetCurrentContext(void)
 
 // UIImage
 
-CGFloat UIImageGetScale(NSImage *image)
+CGFloat UIImageGetScale(RCTUIImage *image)
 {
   if (image == nil) {
     return 0.0;
@@ -76,9 +76,33 @@ CGFloat UIImageGetScale(NSImage *image)
   return 1.0;
 }
 
-CGImageRef __nullable UIImageGetCGImageRef(NSImage *image)
+// RCTUIImage - NSImage subclass with cached CGImage
+
+@implementation RCTUIImage {
+  CGImageRef _cachedCGImage;
+}
+
+- (void)dealloc {
+  if (_cachedCGImage != NULL) {
+    CGImageRelease(_cachedCGImage);
+  }
+}
+
+- (CGImageRef)CGImage {
+  if (_cachedCGImage == NULL) {
+    CGImageRef cgImage = [self CGImageForProposedRect:NULL context:NULL hints:NULL];
+    if (cgImage != NULL) {
+      _cachedCGImage = CGImageRetain(cgImage);
+    }
+  }
+  return _cachedCGImage;
+}
+
+@end
+
+CGImageRef __nullable UIImageGetCGImageRef(RCTUIImage *image)
 {
-  return [image CGImageForProposedRect:NULL context:NULL hints:NULL];
+  return image.CGImage;
 }
 
 static NSData *NSImageDataForFileType(NSImage *image, NSBitmapImageFileType fileType, NSDictionary<NSString *, id> *properties)
@@ -825,22 +849,54 @@ - (nonnull instancetype)initWithSize:(CGSize)size format:(nonnull RCTUIGraphicsI
     return self;
 }
 
-- (nonnull NSImage *)imageWithActions:(NS_NOESCAPE RCTUIGraphicsImageDrawingActions)actions {
-    NSImage *image = [NSImage imageWithSize:_size
-                                    flipped:YES
-                             drawingHandler:^BOOL(NSRect dstRect) {
-        RCTUIGraphicsImageRendererContext *context = [NSGraphicsContext currentContext];
-        if (self->_format.opaque) {
-            CGContextSetAlpha([context CGContext], 1.0);
-        }
-        actions(context);
-        return YES;
-    }];
+- (nonnull RCTUIImage *)imageWithActions:(NS_NOESCAPE RCTUIGraphicsImageDrawingActions)actions {
+    // Create an RCTUIImage which caches its CGImage for efficient layer.contents usage.
+    // We draw into a bitmap context and create the image from that.
+    
+    CGFloat scale = _format.scale > 0 ? _format.scale : [[NSScreen mainScreen] backingScaleFactor];
+    NSInteger pixelWidth = (NSInteger)(_size.width * scale);
+    NSInteger pixelHeight = (NSInteger)(_size.height * scale);
+    
+    if (pixelWidth <= 0 || pixelHeight <= 0) {
+        return [[RCTUIImage alloc] initWithSize:_size];
+    }
+    
+    // Create a bitmap context
+    NSBitmapImageRep *bitmapRep = [[NSBitmapImageRep alloc]
+        initWithBitmapDataPlanes:NULL
+                      pixelsWide:pixelWidth
+                      pixelsHigh:pixelHeight
+                   bitsPerSample:8
+                 samplesPerPixel:4
+                        hasAlpha:YES
+                        isPlanar:NO
+                  colorSpaceName:NSCalibratedRGBColorSpace
+                     bytesPerRow:0
+                    bitsPerPixel:0];
+    
+    bitmapRep.size = _size;
+    
+    NSGraphicsContext *context = [NSGraphicsContext graphicsContextWithBitmapImageRep:bitmapRep];
+    [NSGraphicsContext saveGraphicsState];
+    [NSGraphicsContext setCurrentContext:context];
+    
+    // Flip the context to match iOS coordinate system (origin at top-left)
+    CGContextRef cgContext = [context CGContext];
+    CGContextTranslateCTM(cgContext, 0, _size.height);
+    CGContextScaleCTM(cgContext, 1.0, -1.0);
+    
+    if (_format.opaque) {
+        CGContextSetAlpha(cgContext, 1.0);
+    }
+    
+    // Execute the drawing actions
+    actions(context);
+    
+    [NSGraphicsContext restoreGraphicsState];
 
-    // Force the image to render immediately by locking focus.
-    // This creates the backing store and makes CGImageForProposedRect work reliably.
-    [image lockFocus];
-    [image unlockFocus];
+    // Create an RCTUIImage from the bitmap representation
+    RCTUIImage *image = [[RCTUIImage alloc] initWithSize:_size];
+    [image addRepresentation:bitmapRep];
 
     return image;
 }

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -48,11 +48,6 @@ @implementation RCTViewComponentView {
   __weak CALayer *_borderLayer;
   CALayer *_outlineLayer;
   CALayer *_boxShadowLayer;
-#if TARGET_OS_OSX // [macOS
-  UIImage *_boxShadowImage; // Strong reference to keep CGImage valid for layer.contents
-  UIImage *_borderImage;    // Strong reference to keep CGImage valid for layer.contents
-  UIImage *_outlineImage;   // Strong reference to keep CGImage valid for layer.contents
-#endif // macOS]
   CALayer *_filterLayer;
   NSMutableArray<CALayer *> *_backgroundImageLayers;
   BOOL _needsInvalidateLayer;
@@ -837,29 +832,16 @@ static RCTCornerRadii RCTCreateOutlineCornerRadiiFromBorderRadii(const BorderRad
 }
 
 // To be used for CSS properties like `border` and `outline`.
-// On macOS, outImage is set to the generated UIImage so the caller can keep a strong reference.
 static void RCTAddContourEffectToLayer(
     CALayer *layer,
     const RCTCornerRadii &cornerRadii,
     const RCTBorderColors &contourColors,
     const UIEdgeInsets &contourInsets,
-    const RCTBorderStyle &contourStyle
-#if TARGET_OS_OSX
-    , UIImage * __strong *outImage // [macOS]
-#endif
-    )
+    const RCTBorderStyle &contourStyle)
 {
   UIImage *image = RCTGetBorderImage(
       contourStyle, layer.bounds.size, cornerRadii, contourInsets, contourColors, [RCTUIColor clearColor], NO); // [macOS]
 
-#if TARGET_OS_OSX // [macOS
-  // Return the image to the caller so they can keep a strong reference.
-  // This prevents the CGImage from being deallocated while the layer uses it.
-  if (outImage) {
-    *outImage = image;
-  }
-#endif // macOS]
-
   if (image == nil) {
     layer.contents = nil;
   } else {
@@ -872,7 +854,9 @@ static void RCTAddContourEffectToLayer(
     layer.contents = (id)image.CGImage;
     layer.contentsScale = image.scale;
 #else // [macOS
-    layer.contents = (__bridge id)UIImageGetCGImageRef(image);
+    // RCTUIImage caches its CGImage, so it stays valid as long as the image is alive.
+    // The image is retained by the layer.contents assignment.
+    layer.contents = (__bridge id)image.CGImage;
     layer.contentsScale = UIImageGetScale(image);
 #endif // macOS]
 
@@ -1206,9 +1190,6 @@ - (void)invalidateLayer
   if (useCoreAnimationBorderRendering) {
     [_borderLayer removeFromSuperlayer];
     _borderLayer = nil;
-#if TARGET_OS_OSX
-    _borderImage = nil; // [macOS] Clear image reference when not using custom border layer
-#endif
 
     layer.borderWidth = (CGFloat)borderMetrics.borderWidths.left;
     RCTUIColor *borderColor = RCTUIColorFromSharedColor(borderMetrics.borderColors.left); // [macOS]
@@ -1243,19 +1224,12 @@ - (void)invalidateLayer
         RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
         borderColors,
         RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths),
-        RCTBorderStyleFromBorderStyle(borderMetrics.borderStyles.left)
-#if TARGET_OS_OSX
-        , &_borderImage // [macOS] Keep strong reference to prevent CGImage deallocation
-#endif
-        );
+        RCTBorderStyleFromBorderStyle(borderMetrics.borderStyles.left));
   }
 
   // outline
   [_outlineLayer removeFromSuperlayer];
   _outlineLayer = nil;
-#if TARGET_OS_OSX
-  _outlineImage = nil; // [macOS] Clear image reference when outline is removed
-#endif
   if (_props->outlineWidth != 0) {
     if (!_outlineLayer) {
       CALayer *outlineLayer = [CALayer new];
@@ -1280,11 +1254,7 @@ - (void)invalidateLayer
           RCTCreateOutlineCornerRadiiFromBorderRadii(borderMetrics.borderRadii, _props->outlineWidth),
           RCTBorderColors{outlineColor, outlineColor, outlineColor, outlineColor},
           UIEdgeInsets{_props->outlineWidth, _props->outlineWidth, _props->outlineWidth, _props->outlineWidth},
-          RCTBorderStyleFromOutlineStyle(_props->outlineStyle)
-#if TARGET_OS_OSX
-          , &_outlineImage // [macOS] Keep strong reference to prevent CGImage deallocation
-#endif
-          );
+          RCTBorderStyleFromOutlineStyle(_props->outlineStyle));
     }
   }
 
@@ -1339,9 +1309,6 @@ - (void)invalidateLayer
   // box shadow
   [_boxShadowLayer removeFromSuperlayer];
   _boxShadowLayer = nil;
-#if TARGET_OS_OSX // [macOS
-  _boxShadowImage = nil;  // Release previous image
-#endif // macOS]
   if (!_props->boxShadow.empty()) {
     _boxShadowLayer = [CALayer layer];
     [self.layer addSublayer:_boxShadowLayer];
@@ -1358,10 +1325,8 @@ - (void)invalidateLayer
 #if !TARGET_OS_OSX // [macOS]
     _boxShadowLayer.contents = (id)boxShadowImage.CGImage;
 #else // [macOS
-    // Keep a strong reference to the NSImage so that the CGImage it provides
-    // (via UIImageGetCGImageRef) remains valid while the layer uses it.
-    _boxShadowImage = boxShadowImage;
-    _boxShadowLayer.contents = (__bridge id)UIImageGetCGImageRef(_boxShadowImage);
+    // RCTUIImage caches its CGImage, so it stays valid as long as the image is alive.
+    _boxShadowLayer.contents = (__bridge id)boxShadowImage.CGImage;
 #endif // macOS]
   }