fix: react-native-macos@0.76+ (#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 https://github.com/software-mansion/react-native-svg/issues/2528
and here https://github.com/microsoft/react-native-macos/pull/2209

Closes #2528

## Test Plan

Built the `fabric-macos-example` for with `react-native-macos@0.76.0`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| MacOS   |    ✅      |

## Checklist

- [x] I have tested this on a device and a simulator

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 @@ using namespace facebook::react;
   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 @@ using namespace facebook::react;
   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;
 }

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 @@ using namespace facebook::react;
 
 - (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 @@ using namespace facebook::react;
 
 - (void)endContext:(CGContext *)context
 {
-  UIGraphicsEndImageContext();
+  RNSVGUIGraphicsEndImageContext();
 }
 
 - (CIImage *)getMaskFromRect:(CGContext *)context rect:(CGRect)rect ctm:(CGAffineTransform)ctm

apple/RNSVGRenderable.mm

@@ -406,7 +406,7 @@ UInt32 saturate(CGFloat value)
       [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 @@ UInt32 saturate(CGFloat value)
       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));

apple/RNSVGRenderableModule.mm

@@ -155,7 +155,8 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getBBox : (nonnull NSNumber *)reactTag op
       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)};

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 react-native-macos@0.76+
+// 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

apple/RNSVGUIKit.macos.mm

@@ -1,4 +1,5 @@
 #import "RNSVGUIKit.h"
+#import <objc/runtime.h>
 
 @implementation RNSVGView {
 }
@@ -57,3 +58,70 @@
 }
 
 @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;
+}

apple/Utils/RNSVGRenderUtils.mm

@@ -37,9 +37,9 @@
 {
   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 @@
   }
   [renderable renderLayerTo:cgContext rect:rect];
   CGImageRef contentImage = CGBitmapContextCreateImage(cgContext);
-  UIGraphicsEndImageContext();
+  RNSVGUIGraphicsEndImageContext();
   return contentImage;
 }
 

apps/fabric-macos-example/.gitignore

@@ -20,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -56,7 +56,7 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
@@ -64,3 +64,11 @@ yarn-error.log
 
 # testing
 /coverage
+ 
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

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
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
-# bound in the template on Cocoapods with next React Native release.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
-gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
-gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'
+gem 'xcodeproj', '< 1.26.0'

apps/fabric-macos-example/Gemfile.lock

@@ -93,8 +93,9 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  activesupport (>= 6.1.7.5, < 7.1.0)
+  activesupport (>= 6.1.7.5, != 7.1.0)
-  cocoapods (>= 1.13, < 1.15)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+  xcodeproj (< 1.26.0)
 
 RUBY VERSION
    ruby 2.7.6p219

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',

apps/fabric-macos-example/macos/FabricMacOSExample-macOS/AppDelegate.mm

@@ -15,6 +15,11 @@
 }
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+  return [self bundleURL];
+}
+
+- (NSURL *)bundleURL
 {
 #if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];

apps/fabric-macos-example/macos/FabricMacOSExample.xcodeproj/project.pbxproj

@@ -7,14 +7,18 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		0BADD780AB7E6F1B127032BA /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 65EACEEA33179874AA79EA13 /* PrivacyInfo.xcprivacy */; };
 		5142014D2437B4B30078DB4F /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 5142014C2437B4B30078DB4F /* AppDelegate.mm */; };
 		514201522437B4B40078DB4F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 514201512437B4B40078DB4F /* Assets.xcassets */; };
 		514201552437B4B40078DB4F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 514201532437B4B40078DB4F /* Main.storyboard */; };
 		514201582437B4B40078DB4F /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 514201572437B4B40078DB4F /* main.m */; };
-		73955321424971531B6F728B /* libPods-FabricMacOSExample-macOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 84BBADF0F14F81609C966534 /* libPods-FabricMacOSExample-macOS.a */; };
+		76B8FC57EBC9F207F23DDEC6 /* libPods-FabricMacOSExample-macOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 09FEA0DF38593291EA786DB3 /* libPods-FabricMacOSExample-macOS.a */; };
+		8C9D3995C4FF4A43AEF4F4AA /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 65EACEEA33179874AA79EA13 /* PrivacyInfo.xcprivacy */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
+		089F9C82C9160C21C567BBC0 /* Pods-FabricMacOSExample-macOS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-FabricMacOSExample-macOS.debug.xcconfig"; path = "Target Support Files/Pods-FabricMacOSExample-macOS/Pods-FabricMacOSExample-macOS.debug.xcconfig"; sourceTree = "<group>"; };
+		09FEA0DF38593291EA786DB3 /* libPods-FabricMacOSExample-macOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-FabricMacOSExample-macOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07F961A680F5B00A75B9A /* FabricMacOSExample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = FabricMacOSExample.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		514201492437B4B30078DB4F /* FabricMacOSExample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = FabricMacOSExample.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		5142014B2437B4B30078DB4F /* AppDelegate.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
@@ -24,9 +28,8 @@
 		514201562437B4B40078DB4F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		514201572437B4B40078DB4F /* main.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
 		514201592437B4B40078DB4F /* FabricMacOSExample.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = FabricMacOSExample.entitlements; sourceTree = "<group>"; };
-		5D21ACD81E060C326567B8C1 /* Pods-FabricMacOSExample-macOS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-FabricMacOSExample-macOS.debug.xcconfig"; path = "Target Support Files/Pods-FabricMacOSExample-macOS/Pods-FabricMacOSExample-macOS.debug.xcconfig"; sourceTree = "<group>"; };
+		65EACEEA33179874AA79EA13 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; path = PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
-		84BBADF0F14F81609C966534 /* libPods-FabricMacOSExample-macOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-FabricMacOSExample-macOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		8613B15A55ABB0C7484317A1 /* Pods-FabricMacOSExample-macOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-FabricMacOSExample-macOS.release.xcconfig"; path = "Target Support Files/Pods-FabricMacOSExample-macOS/Pods-FabricMacOSExample-macOS.release.xcconfig"; sourceTree = "<group>"; };
-		C5CBBF555D36B28572B0751B /* Pods-FabricMacOSExample-macOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-FabricMacOSExample-macOS.release.xcconfig"; path = "Target Support Files/Pods-FabricMacOSExample-macOS/Pods-FabricMacOSExample-macOS.release.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 /* End PBXFileReference section */
 
@@ -42,28 +45,18 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				73955321424971531B6F728B /* libPods-FabricMacOSExample-macOS.a in Frameworks */,
+				76B8FC57EBC9F207F23DDEC6 /* libPods-FabricMacOSExample-macOS.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
-		18B70681D0CA1D4B14ED1E93 /* Pods */ = {
-			isa = PBXGroup;
-			children = (
-				5D21ACD81E060C326567B8C1 /* Pods-FabricMacOSExample-macOS.debug.xcconfig */,
-				C5CBBF555D36B28572B0751B /* Pods-FabricMacOSExample-macOS.release.xcconfig */,
-			);
-			name = Pods;
-			path = Pods;
-			sourceTree = "<group>";
-		};
 		2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
 				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
-				84BBADF0F14F81609C966534 /* libPods-FabricMacOSExample-macOS.a */,
+				09FEA0DF38593291EA786DB3 /* libPods-FabricMacOSExample-macOS.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -96,7 +89,8 @@
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
-				18B70681D0CA1D4B14ED1E93 /* Pods */,
+				65EACEEA33179874AA79EA13 /* PrivacyInfo.xcprivacy */,
+				F2ABBEFCFF6F8172C359F8A2 /* Pods */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -112,6 +106,16 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		F2ABBEFCFF6F8172C359F8A2 /* Pods */ = {
+			isa = PBXGroup;
+			children = (
+				089F9C82C9160C21C567BBC0 /* Pods-FabricMacOSExample-macOS.debug.xcconfig */,
+				8613B15A55ABB0C7484317A1 /* Pods-FabricMacOSExample-macOS.release.xcconfig */,
+			);
+			name = Pods;
+			path = Pods;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -137,12 +141,12 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 5142015A2437B4B40078DB4F /* Build configuration list for PBXNativeTarget "FabricMacOSExample-macOS" */;
 			buildPhases = (
-				195FDA46B1D9819D89F31625 /* [CP] Check Pods Manifest.lock */,
+				1A938104A937498D81B3BD3B /* [CP] Check Pods Manifest.lock */,
 				514201452437B4B30078DB4F /* Sources */,
 				514201462437B4B30078DB4F /* Frameworks */,
 				514201472437B4B30078DB4F /* Resources */,
 				381D8A6E24576A4E00465D17 /* Bundle React Native code and images */,
-				4D1F23D0B5835399273FDFA8 /* [CP] Copy Pods Resources */,
+				53D55339FB179BA6C00627F7 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -194,6 +198,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				8C9D3995C4FF4A43AEF4F4AA /* PrivacyInfo.xcprivacy in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -203,6 +208,7 @@
 			files = (
 				514201522437B4B40078DB4F /* Assets.xcassets in Resources */,
 				514201552437B4B40078DB4F /* Main.storyboard in Resources */,
+				0BADD780AB7E6F1B127032BA /* PrivacyInfo.xcprivacy in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -223,7 +229,7 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native-macos/scripts/react-native-xcode.sh\n";
 		};
-		195FDA46B1D9819D89F31625 /* [CP] Check Pods Manifest.lock */ = {
+		1A938104A937498D81B3BD3B /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -263,22 +269,30 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native-macos/scripts/react-native-xcode.sh\n";
 		};
-		4D1F23D0B5835399273FDFA8 /* [CP] Copy Pods Resources */ = {
+		53D55339FB179BA6C00627F7 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-FabricMacOSExample-macOS/Pods-FabricMacOSExample-macOS-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNCAsyncStorage/RNCAsyncStorage_resources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNSVG/RNSVGFilters.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCAsyncStorage_resources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNSVGFilters.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -362,7 +376,7 @@
 		};
 		5142015B2437B4B40078DB4F /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 5D21ACD81E060C326567B8C1 /* Pods-FabricMacOSExample-macOS.debug.xcconfig */;
+			baseConfigurationReference = 089F9C82C9160C21C567BBC0 /* Pods-FabricMacOSExample-macOS.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
@@ -370,7 +384,7 @@
 				DEAD_CODE_STRIPPING = NO;
 				INFOPLIST_FILE = "FabricMacOSExample-macos/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MACOSX_DEPLOYMENT_TARGET = 10.15;
+				MACOSX_DEPLOYMENT_TARGET = 11.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -386,14 +400,14 @@
 		};
 		5142015C2437B4B40078DB4F /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = C5CBBF555D36B28572B0751B /* Pods-FabricMacOSExample-macOS.release.xcconfig */;
+			baseConfigurationReference = 8613B15A55ABB0C7484317A1 /* Pods-FabricMacOSExample-macOS.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
 				INFOPLIST_FILE = "FabricMacOSExample-macos/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MACOSX_DEPLOYMENT_TARGET = 10.15;
+				MACOSX_DEPLOYMENT_TARGET = 11.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -438,7 +452,6 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -463,20 +476,13 @@
 				);
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
-				OTHER_CFLAGS = (
-					"$(inherited)",
-					"-DRN_FABRIC_ENABLED",
-				);
-				OTHER_CPLUSPLUSFLAGS = (
-					"$(inherited)",
-					"-DRN_FABRIC_ENABLED",
-				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					" ",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
 				USE_HERMES = false;
 			};
 			name = Debug;
@@ -513,7 +519,6 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -530,14 +535,6 @@
 					"\"$(inherited)\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = NO;
-				OTHER_CFLAGS = (
-					"$(inherited)",
-					"-DRN_FABRIC_ENABLED",
-				);
-				OTHER_CPLUSPLUSFLAGS = (
-					"$(inherited)",
-					"-DRN_FABRIC_ENABLED",
-				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					" ",

apps/fabric-macos-example/macos/Podfile

@@ -6,7 +6,7 @@ ENV['RCT_NEW_ARCH_ENABLED'] = '1'
 prepare_react_native_project!
 
 target 'FabricMacOSExample-macOS' do
-  platform :macos, '10.15'
+  platform :macos, '11.0'
   use_native_modules!
 
   # Flags change depending on the env values.
@@ -15,9 +15,7 @@ target 'FabricMacOSExample-macOS' do
   use_react_native!(
     :path => '../node_modules/react-native-macos',
     :hermes_enabled => false,
-    :fabric_enabled => true,
+    :fabric_enabled => ENV['RCT_NEW_ARCH_ENABLED'] == '1',
-    # Flipper is not compatible w/ macOS
-    :flipper_configuration => FlipperConfiguration.disabled,
     # An absolute path to your application root.
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )

apps/fabric-macos-example/metro.config.js

@@ -1,6 +1,6 @@
 /**
  * Metro configuration for React Native
- * https://github.com/facebook/react-native
+ * https://reactnative.dev/docs/metro
  *
  * @format
  */

apps/fabric-macos-example/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "macos": "react-native run-macos",
+    "macos": "@react-native-community/cli run-macos",
     "lint": "eslint .",
     "start": "react-native start",
     "test": "jest",
@@ -14,32 +14,32 @@
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
     "@react-navigation/stack": "^6.4.1",
-    "react": "18.2.0",
+    "react": "18.3.1",
-    "react-native": "0.73.4",
+    "react-native": "0.76.1",
     "react-native-gesture-handler": "https://github.com/software-mansion/react-native-gesture-handler",
-    "react-native-macos": "^0.73.0-0",
+    "react-native-macos": "^0.76.0",
-    "react-native-reanimated": "3.9.0",
+    "react-native-reanimated": "^3.16.1",
     "react-native-svg": "link:../../"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.20.0",
+    "@babel/preset-env": "^7.25.3",
-    "@babel/runtime": "^7.20.0",
+    "@babel/runtime": "^7.25.0",
-    "@react-native-community/eslint-config": "^3.0.0",
+    "@react-native-community/cli": "15.0.0",
-    "@react-native/babel-preset": "0.73.21",
+    "@react-native-community/cli-platform-android": "15.0.0",
-    "@react-native/eslint-config": "0.73.2",
+    "@react-native-community/cli-platform-ios": "15.0.0",
-    "@react-native/metro-config": "^0.74.84",
+    "@react-native/babel-preset": "0.76.1",
-    "@react-native/typescript-config": "0.73.1",
+    "@react-native/eslint-config": "0.76.1",
-    "@tsconfig/react-native": "^2.0.2",
+    "@react-native/metro-config": "0.76.1",
+    "@react-native/typescript-config": "0.76.1",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
-    "metro-react-native-babel-preset": "0.73.5",
     "patch-package": "^8.0.0",
     "prettier": "2.8.8",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "typescript": "5.0.4"
   },
   "engines": {

apps/fabric-macos-example/patches/react-native-reanimated+3.9.0.patch

@@ -1,132 +0,0 @@
-diff --git a/node_modules/react-native-reanimated/Common/cpp/NativeModules/NativeReanimatedModule.cpp b/node_modules/react-native-reanimated/Common/cpp/NativeModules/NativeReanimatedModule.cpp
-index a1ace04..58d0303 100644
---- a/node_modules/react-native-reanimated/Common/cpp/NativeModules/NativeReanimatedModule.cpp
-+++ b/node_modules/react-native-reanimated/Common/cpp/NativeModules/NativeReanimatedModule.cpp
-@@ -37,11 +37,6 @@
- 
- using namespace facebook;
- 
--#if REACT_NATIVE_MINOR_VERSION == 73 && defined(RCT_NEW_ARCH_ENABLED)
--// Android can't find the definition of this static field
--bool CoreFeatures::useNativeState;
--#endif
--
- namespace reanimated {
- 
- NativeReanimatedModule::NativeReanimatedModule(
-diff --git a/node_modules/react-native-reanimated/Common/cpp/SharedItems/Shareables.cpp b/node_modules/react-native-reanimated/Common/cpp/SharedItems/Shareables.cpp
-index a0e002b..761cc03 100644
---- a/node_modules/react-native-reanimated/Common/cpp/SharedItems/Shareables.cpp
-+++ b/node_modules/react-native-reanimated/Common/cpp/SharedItems/Shareables.cpp
-@@ -78,10 +78,22 @@ jsi::Value makeShareableClone(
-     } else {
-       if (shouldRetainRemote.isBool() && shouldRetainRemote.getBool()) {
-         shareable = std::make_shared<RetainingShareable<ShareableObject>>(
--            rt, object, nativeStateSource);
-+            rt,
-+            object
-+#if SUPPORTS_NATIVE_STATE
-+            ,
-+            nativeStateSource
-+#endif // SUPPORTS_NATIVE_STATE
-+        );
-       } else {
--        shareable =
--            std::make_shared<ShareableObject>(rt, object, nativeStateSource);
-+        shareable = std::make_shared<ShareableObject>(
-+            rt,
-+            object
-+#if SUPPORTS_NATIVE_STATE
-+            ,
-+            nativeStateSource
-+#endif // SUPPORTS_NATIVE_STATE
-+        );
-       }
-     }
-   } else if (value.isString()) {
-@@ -200,13 +212,16 @@ ShareableObject::ShareableObject(jsi::Runtime &rt, const jsi::Object &object)
-     auto value = extractShareableOrThrow(rt, object.getProperty(rt, key));
-     data_.emplace_back(key.utf8(rt), value);
-   }
-+#if SUPPORTS_NATIVE_STATE
- #if REACT_NATIVE_MINOR_VERSION >= 71
-   if (object.hasNativeState(rt)) {
-     nativeState_ = object.getNativeState(rt);
-   }
- #endif
-+#endif // SUPPORTS_NATIVE_STATE
- }
- 
-+#if SUPPORTS_NATIVE_STATE
- ShareableObject::ShareableObject(
-     jsi::Runtime &rt,
-     const jsi::Object &object,
-@@ -219,18 +234,20 @@ ShareableObject::ShareableObject(
-   }
- #endif
- }
-+#endif // SUPPORTS_NATIVE_STATE
- 
- jsi::Value ShareableObject::toJSValue(jsi::Runtime &rt) {
-   auto obj = jsi::Object(rt);
-   for (size_t i = 0, size = data_.size(); i < size; i++) {
--    obj.setProperty(
--        rt, data_[i].first.c_str(), data_[i].second->getJSValue(rt));
-+    obj.setProperty(rt, data_[i].first.c_str(), data_[i].second->toJSValue(rt));
-   }
-+#if SUPPORTS_NATIVE_STATE
- #if REACT_NATIVE_MINOR_VERSION >= 71
-   if (nativeState_ != nullptr) {
-     obj.setNativeState(rt, nativeState_);
-   }
- #endif
-+#endif // SUPPORTS_NATIVE_STATE
-   return obj;
- }
- 
-diff --git a/node_modules/react-native-reanimated/Common/cpp/SharedItems/Shareables.h b/node_modules/react-native-reanimated/Common/cpp/SharedItems/Shareables.h
-index e61bc58..52c7a9e 100644
---- a/node_modules/react-native-reanimated/Common/cpp/SharedItems/Shareables.h
-+++ b/node_modules/react-native-reanimated/Common/cpp/SharedItems/Shareables.h
-@@ -62,11 +62,9 @@ inline void cleanupIfRuntimeExists(
- }
- 
- class Shareable {
-- protected:
--  virtual jsi::Value toJSValue(jsi::Runtime &rt) = 0;
--
-  public:
-   virtual ~Shareable();
-+  virtual jsi::Value toJSValue(jsi::Runtime &rt) = 0;
- 
-   enum ValueType {
-     UndefinedType,
-@@ -183,18 +181,28 @@ class ShareableObject : public Shareable {
-  public:
-   ShareableObject(jsi::Runtime &rt, const jsi::Object &object);
- 
-+#if defined(USE_HERMES) || REACT_NATIVE_MINOR_VERSION >= 74
-+#define SUPPORTS_NATIVE_STATE 1
-+#else
-+#define SUPPORTS_NATIVE_STATE 0
-+#endif
-+
-+#if SUPPORTS_NATIVE_STATE
-   ShareableObject(
-       jsi::Runtime &rt,
-       const jsi::Object &object,
-       const jsi::Value &nativeStateSource);
-+#endif // SUPPORTS_NATIVE_STATE
- 
-   jsi::Value toJSValue(jsi::Runtime &rt) override;
- 
-  protected:
-   std::vector<std::pair<std::string, std::shared_ptr<Shareable>>> data_;
-+#if SUPPORTS_NATIVE_STATE
- #if REACT_NATIVE_MINOR_VERSION >= 71
-   std::shared_ptr<jsi::NativeState> nativeState_;
- #endif
-+#endif // SUPPORTS_NATIVE_STATE
- };
- 
- class ShareableHostObject : public Shareable {