Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Font weight is not honored on iOS in RN 0.76 #47656

Open
esbenvb opened this issue Nov 18, 2024 · 3 comments · May be fixed by #47691
Open

Font weight is not honored on iOS in RN 0.76 #47656

esbenvb opened this issue Nov 18, 2024 · 3 comments · May be fixed by #47691
Labels
Platform: iOS iOS applications. Resolution: PR Submitted A pull request with a fix has been provided. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)

Comments

@esbenvb
Copy link
Contributor

esbenvb commented Nov 18, 2024 •
edited
Loading

Description

After switching to new architecture, the text rendering does not seem to honor the fontWeight style as it used to do, on iOS.

With RN 0.76 and new architecture enabled, it's not choosing the font based on the weight on iOS, even though that's the intended behavior according to the docs: https://reactnative.dev/docs/text-style-props#fontweight

Steps to reproduce

clone the project and run
yarn && npx pod-install && yarn ios

Or add this code to an existing RN 0.76 project with new architecture enabled:

<Text
  style={{
    fontFamily: 'RobotoCondensed-Bold',
    fontSize: 32,
    fontWeight: '700',
  }}>
    RobotoCondensed-Bold - weight 700
</Text>
<Text
    style={{
    fontFamily: 'RobotoCondensed-Regular',
    fontSize: 32,
    fontWeight: '700',
  }}>
    RobotoCondensed-Regular - weight 700
</Text>

React Native Version

0.76.2

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 15.0.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 819.03 MB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: ~/Library/Caches/fnm_multishells/40214_1731916352195/bin/node
  Yarn:
    version: 1.22.22
    path: ~/Library/Caches/fnm_multishells/40214_1731916352195/bin/yarn
  npm:
    version: 9.8.1
    path: ~/Library/Caches/fnm_multishells/40214_1731916352195/bin/npm
  Watchman:
    version: 2024.10.07.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "27"
      - "28"
      - "29"
      - "31"
      - "32"
      - "33"
      - "34"
      - "34"
      - "35"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 34.0.0
      - 35.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-29 | Intel x86 Atom_64
      - android-29 | Google APIs Intel x86 Atom
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
    Android NDK: 25.0.8775105
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11255304
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 1.8.0_292
    path: /usr/bin/javac
  Ruby:
    version: 3.3.5
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.2
    wanted: 0.76.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

N/A

Reproducer

https://github.com/esbenvb/rn-font-weight-issue

Screenshots and Videos

✅ Without new architecture - working as expected
Simulator Screenshot - iPhone 15 - 2024-11-18 at 09 00 58

❌ With new architecture - not working as expected
Simulator Screenshot - iPhone 15 - 2024-11-18 at 09 03 57
@esbenvb esbenvb added Needs: Triage 🔍 Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) labels Nov 18, 2024
@react-native-bot react-native-bot added the Platform: iOS iOS applications. label Nov 18, 2024
@esbenvb esbenvb mentioned this issue Nov 18, 2024
Open
@zhongwuzw zhongwuzw linked a pull request Nov 19, 2024 that will close this issue
Open
@zhongwuzw
Copy link
Contributor

Hi, it may fixed by #47691.

@migueldaipre migueldaipre added Resolution: PR Submitted A pull request with a fix has been provided. and removed Needs: Triage 🔍 labels Nov 19, 2024
@orkidaW
Copy link

orkidaW commented Nov 19, 2024

I am facing font issue in react native 0.76 too. The google custom font added doesn't get recognized in IOS ,but works fine in android.

@esbenvb
Copy link
Contributor Author

esbenvb commented Nov 19, 2024 •
edited
Loading

Your patch seems to work for RobotCondensed but not for Chivo...

When switching to our main app that uses the Chivo font, it seems like it does not show the Chivo-Regular properly... I have updated the repro project.

With your patch and new architecture
image

Without new architecture
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Platform: iOS iOS applications. Resolution: PR Submitted A pull request with a fix has been provided. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[iOS] Fabric: Fixes custom font of weight is not honored zhongwuzw/react-native
5 participants
@esbenvb @zhongwuzw @migueldaipre @react-native-bot @orkidaW