textAlignVertical Best Practice @mrtry 2025/11/04 - React Native Meetup #23 

⾃⼰紹介 ● JMDC, Inc / ventus, Inc ○ Mobile App Engineer ○ Scrum Master ● React Native Meetup Organizer ● 卒: ⾼専(情報⼯学) / 現: ⼤学⽣(認知科学) 2 

上下中央揃えしたいが、OSで揃わないので調べた ● テキストの垂直中央揃えが Android / iOS でずれる問題があった ○ iOSは垂直中央揃えされるが、Androidはされてくれないことがほとんど ● 原因は、フォントの描画⽅式の差分だった ● その違いと対処⽅法についてまとめた なんか上に寄ってる こうなってほしい 3 

フォントには2つの⾼さ基準があった 

フォントには2つの⾼さ基準があった ● フォントには2種類の⾼さ基準がある ○ ascent / descent ○ top / bottom 5 

iOSは ascent / descent を基準にする ● iOSはascent / descentを基準にする 6 

Androidは top / bottom を基準にする ● includeFontPadding で基準が変わる ○ true: top / bottom ○ false: ascent / descent ● default: true のため、iOSとフォントの⾼さに差分が出る 7 

プラットフォーム別の調整⽅法 

Androidでの対処法 ● includeFontPadding: false でiOSと⾼さをそろえる ● lineHeightをfont sizeの1.2-1.5倍にする ○ includeFontPadding: false すると、⾒切れることがある ○ Material Design Guidelineに⽬安が書いてある ● textAlignVertical: 'center'で 垂直中央揃え 9 

iOSでの対処法 ● 何もしなくて良さそうだが、調整必要なら以下を試みる ● lineHeight を fontSize と同じ値にする ○ textAlignVertical がiOSにはない ○ fontに対しての上下の余⽩をタイトにして整える 10 

実例 11 

まとめ ● プラットフォームごとにテキストの取扱に差分があった ● 垂直⽅向の中央揃えをするには、それぞれに適した対応が必要 ○ 共通 ■ フォントの⾼さをそろえる ○ iOS ■ lineHeight で垂直の余⽩を無くす (必要に応じて) ○ Android ■ textAlignVertical で中央揃え ■ lineHeight で⾒切れを防ぐ 12