search

jpudysz / react-native-unistyles

Level up your React Native StyleSheet
https://unistyl.es
MIT License
1.42k stars 40 forks source link

FontScale breaks UI in new architecture #256

Closed yzhe554 closed 2 months ago

yzhe554 commented 2 months ago

Description

Zoom in breaks UI in new architecture. It doesn't even need to use unistyles on an element in the component, unistyles will break the UI. Removing all references of unistyles will fix the issue, but can't zoom with option command +

In old architecture

https://github.com/user-attachments/assets/a54c5d75-5262-4756-8d3f-acf97c724bd1

In new architecture

https://github.com/user-attachments/assets/990c66ec-bd63-47f1-95d6-5775db661512

Steps to reproduce

  1. Add 3 lines of Text
  2. Use unistyles to add styleSheet
  3. Zoom in in ios simulator with option command +
  4. UI is broken

Snack or a link to a repository (optional)

https://github.com/yzhe554/expo-new-architecture

Unistyles version

2.9.0

React Native version

0.74.1

Platforms

iOS

Engine

Hermes

Architecture

Fabric (new)

gulsher7 commented 2 months ago

are you using height, width from UnistyleRuntime.screen ? If yes then replace with Dimenssion.get('screen') and try. I'm facing same issue in real device ios.

jpudysz commented 2 months ago

Guys, I'm currently OOO and won't be able to pick it up earlier than next Monday.

Thank you for the reproduction and for more details. I will update you as soon as possible.

yzhe554 commented 2 months ago

are you using height, width from UnistyleRuntime.screen ? If yes then replace with Dimenssion.get('screen') and try. I'm facing same issue in real device ios.

Nah, It's just Text with fontSize

gulsher7 commented 2 months ago

are you using height, width from UnistyleRuntime.screen ? If yes then replace with Dimenssion.get('screen') and try. I'm facing same issue in real device ios.

Nah, It's just Text with fontSize

I faced this issue, check it: https://github.com/jpudysz/react-native-unistyles/issues/255#issue-2423590091

jpudysz commented 2 months ago

After debugging, I must admit that the error is due to React Native. @yzhe554, I saw that you already created an issue for the missing hot reloading on the React Native repo.

In your example, Unistyles is not connected to your view's styles, and the useStyles hook only reloads the view when the font scale changes. If you remove Unistyles, there is no reload, and the styles are applied correctly (after app restart). This indicates a bug in the new architecture with dynamically applying font scale. There is no extra work needed on the Unistyles side as I'm not modifying anything, just reading values.

yzhe554 commented 2 months ago

@jpudysz Cool, yes I have the same feeling but just wondering how command option +/- just works when I have unistyles... I am wondering unistyles still does something here. If you think they are the same issue, could you link them so I can test this again when RN team fixes it.

jpudysz commented 2 months ago

still does something here.

It automatically re-renders the view. Just left a comment in the React Native repo. I think it will be clearer now!

jpudysz commented 2 months ago

Closing, as I can't do anything about it 🙏🏼