Remove vertical spacing from React Native text

Question

I made a CustomText component to use the Poppins font family. But when using it, I get vertical space that ends up getting bigger as the fontsize increases, creating unnecessary space between the two CustomText components.

I tried using padding:0,margin:0,line-height:undefined | fontSize but none of them work. This is my CustomText code:

const CustomText: React.FC<CustomTextProps> = ({

  style,
  isBold,
  isItalic,
  fontSize,
  color,
  ...restProps
}) => {
  fontSize ??= fontSizes.xsm;
  const combinedStyles = [
    styles.defaultText,
    style,
    isBold && styles.boldText,
    isItalic && styles.italicText,
    { fontSize: fontSize },
    { color: color ?? "black" },
  ];

  return <Text style={combinedStyles} {...restProps} />;
};

const styles = StyleSheet.create({
  defaultText: {
    fontFamily: "Poppins-Regular",
  },
  boldText: {
    fontFamily: "Poppins-Bold",
  },
  italicText: {
    fontFamily: "Poppins-Italic",
  },
});

Here is an example of what happens when I use the sample image

I used backgroundColor:'green' to see the vertical space and it was too much.

I want to control the spacing between text elements. I'm new to react native, any help would be greatly appreciated. Thank you

Answer 1

By default, the lineHeight property is set to a multiple of the font size.

You can set it yourself by adding {lineHeight: fontSize} (or any other desired amount) to combinedStyles.

const combinedStyles = [
    styles.defaultText,
    style,
    isBold && styles.boldText,
    isItalic && styles.italicText,
    { fontSize: fontSize },
    { color: color ?? "black" },
    { lineHeight: fontSize },
  ];

Also try setting paddingTop or paddingBottom or mar​​rginTop or mar​​rginBottom individually, as they may be Overrides general padding and margins defined elsewhere.

Also set includeFontPadding: false, because there may be default font padding.