Nested Text components apply styles at wrong offsets when text contains multi-byte characters

[marodrui]

Problem Description

When using nested <Text> components to apply different styles to different parts of a string, the style boundaries are incorrectly calculated when the text contains non-ASCII characters (e.g., accented Latin characters like ñ, or CJK characters like 新).

Steps To Reproduce

When having nested texts with different styles:

  <Text>
      <Text style={styles.normal}>{beforeHighlight}</Text>
      <Text style={styles.highlight}>{highlight}</Text>
      <Text style={styles.normal}>{afterHighlight}</Text>
  </Text>

I observed the following behavior:

beforeHighlight	highlight	afterHighlight	Expected	Actual rendering
ñññ	ascii	ascii	ñññasciiascii	ñññasciiascii
ascii	ñññ	ascii	asciiñññascii	asciiñññascii
ñññ	ñññ	ascii	ññññññascii	ññññññascii
ascii	新	ascii	ascii新ascii	ascii新ascii

As it can be seen in the previous table, it seems like when a non-ASCII character is used the offset to where to apply the different styles is not calculated properly.

Expected Results

No response

CLI version

20.1.2

Environment

System:
  OS: Windows 11 10.0.26100
  CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1365U
  Memory: 8.23 GB / 31.64 GB
Binaries:
  Node:
    version: 22.13.0
    path: C:\nvm4w\nodejs\node.exe
  Yarn:
    version: 1.22.22
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 10.9.2
    path: C:\nvm4w\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 16.11.36602.28 (Visual Studio Professional 2019)
    - 17.14.36623.8 (Visual Studio Community 2022)
Languages:
  Java:
    version: 2.formatMsgNoLookups
    path: ****
  Ruby:
    version: 3.0.2
    path: C:\tools\ruby30\bin\ruby.exe
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-windows:
    installed: 0.81.2
    wanted: ^0.81.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

No response

Target React Native Architecture

None

Target Platform Version

None

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response