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

Bắt đầu bằng cách chạy trình tái hiện Expo Snack được liên kết trên cả iOS và Android, so sánh trường hợp Icon/Text lồng nhau với trường hợp View riêng biệt. Theo dõi các đường dẫn React Native xử lý văn bản và kết xuất SVG lồng nhau để xác định liệu việc căn chỉnh theo đường cơ sở có được hỗ trợ hay không; được xem là hoàn tất khi hành vi trên nhiều nền tảng đã được xác nhận và đã thống nhất cách triển khai hoặc ghi nhận một giới hạn trong tài liệu.