fix(🍏): map iOS font names more closely to what React Native does (#3603)

Author: wcandillon

apps/example/src/Examples/API/FontMgr.tsx

@@ -35,9 +35,9 @@ export const FontMgr = () => {
     .fill(0)
     .map((_, i) => customFontMgr.getFamilyName(i));
   const titleFont = matchFont({
-    fontFamily: "Helvetica",
+    fontFamily: "System",
     fontSize: titleFontSize,
-    fontWeight: "bold",
+    fontWeight: "normal",
   });
   const subtitleFont = matchFont();
   return (

packages/skia/apple/RNSkApplePlatformContext.h

@@ -75,6 +75,8 @@ class RNSkApplePlatformContext : public RNSkPlatformContext {
 
   std::vector<std::string> getSystemFontFamilies() override;
 
+  std::string resolveFontFamily(const std::string &familyName) override;
+
 private:
   ViewScreenshotService *_screenshotService;
 

packages/skia/apple/RNSkApplePlatformContext.mm

@@ -346,6 +346,29 @@
   return families;
 }
 
+std::string
+RNSkApplePlatformContext::resolveFontFamily(const std::string &familyName) {
+  // Handle special font family names like React Native does
+  // See: RCTFont.mm in React Native
+  if (familyName == "System" || familyName == "system" ||
+      familyName == "sans-serif") {
+    return ".AppleSystemUIFont";
+  }
+  if (familyName == "SystemCondensed" || familyName == "system-condensed") {
+    // Return system font - condensed trait is handled via font style
+    return ".AppleSystemUIFont";
+  }
+  // CSS generic font families
+  if (familyName == "serif") {
+    return "Times New Roman";
+  }
+  if (familyName == "monospace") {
+    return "Courier New";
+  }
+  // Return as-is if no mapping exists
+  return familyName;
+}
+
 void RNSkApplePlatformContext::runOnMainThread(std::function<void()> func) {
   dispatch_async(dispatch_get_main_queue(), ^{
     func();

packages/skia/cpp/api/JsiSkFontMgr.h

@@ -48,17 +48,21 @@ class JsiSkFontMgr : public JsiSkWrappingSkPtrHostObject<SkFontMgr> {
       return jsi::String::createFromUtf8(runtime,
                                          _systemFontFamilies[systemIndex]);
     }
-    throw jsi::JSError(runtime, "Font family index out of bounds: " +
-                                    std::to_string(i) + " (total families: " +
-                                    std::to_string(baseFamilyCount +
-                                                   _systemFontFamilies.size()) +
-                                    ")");
+    throw jsi::JSError(
+        runtime,
+        "Font family index out of bounds: " + std::to_string(i) +
+            " (total families: " +
+            std::to_string(baseFamilyCount + _systemFontFamilies.size()) + ")");
   }
 
   JSI_HOST_FUNCTION(matchFamilyStyle) {
     auto name = arguments[0].asString(runtime).utf8(runtime);
+    // Resolve font family aliases (e.g., "System" -> ".AppleSystemUIFont" on
+    // iOS)
+    auto resolvedName = getContext()->resolveFontFamily(name);
     auto fontStyle = JsiSkFontStyle::fromValue(runtime, arguments[1]);
-    auto typeface = getObject()->matchFamilyStyle(name.c_str(), *fontStyle);
+    auto typeface =
+        getObject()->matchFamilyStyle(resolvedName.c_str(), *fontStyle);
     auto hostObjectInstance =
         std::make_shared<JsiSkTypeface>(getContext(), std::move(typeface));
     return JSI_CREATE_HOST_OBJECT_WITH_MEMORY_PRESSURE(

packages/skia/cpp/rnskia/RNSkPlatformContext.h

@@ -152,6 +152,15 @@ class RNSkPlatformContext {
    */
   virtual std::vector<std::string> getSystemFontFamilies() { return {}; }
 
+  /**
+   * Resolve font family aliases to actual font family names.
+   * For example, "System" on iOS resolves to ".AppleSystemUIFont".
+   * Returns the input unchanged if no mapping exists.
+   */
+  virtual std::string resolveFontFamily(const std::string &familyName) {
+    return familyName;
+  }
+
   /**
    * Creates an skImage containing the screenshot of a native view and its
    * children.

packages/skia/src/renderer/__tests__/FitBox.spec.tsx

@@ -667,7 +667,6 @@ describe("FitBox", () => {
       const { Skia } = importSkia();
       const path = Skia.Path.MakeFromSVGString(skiaLogo)!;
       const bounds = path.computeTightBounds();
-      console.log(bounds.x, bounds.y, bounds.width, bounds.height);
       expect(bounds.x).toBeCloseTo(324, 2);
       expect(bounds.y).toBeCloseTo(222, 2);
       expect(bounds.width).toBeCloseTo(631.09, 2);

packages/skia/src/renderer/__tests__/e2e/AnimatedImages.spec.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { checkImage } from "../../../__tests__/setup";
+import { checkImage, itRunsE2eOnly } from "../../../__tests__/setup";
 import { Image } from "../../components";
 import { BirdGIF, importSkia, surface } from "../setup";
 
@@ -27,7 +27,7 @@ describe("Animated Images", () => {
     });
     expect(result).toEqual(true);
   });
-  it("should decode gifs (2)", async () => {
+  itRunsE2eOnly("should decode gifs (2)", async () => {
     const result = await surface.eval((Skia) => {
       const data = Skia.Data.fromBase64(
         "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="

packages/skia/src/renderer/__tests__/e2e/DataEncoding.spec.tsx

@@ -1,7 +1,8 @@
+import { itRunsE2eOnly } from "../../../__tests__/setup";
 import { surface } from "../setup";
 
 describe("Data Encoding", () => {
-  it("encodeToBytes() from CPU image", async () => {
+  itRunsE2eOnly("encodeToBytes() from CPU image", async () => {
     const result = await surface.eval((Skia) => {
       const data = Skia.Data.fromBase64(
         "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
@@ -20,7 +21,7 @@ describe("Data Encoding", () => {
       1, 43, 48, 0, 62, 135, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130,
     ]);
   });
-  it("encodeToBase64() from CPU image", async () => {
+  itRunsE2eOnly("encodeToBase64() from CPU image", async () => {
     const result = await surface.eval((Skia) => {
       const data = Skia.Data.fromBase64(
         "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="