Dynamic Font Sizes

[indivisable]

What is best way to handle different fonts set by the OS? I understand this is more general topic related to RN itself but might be good to align dynamically based on height etc. For example if user has small fonts selected the inline labels look offset:

[esbenp]

Hmm.. That is a good question. My experience with mobile development is very limited. This was sort of my introduction project. Weird, the line-height should be equal to the height of the label and therefore the label should be vertically centered. That is the issue you are pointing out, right? That the label text is smaller than the placeholder text and seem to be higher up, yes?

[indivisable]

@esbenp Yes it should be aligned to center point, I'll be looking into the dynamic text sizing in next few days I'll let you know what I discover.

[esbenp]

Awesome! Let me know :-)

[indivisable]

After some research we have a few ways we could handle this:

Disable Font Scaling https://facebook.github.io/react-native/docs/text.html#allowfontscaling

Text.defaultProps.allowFontScaling=false

Or using Pixel Ratio: https://facebook.github.io/react-native/docs/pixelratio.html#getfontscale

Examples:

• http://stackoverflow.com/questions/32947036/how-to-set-font-size-for-different-ios-devices-in-react-native
• http://stackoverflow.com/questions/33628677/react-native-responsive-font-size

The latter method may only work on Android, as the getFontScale only works on Android, not sure why. Might have to write some Objective-C helper to return this setting for iOS:

http://stackoverflow.com/questions/10484211/ios-foundation-system-font-size

[markusguenther]

You can actually style the components with a own theme. So your are also able to define the font-size for each element. The scaling of the operating system is also there. But android and iOS handles this a bit different. Android has just one resize level and on iOS you have several scale levels.