Remove vertical spacing from React Native text-PHP Chinese Network Q&A

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 = ({ 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 ; }; 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

reply all (1)

P粉5140018872023-09-03 00:58:02 1 floor

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) tocombinedStyles.

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

Also try settingpaddingToporpaddingBottomormarrginTopormarrginBottomindividually, as they may be Overrides general padding and margins defined elsewhere.

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