fix(android): track textAlignVertical in custom decoration draw offset

[quantizor]

Summary:

The textDecorationColor work this PR started as has shipped: #56768 moved underlines and strikethroughs to a custom span-painting path (ReactUnderlineSpan / ReactStrikethroughSpan now extend CanvasEffectSpan and paint their own line), which carries the decoration color through as a side effect and closes #4579. So this PR is now scoped to the one piece that did not come along: keeping those custom decoration draws aligned with textAlignVertical.

ReactTextView.onDraw paints the CanvasEffectSpan decorations in their own pass, translating by getExtendedPaddingTop() only. That matches the default Gravity.TOP, but when textAlignVertical is center or bottom and the text is shorter than the view, super.onDraw shifts the glyphs down by a gravity offset the span draws were missing, so the underline/strikethrough rendered at the top of the box while the text sat centered or at the bottom. This is exactly the drift @fabriziocucci predicted in review.

The offset (mirroring the private TextView.getVerticalOffset()) is now computed by a package-private verticalGravityOffset() helper and applied to both the onPreDraw and onDraw translate passes.

Changelog:

[ANDROID] [FIXED] - Custom text decorations track textAlignVertical

Test Plan:

ReactTextViewTest covers verticalGravityOffset across top, center, bottom, exact-fit, and overflow cases (6 cases, all green locally).

Visually, on an Android API 36 emulator: a fixed-height <Text> with textAlignVertical="center" (and "bottom"), textDecorationLine="underline", and a distinct textDecorationColor inside a taller parent now renders the underline flush under the glyphs. Previously the underline stayed pinned to the top of the box while the text moved.

<View style={{ height: 200, backgroundColor: '#eee' }}>
  <Text
    style={{
      height: 200,
      textAlignVertical: 'center', // also 'bottom'
      color: 'black',
      textDecorationLine: 'underline',
      textDecorationColor: '#ff00aa',
      fontSize: 24,
    }}>
    Hello
  </Text>
</View>

[meta-codesync]

@fabriziocucci has imported this pull request. If you are a Meta employee, you can view this in D104669839.

[fabriziocucci]

Hey @quantizor , there's a potential issue we might need to double-check before we land.

The new canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop()) block in ReactTextView.onDraw doesn't replicate the voffsetText that TextView.onDraw adds when vertical gravity isn't TOP. Since RN exposes textAlignVertical (which maps to gravity), the underline/strikethrough should drift away from the text whenever textAlignVertical is center or bottom and the text is taller than its content.

Could you try this repro and see if the underline still tracks the text?

<View style={{ height: 200, backgroundColor: '#eee' }}>
  <Text
    style={{
      height: 200,
      textAlignVertical: 'center', // also try 'bottom'
      color: 'black',
      textDecorationLine: 'underline',
      textDecorationColor: '#ff00aa',
      fontSize: 24,
    }}>
    Hello
  </Text>
</View>

If the magenta underline appears at the top of the gray box while "Hello" is centered/at the bottom, we'll need to add the gravity offset back in. Roughly:

int voffsetText = 0;
if ((getGravity() & Gravity.VERTICAL_GRAVITY_MASK) != Gravity.TOP) {
    int boxHeight =
        getMeasuredHeight() - getExtendedPaddingTop() - getExtendedPaddingBottom();
    int textHeight = layout.getHeight();
    if (textHeight < boxHeight) {
        int v = getGravity() & Gravity.VERTICAL_GRAVITY_MASK;
        voffsetText =
            (v == Gravity.BOTTOM) ? (boxHeight - textHeight) : (boxHeight - textHeight) / 2;
    }
}
canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop() + voffsetText);

(getVerticalOffset is private in TextView, so we have to recompute it.)

PreparedLayoutTextView doesn't have this problem because it owns its own draw and uses preparedLayout.verticalOffset.

[quantizor]

Good catch, @fabriziocucci. Confirmed the drift on Android API 36 with a tall <Text height={120} textAlignVertical="center">: the magenta underline sat pinned to the top of the box while "Hello" slid to the middle. Pushed 7e00154 with the gravity offset recomputed locally, since getVerticalOffset() is private. The span draws now track the glyphs in all three alignments.

[quantizor]

False positive: the PR diff is five Android Kotlin/Java files only, no .d.ts change. The bot looks to have matched something outside the actual file list.

[quantizor]

@fabriziocucci hi, just following up here! Is there anything else I need to do?

[quantizor]

@fabriziocucci following up, is any further action needed here? What's the typical merge timeline for RN fixes?

[quantizor]

Closing the loop here: the color half landed in #56768, which moved underlines and strikethroughs onto the custom CanvasEffectSpan paint path. That carries textDecorationColor through for free and closes #4579, so I've narrowed this PR down to the one thing that didn't come along: the drift you caught.

ReactTextView.onDraw now recomputes the vertical gravity offset (since TextView.getVerticalOffset() is private) and applies it to both span passes, so the decoration tracks the glyphs at center and bottom. Pulled the math into a verticalGravityOffset() helper with ReactTextViewTest covering top/center/bottom/exact-fit/overflow, and retitled the PR to match its new scope.

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds a shared vertical gravity offset calculation so CanvasEffectSpan decorations (underline/strikethrough) stay aligned with glyphs when textAlignVertical shifts text within a taller ReactTextView.

Changes:

• Adjust ReactTextView.onDraw to apply the same vertical translation to CanvasEffectSpan drawing passes as the glyph/layout pass.
• Introduce ReactTextView.verticalGravityOffset(...) mirroring TextView’s internal vertical offset logic.
• Add Robolectric unit tests for the new offset behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java	Adds verticalGravityOffset helper and applies offset to span drawing translations.
packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/text/ReactTextViewTest.kt	New Robolectric tests validating offset behavior for TOP/CENTER/BOTTOM and overflow cases.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.