links: React Native MOC
React Native implementation of fonts on iOS has some issues while using Expanded fonts. The reason for this is React native tries to implement a similar usage of web, where you can add style like fontWeight and fontStyle. The logic for this resides at RCTFont.mm file.
The logic loops through all the fonts and see if a font is italic and condensed. If this condition satisfies, they override the original font to nearest font with calculated weight. In case of Expanded fonts it always falls under Bold. So instead of seeing Expanded font, you see a Bold font.
The fix for this is to comment out this line in the for loop:
CGFloat closestWeight = INFINITY;
for (NSString *name in [UIFont fontNamesForFamilyName:familyName]) {
UIFont *match = [UIFont fontWithName:name size:fontSize];
if (isItalic == isItalicFont(match) && isCondensed == isCondensedFont(match)) {
CGFloat testWeight = weightOfFont(match);
if (ABS(testWeight - fontWeight) < ABS(closestWeight - fontWeight)) {
// font = match; --> This line needs to
closestWeight = testWeight;
}
}
}Once you comment the line, you cannot apply fontWeight and fontStyle, instead you have to use font post script name.
tags: react-native , fonts
source:
- [https://developer.apple.com/documentation/apple_news/componenttextstyle/](Apple mention of fontWidth)