Description
When upgrading React Native to version 0.82 on Android with the new architecture enabled, Arabic text, which previously rendered correctly as one joined word (for example: الْعٰلَمِيْنَ), now renders as two separate words when you split it across nested components for styling (e.g., colour). This only occurs on Android under the new architecture; iOS and the old architecture render correctly.
Steps to reproduce
- Create a new React Native 0.82 project without Expo using React Native Community CLI
npx @react-native-community/cli@latest init AwesomeProject
- Run on Android on any Android Emulator
npx react-native run-android
- Render a text in Arabic and split a word into two nested tags — for example:
import React from 'react';
import { View, Text } from 'react-native';
export default function App() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 100 }}>
<Text style={{ color: 'red' }}>الْ</Text>
<Text style={{ color: 'blue' }}>عٰلَمِيْنَ</Text>
</Text>
</View>
);
}
- Render on Android — you will see the text appear visually as two separate word segments rather than one joined word as الْ عٰلَمِيْنَ. Please see the attached screenshot.
- Rebuild the same code under the old architecture (e.g. RN 0.66 version) — the word renders correctly as one joined word: الْعٰلَمِيْنَ.
Expected behaviour
The Arabic word should render as a single joined word with correct diacritics and ligatures across color/style boundaries — as it did in the old architecture.
Actual behaviour
Under the new architecture on Android, splitting the word across nested segments breaks the shaping/ligature context, resulting in visual separation.
Important: Please note that it is working fine on IOS.
Environment
React Native: 0.82
Platform: Android only
Architecture: New Architecture
React Native Version
0.82
Affected Platforms
Runtime - Android
Areas
Fabric - The New Renderer
Output of npx @react-native-community/cli info
info Fetching system and libraries information...
System:
OS: Windows 11 10.0.26100
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Memory: 2.88 GB / 15.77 GB
Binaries:
Node:
version: 24.6.0
path: C:\nvm4w\nodejs\node.EXE
Yarn: Not Found
npm:
version: 11.5.1
path: C:\nvm4w\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowAllTrustedApps: Disabled
Versions:
- 10.0.18362.0
- 10.0.22621.0
IDEs:
Android Studio: AI-242.21829.142.2421.12409432
Visual Studio:
- 16.8.31005.135 (Visual Studio Community 2019)
- 17.13.35818.85 (Visual Studio Community 2022)
Languages:
Java:
version: 17.0.10
path: C:\Program Files\Java\jdk-17\bin\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli":
installed: 20.0.0
wanted: 20.0.0
react:
installed: 19.1.1
wanted: 19.1.1
react-native:
installed: 0.82.1
wanted: 0.82.1
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
This is not a breaking error or issue requiring stacktrace or a log.
MANDATORY Reproducer
https://github.com/FaizanHaq
Screenshots and Videos
Description
When upgrading React Native to version 0.82 on Android with the new architecture enabled, Arabic text, which previously rendered correctly as one joined word (for example: الْعٰلَمِيْنَ), now renders as two separate words when you split it across nested components for styling (e.g., colour). This only occurs on Android under the new architecture; iOS and the old architecture render correctly.
Steps to reproduce
npx @react-native-community/cli@latest init AwesomeProjectnpx react-native run-androidExpected behaviour
The Arabic word should render as a single joined word with correct diacritics and ligatures across color/style boundaries — as it did in the old architecture.
Actual behaviour
Under the new architecture on Android, splitting the word across nested segments breaks the shaping/ligature context, resulting in visual separation.
Environment
React Native: 0.82
Platform: Android only
Architecture: New Architecture
React Native Version
0.82
Affected Platforms
Runtime - Android
Areas
Fabric - The New Renderer
Output of
npx @react-native-community/cli infoStacktrace or Logs
MANDATORY Reproducer
https://github.com/FaizanHaq
Screenshots and Videos