wix / react-native-ui-lib

UI Components Library for React Native

Home Page:https://wix.github.io/react-native-ui-lib/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`text70BO` on iOS is bold but on Android is not bold.

theobouwman opened this issue · comments

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