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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user