Aligning Icon Baseline with Text Baseline on Android and iOS

[yanachrnsh]

Description

I'm trying to align an Icon baseline with the Text baseline (similar to how emojis are aligned). Despite trying several configurations, I am unable to vertically center the Icon when it is nested within Text. This issue occurs on both Android and iOS.

When I place the Text and Icon in aView, they are aligned as expected (examples below).

Additional Observation:
The problem on iOS occurred after a recent project upgrade:

• "expo": "51.x" -> "52.x"
• "react-native": "0.73.8" -> "0.76.6"

On Android, the problem existed both before and after the upgrade.

Could you please help me find a solution to achieve this alignment when the Icon is nested within Text, if it's possible?

Thanks a lot in advance!!

Steps to reproduce

Here is the link to the examples: https://snack.expo.dev/@yana_chrn/aligning-icon-baseline-with-text-baseline

Code example:

import { View, Text } from "react-native";
import Svg, { Circle } from 'react-native-svg';

const TextWithNestedIcon = () => {
  return (
    <Text style={{ backgroundColor: 'red', textDecorationLine: 'underline', fontSize: 16, lineHeight: 24, textAlignVertical: 'center'}}>
        <Svg height="16" width="16" viewBox="0 0 100 100" style={{ backgroundColor: 'yellow' }}>
          <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
        </Svg>
    </Text>
  );
}

React Native Version

0.76.6

Affected Platforms

Runtime - iOS, Runtime - Android

Output of npx react-native info

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 178.64 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.12.0
    path: ~/.nvm/versions/node/v22.12.0/bin/node
  Yarn:
    version: 4.5.1
    path: ~/.nvm/versions/node/v22.12.0/bin/yarn
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v22.12.0/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "34"
    Build Tools:
      - 33.0.1
      - 33.0.3
      - 34.0.0
    System Images:
      - android-28 | Google APIs ARM 64 v8a
      - android-29 | Google APIs ARM 64 v8a
      - android-30 | Google APIs ARM 64 v8a
      - android-31 | Google APIs ARM 64 v8a
      - android-32 | Google APIs ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11668458
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 3.3.6
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.1.3
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

No logs

Reproducer

https://snack.expo.dev/@yana_chrn/aligning-icon-baseline-with-text-baseline

Screenshots and Videos

Screenshots from Simulator (IOS):

Icon nested in Text	Icon is placed separately

Screenshots from Snack:

IOS:

Android

Example Before Upgrade (iOS):

[yanachrnsh]

Hi there! Just wondering if there are any updates here, thanks!

[mcapocaccia]

+1

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[yanachrnsh]

Please, don’t close this. Still valid

[saadiahmadx]

This issue is also still relevant for me on Expo 54 and RN 0.81... My use case is aligning LaTeX converted to SVG inline with other text. There is also lots of inconsistent behavior across text sizes.

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.