Aligning Icon Baseline with Text Baseline on Android and iOS

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):

首先在 iOS 和 Android 上运行链接的 Expo Snack 复现程序，对比嵌套的 Icon/Text 情况与单独的 View 情况。跟踪 React Native 的文本和嵌套 SVG 渲染路径，以确定是否支持基线对齐；当跨平台行为得到确认，并且已就实现方案达成一致或记录了限制时，即表示完成。