Handling Font Baseline Alignment

In this lesson, you will learn how to achieve pixel-perfect vertical alignment for text and icons by standardizing line-heights and offsetting vertical padding.

The "Baseline" Problem

When you place a Text component next to an icon (like an Image or VectorIcon), you often notice they don’t sit on the same visual baseline. This happens because font files have built-in "top-padding" (the space for ascenders and descenders like 'j' or 'h'), which differs from how icons are rendered. Even with alignItems: 'center', the text may appear "floaty" or slightly off-center compared to the icon.

Standardizing the Alignment

To force correct alignment, we treat the Text component as a rectangular block by manually controlling its vertical footprint.

1. Set lineHeight equal to height: By setting the lineHeight to match the intended container height, you effectively center the text within its own frame.
2. Zero-out Vertical Padding: Ensure no implicit paddingVertical or margin is shifting the baseline unpredictably.
3. Adjust with includeFontPadding (Android): Android often adds extra internal padding to accommodate certain fonts. Use { includeFontPadding: false } in your style prop to strip this space and make the text behave like a standard box.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  label: {
    fontSize: 16,
    lineHeight: 20, // Match the target layout height
    includeFontPadding: false, // Essential for Android precision
    textAlignVertical: 'center', // Fixes internal gravity
  }
});

Pro-Tip: The "Visual Offset"

If your icons still feel misaligned despite these steps, remember that icons often have empty transparent space around their glyphs. Instead of struggling with flexbox alone, use a small marginTop or marginBottom on the text component specifically to nudge the baseline—sometimes 1 or 2 pixels is all it takes to align a font's visual middle with an icon's geometric middle.

Key Takeaway: To achieve perfect alignment, explicitly set lineHeight equal to your component's container height and use includeFontPadding: false to normalize text box behavior across platforms.