[iOS]: App Extension in new architecture works - but Fabric Text Renderer does not respect any font styles

App Extensions do not show font styles correctly

We are currently porting our react-native app from 0.7x to 0.8x, including our app extension to the new architecture which makes use of fabric rendering. We are glad the app extension is now running on RN again. Unfortunately, the app extension does not display Labels correctly.

I assume this issue is related to the new Fabric Text Renderer. For some reason it is correctly displaying the font styles when the main target (normal RN app) is executed, but not from the app extension.
All the view styles are applied correctly, e.g. button styles, background video, etc., but the fonts are not applied or even invisible (if a custom fontFamily property is provided, even if it's just 'Arial')

I temporarily added some logging in the RCTFont.mm but nothing appeared in the console.

It was quite a hassle to get it working at all. We did days of digging to make it work and we are sharing our insights in the attached repro.

Summary of steps to create the extension:

1. Use Obj-C++ class that uses RCTReactNativeFactory to create a react-native instance using new architecture, also make use of RCTDefaultReactNativeFactoryDelegate to tell where to load the main.jsbundle from
2. Exposed a simple API that can be used by our swift class, which is a subclass of ASCredentialProviderViewController
3. Add bridging header
4. Make modifications in the podfile (mentioning the target, making sure it's using the same RN deps, and disabling a property APPLICATION_EXTENSION_API_ONLY)

Additional Notes:

Also I would recommend maybe creating guards around UIApplication sharedApplication in RCTScrollView around line 315, since it will emit

"sharedApplication is unavailable: not available on iOS (App Extension) - use view controller based solutions where appropriate".

Currently I changed the build settings of the app extension: Require Only App-Extension-Safe API = NO
(see Podfile provided in repro)

Steps to reproduce

1. Run the packager "yarn start"
2. Open the workspace in Xcode
3. Due to appstore requirements, you will have to select a valid team for both the app extension and the main target
4. Build for simulator, e.g. iPhone 16 Pro
5. Select the correct build scheme

6. Select Safari as a target
7. Safari will open, now visit https://m.facebook.com
8. Tap into the username field
9. Make sure the keyboard appears (I do this always with CMD+K)
10. Press "Passwords"

11. The app will popup, it will show the fonts

As you can see, the styling isn't applied, although it's clearly defined in the App.jsx.
When a custom custom font is specified, the font disappears completely.

import React from 'react';

import {
  Text,
  View,
} from 'react-native';

function App() {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text style={{fontSize: 30, color: 'black'}}>ABCDEF (fs=30)</Text>
      <Text style={{fontSize: 12, color: 'black', marginTop: 16}}>
        GHIJKLM (fs=12)
      </Text>

      <Text style={{fontSize: 30, color: 'black', fontFamily: 'Arial'}}>BONUS (font family)</Text>
    </View>
  );
}

export default App;

When the main app is run, it will be displayed correctly.

React Native Version

0.82.1

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: macOS 15.6
  CPU: (10) arm64 Apple M1 Max
  Memory: 1.05 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.19.0
    path: /Users/yoshijaeger/.nvm/versions/node/v22.19.0/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/yoshijaeger/.yarn/bin/yarn
  npm:
    version: 10.9.3
    path: /Users/yoshijaeger/.nvm/versions/node/v22.19.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.25410.109.2511.13665796
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.1
    wanted: 0.82.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

Unfortunately no significant logs


Unbalanced calls start/end for tag 20
Unbalanced calls start/end for tag 19
Running "RNFontIssueRepro" with {"rootTag":11,"initialProps":{},"fabric":true}

MANDATORY Reproducer

https://github.com/SmartArray/rn-appext-fabric-font-repro

Screenshots and Videos

_Screenshots provided in "how to reproduce" (Steps) and in main issue description _

記載されている Xcode とシミュレータの手順で必須の reproducer を実行し、その後、App.jsx のスタイルを使用して extension とメインターゲットを比較します。RCTFont.mm の言及されている logging 領域と、RCTScrollView の警告コンテキストを調査します。アプリ extension でフォントサイズ、色、カスタム fontFamily が正しくレンダリングされ、報告されている警告の問題が発生しなければ完了です。