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

Empieza ejecutando el reproductor de Expo Snack enlazado en iOS y Android, comparando el caso anidado de Icon/Text con el caso separado de View. Sigue las rutas de React Native para el texto y el renderizado de SVG anidado para determinar si se admite la alineación de línea base; se considera terminado cuando el comportamiento multiplataforma está confirmado y existe una implementación acordada o una limitación documentada.