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

Commencez par exécuter le reproducteur Expo Snack lié sur iOS et Android, en comparant le cas imbriqué Icon/Text avec le cas View séparé. Suivez les chemins de React Native pour le texte et le rendu de SVG imbriqué afin de déterminer si l’alignement sur la ligne de base est pris en charge ; le travail est considéré comme terminé lorsque le comportement multiplateforme est confirmé et qu’une implémentation est convenue ou qu’une limitation est documentée.