react-native-ui-lib
react-native-ui-lib copied to clipboard
`text70BO` on iOS is bold but on Android is not bold.
I noticed that on Android setting <Text text70BO>bla bla</Text> makes the text bold on iOS but not on Android. Is this a bug?
You could face this issue because fonts does not work the same on Android and iOS.
On iOS you can have 1 font family name and specify bold, italic, etc...
On Android when you have a custom font, you need a specific fontName for all the variants
myFontBold, myFontBoldItalic, ...
This is how I am using it in my app :
ThemeManager.setComponentForcedTheme('Text', (props: TextProps & CustomFamilyProps) => {
return {
...props,
style: combineStyles<StyleProp<TextStyle | Animated.AnimatedProps<TextStyle>>>(
{ fontFamily: fonts.fig3 }, // <--- Default font family for all my text components
props.style,
props.family && fonts[props.family] ? { fontFamily: fonts[props.family] } : {} <--- if family attribute is specified, apply the right font name
),
}
})
...
<Text family="ibm7">Text with my ibm7 font family. In my case this means bold</Text>
I found the reason. This is typographyPreset.
const weightsMap = { THIN: 'T', LIGHT: 'L', REGULAR: 'R', MEDIUM: 'M', BOLD: 'BO', HEAVY: 'H', BLACK: 'BL' };
_.forEach(keys, (key) => {
_.forEach(weightsMap, (weightValue, weightKey) => {
const fontKey = text${key} as keyof TypographyKeys;
const fontWeightKey = ${fontKey}${weightValue} as keyof TypographyKeys;
Typography[fontWeightKey] = {
...Typography[fontKey],
fontWeight: Constants.isIOS ? WEIGHT_TYPES[weightKey] : ['BO', 'H', 'BL'].includes(weightKey) ? 'bold' : undefined
};
});
});
In this codes '['BO', 'H', 'BL'].includes(weightKey)' -> 'weightKey' must to be 'weightValue'. weightKey can never be included in ['BO', 'H', 'BL']. Because weightKey can be only 'THIN', 'LIGHT', 'REGULAR', 'MEDIUM' ....
I fix this by changing weightKey to weightValue with patch-package library. And I posted PR for this issue #2759