In this lesson, you will learn how to precisely control the vertical spacing of text lines to ensure your app matches professional design specifications.
When you display text in React Native, the Text component calculates spacing based on the font's default metrics. However, designers often use specific line heights to improve readability or force a specific look. To achieve this, we use the lineHeight style property.
Understanding lineHeight
The lineHeight property determines the total height of each line of text. If your font size is 16 and you set a lineHeight of 24, the browser gives each line of text 24 units of vertical space, effectively centering the text within that block.
<Text style={{ fontSize: 16, lineHeight: 24 }}>
This text has a generous line height, making it easier to read on mobile screens.
</Text>
The Challenge of Baseline Alignment
While lineHeight handles the space between lines, "baseline alignment" refers to how the bottom of the characters aligns with other elements, like icons or neighboring text.
React Native does not have a single "vertical-align" property like web CSS. If you place an Icon next to a Text component, they might look vertically misaligned because the icon aligns to the bottom of the container, while the text aligns to its internal baseline.
To fix this, we combine what you’ve learned about flexbox and alignItems:
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Icon name="star" />
<Text style={{ fontSize: 16, lineHeight: 20 }}>
Aligned Text
</Text>
</View>
By wrapping your text and icons in a View with alignItems: 'center', you force the text’s line box to center itself against the icon. If the text still feels "off," you can apply a tiny marginTop or paddingTop to the text component to nudge it into perfect visual alignment with your layout. Always remember that lineHeight is your primary tool for internal spacing, while Flexbox alignment is your tool for external positioning.
Key Takeaway: Use lineHeight to control the vertical space consumed by a text block, and rely on flexbox alignment containers to position that text accurately against other UI elements.