Fix inline profile badge alignment in notifications on iOS new arch

The verification/bot/beta badges rendered inline after the author name in a
notification row ("liked by xyz") sat too high on iOS after the new
architecture switch.

The badges are a `View` nested inside a `<Text>`, so iOS lays them out as a
text attachment. The old architecture measured the attachment box with
`sizeThatFitsMinimumSize:` (which folds the inline view's margins into the box)
and positioned it at `lineFragmentBottom - boxHeight + font.descender`, so the
`marginBottom: -6` hack shifted the badges down. On the new architecture
`ParagraphShadowNode` measures the box with `LayoutableShadowNode::measure`,
which returns the node's own frame size with margins excluded, and then
overwrites the box origin with the frame `RCTTextLayoutManager` computed at
`lineTop + baseline - boxHeight`. Margins and `top` are both ignored, leaving
the badges pinned to the text baseline.

Box height is the only remaining lever, so add an `inlineFontSize` prop to
`ProfileBadges` that constrains the container to the cap height of the
surrounding text. The box then covers exactly the capital letters and the
existing `align_center` centers the badges on them, regardless of which badges
are visible or how tall they are.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Pgeau3P52qsMTcnDeJm8Zn
This commit is contained in:
Claude
2026-07-25 08:21:33 +00:00
parent d5e335e575
commit 8b06b18cd5
2 changed files with 43 additions and 3 deletions
@@ -258,12 +258,15 @@ let NotificationFeedItem = ({
<ProfileBadges
profile={firstAuthor.profile}
size="md"
inlineFontSize={a.text_md.fontSize}
style={[
a.relative,
{
// weird stuff here
/*
* Empirical nudges to line the badges up with the text on
* Android and web. iOS is handled by `inlineFontSize` above.
*/
paddingTop: platform({android: 2}),
marginBottom: platform({ios: -6}),
top: platform({web: 2}),
paddingLeft: 3,
paddingRight: 2,