React Native - Restrict accessibility font scaling by level

Question

I'm implementing a feature that can use accessibility settings on the phone. The problem is with large levels of font scaling, my layout broke while smaller levels are still fine. Is there any way to get the font scale level of the system or to restrict the accessibility settings to some levels only?

Thanks a lots.

Answer 1

Solution for React Native =< 0.58

iOS uses AccessibilityManager fro that (which is not available for Android) https://github.com/facebook/react-native/blob/1151c096dab17e5d9a6ac05b61aacecd4305f3db/IntegrationTests/AccessibilityManagerTest.js

Android requires a native (Java) solution, how to prevent system font-size changing effects to android application?

For React Native >= 0.59

Text and TextInput component have a maxFontSizeMultiplier prop. https://facebook.github.io/react-native/docs/next/text#maxfontsizemultiplier

With it, the app will be able to have a cross-platform solution to set font scale capping from JS

In your App.js:

Text.defaultProps = {};
Text.defaultProps.maxFontSizeMultiplier = 1.3;

TextInput.defaultProps = {};
TextInput.defaultProps.maxFontSizeMultiplier = 1.3;