Understanding default font sizes in React Native

Question

I've been working on a React Native app for the past few months, and something has always eluded me that I'm just now trying to get to the bottom of. I'm trying to standardize the font sizes within my app (for body, headers, etc.) and am struggling to understand where exactly React Native gets its default font size from. I've been testing in an iPhone 8 simulator running iOS 11, and through experimentation have come to the conclusion the default font displayed is 14 logical pixels (as in a brand-new element with no styling). However, checking the iOS style guidelines it would seem the default body text on iOS is intended to be 17pt. Although I don't a ton about device scaling, I've tried crunching the numbers in every online converter I could find, and could not come up with how 17pt may come close to 14 logical pixels (assuming RN uses the body font size by default). The only way I was able to roughly translate the two was if the DPI was around 90, but the DPI for iPhones is much, much higher. So might anyone be able to offer insight as to how default fonts are selected in React Native? Even hunting through the source code I couldn't find much. I'd like to be able to calculate the base size myself so I can scale the other font sizes according. Thanks in advance!

Ghazi

Answer 1

I suggest you to look at react-native-element's helper method normalizeText. It calculates the pixel ratio and set the texts fontSize accordingly.

Also you should also take in consideration of Accessibility Text Size Option in iOS. This option will be affecting all your app.

Flo

Answer 2

For both platforms, a Text component has a default fontSize of 15 as of the latest version of React Native, which aligns with the Subheadline text style in the iOS 16 design guidelines. Other components like a Button have a fontSize of 17 on iOS, which aligns with the latest design guidelines.

Nucleoside