'React Native - How to detect font size after a font scaling?

I need to detect what is the font size for text component after a font scaling. Let's say that I have a Text component with font size 18px

<Text style={{fontSize: 18}}>My Text</Text>

The user has set a large font through the OS accessibility settings. Now my text has been rendered with a larger font size (more than 18px). I'm aware that I can use allowFontScaling={false} but I don't want to lose the text accessibility. I saw that React native have an API for getting the font scale PixelRatio.getFontScale() but it doesn't work for iOS

Returns the scaling factor for font sizes. This is the ratio that is used to calculate the absolute font size, so any elements that heavily depend on that should use this to do calculations.

If a font scale is not set, this returns the device pixel ratio.

Currently this is only implemented on Android and reflects the user preference set in Settings > Display > Font size, on iOS it will always return the default pixel ratio. @platform android

Any ideas?

react-native fonts

Solution 1:^[1]

react-native-device-info provides a function, getFontScale(), which appears to work in both android and iOS.

Solution 2:^[2]

you can use useWindowDimensions

import { useWindowDimensions } from 'react-native';

const MyScreen = ({ navigation }) => {
   useWindowDimensions().fontScale // you will get current scale
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Pete
Solution 2	Ugur

'React Native - How to detect font size after a font scaling?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]