Enabling Font Scaling Retrospectively In React Native
Having an as accessible app is becoming the new norm, but it hasn’t always been like that.
The good news is that React Native defaults to having font scaling enabled, but if your one of the few unlucky people out there that has disabled it for various reasons, here are some tips on how (relatively) easily get back on track!
Fixed heights are the enemy
The solutions for this are either not setting a fixed height or in this case setting a limit to scaling with the attribute: maxFontSizeMultiplier={1.5} or disabling this particular texts scaling all together by setting allowFontScaling={false}
Side by side views
This will often happen in list items with columns and its a bit more tricky to answer. In general there are two approaches — either ellipsis the text using numberOfLines={1} if its a priority to let heights be uniform or let the text multiline without it. Using the ellipsis approach should only be used in cases where clicking the ellipsised text will lead you to a screen that allows you to read the full text
Content simply being too big to fit screensize
You can often handle this by simple wrapping your screen in a <ScrollView />
Conclusion
Supporting dynamic font sizes is incredibly important and as react native has grown as a framework it has become easier and easier to support. As long as you use flexbox as much as possible and avoiding fixed heights, supporting it should be a lot easier than you think.
Further reading and watching
When talking about accessibility in React Native i always recommend Ankita Kulkarnis talk — it brushes over everything you need to know. Apples typography guidelines are also very much worth a read.
👋 Hey! I’m Thomas Kjær-Rasmussen, frontend nerd and tech enthusiast. Hit me up on Twitter or below if you got any questions, comments or ideas!
