Open
Description
Description
Hello team,
Everything started from an issue reported in the Unistyles repo: issue. After some debugging, I was able to isolate the issue to React Native core. It’s not easily visible, as with the new architecture, the app is not hot reloading when the user changes the font scale (this was also reported here).
It has nothing to do with Unistyles, but it was spotted by @yzhe554 because Unistyles auto re-renders the view if any native change happens, like a font scale change.
I created a repro repo with no external dependencies.
Steps to reproduce
- Create new app with new architecture
- Run iOS simulator
- Add
<Text>that depends onfontSize - Change
contentSizeCategory(fontScale) - Force re-render
React Native Version
0.75-rc.6
Affected Platforms
Runtime - iOS
Areas
Fabric - The New Renderer
Output of npx react-native info
System:
OS: macOS 14.5
CPU: (12) arm64 Apple M3 Pro
Memory: 325.67 MB / 36.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.15.0
path: /usr/local/bin/node
Yarn:
version: 3.6.4
path: /opt/homebrew/bin/yarn
npm:
version: 10.7.0
path: /usr/local/bin/npm
Watchman:
version: 2024.06.24.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: Not Found
IDEs:
Android Studio: 2024.1 AI-241.18034.62.2411.12071903
Xcode:
version: 15.4/15F31d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.11
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.75.0-rc.6
wanted: 0.75.0-rc.6
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
No crash
Reproducer
https://github.com/jpudysz/react-native-new-arch-repro
Screenshots and Videos
Result for paper:
Screen.Recording.2024-08-01.at.09.17.20.mov
Result for fabric:
Screen.Recording.2024-08-01.at.09.21.30.mov
As you can see with new architecture text breaks at the end of the line.