-
Notifications
You must be signed in to change notification settings - Fork 24.3k
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.
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
No hot reloading when change font scale #45655
Comments
Hey @cortinico, there is one more side effect connected to this issue. I'm the author of react-native-unistyles, and Here is link to the unistyles issue: jpudysz/react-native-unistyles#256 Minimal steps to reproduce: export default function App() {
const [counter, setCounter] = useState(0)
return (
<View
style={{
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{fontSize: 24}}>RN 24 Label Testing!!!</Text>
<Text style={{fontSize: 18}}>RN 18 Label Testing!!!</Text>
<Text style={{fontSize: 16}}>RN 16 Label Testing!!!</Text>
<Button onPress={() => setCounter(prevState => prevState + 1)} title="Re-render" />
<StatusBar style="auto" />
</View>
)
} Try to change font scale and then press re-render button. Result for new architecture: Screen.Recording.2024-07-29.at.10.49.33.movOld arch: Screen.Recording.2024-07-29.at.10.52.41.mov |
Hi there! These are actually two separate issues. So, let's tackle them separatedly. First, @yzhe554 thanks for reporting the issue. This is a known limitation, as of today, because in the New Architecture we don't have a good mechanism to notify React that all the nodes received the updated text multiplier. It is also an edge case, as in production it is very rare that a user go in the settings to change the preferred text size and then it returns to the app. Furthermore, the issue solves itself if you navigate to another screen or you do a state update that force a re-render We are exploring how to implement some features that can be used as foundations to fix this one as well, so the fix to this will wait until that thread of work is done. Then, @jpudysz, this is a different issue. I'd love if you can do a test for me.
The reason I ask is that my gut feeling is that this scenario will "fix" your issue. Text multiplier affects layout as well and, from the video, it looks like that the rerender from unistyle is not updating the layout correctly: the left margin in the New Architecture is unchanged, while, in the old architecture, the left margin shrinks while the font increase its size. |
@cipolleschi Thanks for the quick feedback. |
hey @cipolleschi , I will create a separate issue with repro and all the details |
@yzhe554 we don't have a rough timeline as of today, unfortunately. |
Nah, I agree it's an edge case. But just need to convince other team(non tech). I will follow this for now. Thanks again. |
Description
In old arch, we can change font scale in realtime with
command option +/-
.In new arch, it has to be refreshed manually with pressing R to get new font scale applied.
Steps to reproduce
gh repo clone yzhe554/new-arch-font-scale
cd new-arch-font-scale
npm i
npm run ios
option command +/-
React Native Version
0.74.3
Affected Platforms
Runtime - iOS
Areas
Fabric - The New Renderer
Output of
npx react-native info
Stacktrace or Logs
Reproducer
https://github.com/yzhe554/new-arch-font-scale
Screenshots and Videos
In Old Arch
Screen.Recording.2024-07-23.at.4.55.31.PM.mov
In New Arch
Screen.Recording.2024-07-25.at.9.34.58.AM.mov
The text was updated successfully, but these errors were encountered: