react-native-ui-lib icon indicating copy to clipboard operation
react-native-ui-lib copied to clipboard

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

Open theobouwman opened this issue 2 years ago • 2 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?

theobouwman avatar Aug 03 '23 15:08 theobouwman

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>

mrkpatchaa avatar Aug 09 '23 09:08 mrkpatchaa

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

hjick avatar Oct 13 '23 02:10 hjick