fix: [email protected]+ (#2531)

# Summary On `react-native-macos` 0.76, `UIGraphicsBeginImageContextWithOptions` and some other UIGraphics directives were removed so the temporary solution is to copy the removed functions here. More details here #2528 and here microsoft/react-native-macos#2209 Closes #2528 ## Test Plan Built the `fabric-macos-example` for with `[email protected]` ## Compatibility | OS | Implemented | | ------- | :---------: | | MacOS | ✅ | ## Checklist - [x] I have tested this on a device and a simulator
software-mansion · Nov 13, 2024 · 1256d56 · 1256d56
1 parent d0530e4
commit 1256d56
Show file tree

Hide file tree

Showing 19 changed files with 2,719 additions and 1,885 deletions.
diff --git a/apple/Elements/RNSVGSvgView.mm b/apple/Elements/RNSVGSvgView.mm
@@ -19,6 +19,10 @@
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 
+#if TARGET_OS_OSX // [macOS
+#import "RNSVGUIKit.h"
+#endif // macOS]
+
 @implementation RNSVGSvgView {
   NSMutableDictionary<NSString *, RNSVGNode *> *_clipPaths;
   NSMutableDictionary<NSString *, RNSVGNode *> *_templates;
@@ -368,7 +372,7 @@ - (NSString *)getDataURLWithBounds:(CGRect)bounds
   UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:bounds.size];
   UIImage *image = [renderer imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
 #else // [macOS
-  UIGraphicsBeginImageContextWithOptions(bounds.size, NO, 1);
+  RNSVGUIGraphicsBeginImageContextWithOptions(bounds.size, NO, 1);
 #endif // macOS]
     [self clearChildCache];
     [self drawRect:bounds];
@@ -381,9 +385,9 @@ - (NSString *)getDataURLWithBounds:(CGRect)bounds
   NSData *imageData = UIImagePNGRepresentation(image);
   NSString *base64 = [imageData base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithLineFeed];
 #else // [macOS
-  NSData *imageData = UIImagePNGRepresentation(UIGraphicsGetImageFromCurrentImageContext());
+  NSData *imageData = UIImagePNGRepresentation(RNSVGUIGraphicsGetImageFromCurrentImageContext());
   NSString *base64 = [imageData base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithLineFeed];
-  UIGraphicsEndImageContext();
+  RNSVGUIGraphicsEndImageContext();
 #endif // macOS]
   return base64;
 }

diff --git a/apple/Filters/RNSVGFilter.mm b/apple/Filters/RNSVGFilter.mm
@@ -11,6 +11,10 @@
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 
+#if TARGET_OS_OSX // [macOS
+#import "RNSVGUIKit.h"
+#endif // macOS]
+
 @implementation RNSVGFilter {
   NSMutableDictionary<NSString *, CIImage *> *resultsMap;
 }
@@ -142,7 +146,7 @@ - (CIImage *)applyFilter:(CIImage *)img
 
 - (CGContext *)openContext:(CGSize)size
 {
-  UIGraphicsBeginImageContextWithOptions(size, NO, 1.0);
+  RNSVGUIGraphicsBeginImageContextWithOptions(size, NO, 1.0);
   CGContextRef cropContext = UIGraphicsGetCurrentContext();
 #if TARGET_OS_OSX
   CGFloat scale = [RNSVGRenderUtils getScreenScale];
@@ -156,7 +160,7 @@ - (CGContext *)openContext:(CGSize)size
 
 - (void)endContext:(CGContext *)context
 {
-  UIGraphicsEndImageContext();
+  RNSVGUIGraphicsEndImageContext();
 }
 
 - (CIImage *)getMaskFromRect:(CGContext *)context rect:(CGRect)rect ctm:(CGAffineTransform)ctm

diff --git a/apple/RNSVGRenderable.mm b/apple/RNSVGRenderable.mm
@@ -406,7 +406,7 @@ - (void)renderTo:(CGContextRef)context rect:(CGRect)rect
       [blendedImage drawInRect:scaledRect];
 #else // [macOS
       // Blend current element and mask
-      UIGraphicsBeginImageContextWithOptions(rect.size, NO, scale);
+      RNSVGUIGraphicsBeginImageContextWithOptions(rect.size, NO, scale);
       CGContextRef newContext = UIGraphicsGetCurrentContext();
 
       CGContextSetBlendMode(newContext, kCGBlendModeCopy);
@@ -415,7 +415,7 @@ - (void)renderTo:(CGContextRef)context rect:(CGRect)rect
       CGContextDrawImage(newContext, rect, contentImage);
 
       CGImageRef blendedImage = CGBitmapContextCreateImage(newContext);
-      UIGraphicsEndImageContext();
+      RNSVGUIGraphicsEndImageContext();
 
       // Invert the CTM and apply transformations to draw image in 1:1
       CGContextConcatCTM(context, CGAffineTransformInvert(currentCTM));

diff --git a/apple/RNSVGRenderableModule.mm b/apple/RNSVGRenderableModule.mm
@@ -155,7 +155,8 @@ @implementation RNSVGRenderableModule
       bounds = CGRectIntersection(bounds, clipBounds);
     }
   }
-  if (CGRectIsNull(bounds)) bounds = CGRectZero;
+  if (CGRectIsNull(bounds))
+    bounds = CGRectZero;
   CGPoint origin = bounds.origin;
   CGSize size = bounds.size;
   return @{@"x" : @(origin.x), @"y" : @(origin.y), @"width" : @(size.width), @"height" : @(size.height)};

diff --git a/apple/RNSVGUIKit.h b/apple/RNSVGUIKit.h
@@ -17,6 +17,10 @@
 #define RNSVGView UIView
 #endif // RCT_NEW_ARCH_ENABLED
 
+#define RNSVGUIGraphicsBeginImageContextWithOptions UIGraphicsBeginImageContextWithOptions
+#define RNSVGUIGraphicsEndImageContext UIGraphicsEndImageContext
+#define RNSVGUIGraphicsGetImageFromCurrentImageContext UIGraphicsGetImageFromCurrentImageContext
+
 #else // TARGET_OS_OSX [
 
 // Due to name mangling, calling c-style functions from .mm files will fail, therefore we need to wrap them with extern
@@ -67,4 +71,11 @@ extern "C" {
 @property (readonly) CGPoint CGPointValue;
 @end
 
+// These functions are copied from react-native-macos to enable compatibility with [email protected]+
+// https://github.com/microsoft/react-native-macos/blob/7361b165ef633d3d95dbdb69da58ff6119f07369/packages/react-native/React/Base/macOS/RCTUIKit.m
+// See https://github.com/software-mansion/react-native-svg/issues/2528
+void RNSVGUIGraphicsBeginImageContextWithOptions(CGSize size, __unused BOOL opaque, CGFloat scale);
+void RNSVGUIGraphicsEndImageContext(void);
+NSImage *RNSVGUIGraphicsGetImageFromCurrentImageContext(void);
+
 #endif // ] TARGET_OS_OSX
diff --git a/apple/RNSVGUIKit.macos.mm b/apple/RNSVGUIKit.macos.mm
@@ -1,4 +1,5 @@
 #import "RNSVGUIKit.h"
+#import <objc/runtime.h>
 
 @implementation RNSVGView {
 }
@@ -57,3 +58,70 @@ - (CGPoint)CGPointValue
 }
 
 @end
+
+static char RCTGraphicsContextSizeKey;
+
+void RNSVGUIGraphicsBeginImageContextWithOptions(CGSize size, __unused BOOL opaque, CGFloat scale)
+{
+  if (scale == 0.0) {
+    // TODO: Assert. We can't assume a display scale on macOS
+    scale = 1.0;
+  }
+
+  size_t width = ceilf(size.width * scale);
+  size_t height = ceilf(size.height * scale);
+
+  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+  CGContextRef ctx = CGBitmapContextCreate(
+      NULL,
+      width,
+      height,
+      8 /*bitsPerComponent*/,
+      width * 4 /*bytesPerRow*/,
+      colorSpace,
+      kCGImageAlphaPremultipliedFirst);
+  CGColorSpaceRelease(colorSpace);
+
+  if (ctx != NULL) {
+    // flip the context (top left at 0, 0) and scale it
+    CGContextTranslateCTM(ctx, 0.0, height);
+    CGContextScaleCTM(ctx, scale, -scale);
+
+    NSGraphicsContext *graphicsContext = [NSGraphicsContext graphicsContextWithCGContext:ctx flipped:YES];
+    objc_setAssociatedObject(
+        graphicsContext, &RCTGraphicsContextSizeKey, [NSValue valueWithSize:size], OBJC_ASSOCIATION_COPY_NONATOMIC);
+
+    [NSGraphicsContext saveGraphicsState];
+    [NSGraphicsContext setCurrentContext:graphicsContext];
+
+    CFRelease(ctx);
+  }
+}
+
+void RNSVGUIGraphicsEndImageContext(void)
+{
+  RCTAssert(
+      objc_getAssociatedObject([NSGraphicsContext currentContext], &RCTGraphicsContextSizeKey),
+      @"The current graphics context is not a React image context!");
+  [NSGraphicsContext restoreGraphicsState];
+}
+
+NSImage *RNSVGUIGraphicsGetImageFromCurrentImageContext(void)
+{
+  NSImage *image = nil;
+  NSGraphicsContext *graphicsContext = [NSGraphicsContext currentContext];
+
+  NSValue *sizeValue = objc_getAssociatedObject(graphicsContext, &RCTGraphicsContextSizeKey);
+  if (sizeValue != nil) {
+    CGImageRef cgImage = CGBitmapContextCreateImage([graphicsContext CGContext]);
+
+    if (cgImage != NULL) {
+      NSBitmapImageRep *imageRep = [[NSBitmapImageRep alloc] initWithCGImage:cgImage];
+      image = [[NSImage alloc] initWithSize:[sizeValue sizeValue]];
+      [image addRepresentation:imageRep];
+      CFRelease(cgImage);
+    }
+  }
+
+  return image;
+}
diff --git a/apple/Utils/RNSVGRenderUtils.mm b/apple/Utils/RNSVGRenderUtils.mm
@@ -37,9 +37,9 @@ + (CGImage *)renderToImage:(RNSVGRenderable *)renderable
 {
   CGFloat scale = [self getScreenScale];
 #if TARGET_OS_OSX // [macOS
-  UIGraphicsBeginImageContextWithOptions(rect.size, NO, 1.0);
+  RNSVGUIGraphicsBeginImageContextWithOptions(rect.size, NO, 1.0);
 #else // macOS]
-  UIGraphicsBeginImageContextWithOptions(rect.size, NO, scale);
+  RNSVGUIGraphicsBeginImageContextWithOptions(rect.size, NO, scale);
 #endif // [macOS]
   CGContextRef cgContext = UIGraphicsGetCurrentContext();
   CGContextConcatCTM(cgContext, CGAffineTransformInvert(CGContextGetCTM(cgContext)));
@@ -53,7 +53,7 @@ + (CGImage *)renderToImage:(RNSVGRenderable *)renderable
   }
   [renderable renderLayerTo:cgContext rect:rect];
   CGImageRef contentImage = CGBitmapContextCreateImage(cgContext);
-  UIGraphicsEndImageContext();
+  RNSVGUIGraphicsEndImageContext();
   return contentImage;
 }
 

diff --git a/apps/fabric-macos-example/.gitignore b/apps/fabric-macos-example/.gitignore
@@ -20,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -56,11 +56,19 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
 # testing
 /coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/apps/fabric-macos-example/Gemfile b/apps/fabric-macos-example/Gemfile
@@ -3,7 +3,7 @@ source 'https://rubygems.org'
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"
 
-# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
-# bound in the template on Cocoapods with next React Native release.
-gem 'cocoapods', '>= 1.13', '< 1.15'
-gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
diff --git a/apps/fabric-macos-example/Gemfile.lock b/apps/fabric-macos-example/Gemfile.lock
@@ -93,8 +93,9 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  activesupport (>= 6.1.7.5, < 7.1.0)
-  cocoapods (>= 1.13, < 1.15)
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+  xcodeproj (< 1.26.0)
 
 RUBY VERSION
    ruby 2.7.6p219

diff --git a/apps/fabric-macos-example/babel.config.js b/apps/fabric-macos-example/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['module:@react-native/babel-preset'],
   plugins: [
     [
       'module-resolver',

diff --git a/apps/fabric-macos-example/macos/FabricMacOSExample-macOS/AppDelegate.mm b/apps/fabric-macos-example/macos/FabricMacOSExample-macOS/AppDelegate.mm
@@ -15,6 +15,11 @@ - (void)applicationDidFinishLaunching:(NSNotification *)notification
 }
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+  return [self bundleURL];
+}
+
+- (NSURL *)bundleURL
 {
 #if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];