From 7cd0b42ca09b224b65ccd8d629675dedc8f9d5fc Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@meta.com>
Date: Mon, 14 Jul 2025 19:43:12 -0700
Subject: [PATCH] Add text examples combining textAlign, attachments, script
 direction, and layout direction (#52445)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52445

This shows some broken stuff (TM), but also asserts current behaviors

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D77702743

fbshipit-source-id: a20d5b09e84d86a16e2443726ac82416b13796a8
---
 .../js/examples/Text/TextSharedExamples.js    | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/packages/rn-tester/js/examples/Text/TextSharedExamples.js b/packages/rn-tester/js/examples/Text/TextSharedExamples.js
index 87baa416978..e45fac6545c 100644
--- a/packages/rn-tester/js/examples/Text/TextSharedExamples.js
+++ b/packages/rn-tester/js/examples/Text/TextSharedExamples.js
@@ -110,6 +110,85 @@ function NumberOfLinesTextLayoutExample(): React.Node {
   );
 }
 
+component RtlInlineViewExample(
+  label: string,
+  testID: string,
+  children: React.Node,
+) {
+  return (
+    <View testID={testID} style={{flexDirection: 'row', flexGrow: 1}}>
+      <RNTesterText variant="label" style={{width: 100, fontSize: 10}}>
+        {label}
+      </RNTesterText>
+      <View style={{flexGrow: 1}}>{children}</View>
+    </View>
+  );
+}
+
+component RtlAndInlineViewsExample() {
+  return (
+    <View style={{rowGap: 5}}>
+      <RtlInlineViewExample
+        label="RTL script in LTR Layout with end attachment"
+        testID="rtl-inline-view-example-1">
+        <RNTesterText style={{textAlign: 'left', direction: 'ltr'}}>
+          مَٰنِ ٱلرَّحِيمِ
+          <View style={{width: 10, height: 10, backgroundColor: 'red'}} />
+        </RNTesterText>
+      </RtlInlineViewExample>
+
+      <RtlInlineViewExample
+        label="LTR script in RTL layout with middle attachment"
+        testID="rtl-inline-view-example-2">
+        <RNTesterText style={{textAlign: 'left', direction: 'rtl'}}>
+          Hello
+          <View style={{width: 10, height: 10, backgroundColor: 'red'}} />{' '}
+          World!
+        </RNTesterText>
+      </RtlInlineViewExample>
+
+      <RtlInlineViewExample
+        label="RTL script in LTR layout with start attachment"
+        testID="rtl-inline-view-example-3">
+        <RNTesterText style={{textAlign: 'left', direction: 'ltr'}}>
+          <View style={{width: 10, height: 10, backgroundColor: 'red'}} />
+          مَٰنِ ٱلرَّحِيمِ
+        </RNTesterText>
+      </RtlInlineViewExample>
+
+      <RtlInlineViewExample
+        label="RTL script in RTL layout with end attachment"
+        testID="rtl-inline-view-example-4">
+        <RNTesterText style={{textAlign: 'left', direction: 'rtl'}}>
+          مَٰنِ ٱلرَّحِيمِ
+          <View style={{width: 10, height: 10, backgroundColor: 'red'}} />
+        </RNTesterText>
+      </RtlInlineViewExample>
+
+      <RtlInlineViewExample
+        label="RTL dominant BiDi script in RTL layout with end attachments"
+        testID="rtl-inline-view-example-5">
+        <RNTesterText style={{textAlign: 'left', direction: 'rtl'}}>
+          مَٰنِ ٱلرَّحِيمِ
+          <View style={{width: 10, height: 10, backgroundColor: 'red'}} /> Hello
+          <View style={{width: 10, height: 10, backgroundColor: 'blue'}} />
+        </RNTesterText>
+      </RtlInlineViewExample>
+
+      <RtlInlineViewExample
+        label="LTR dominant BiDi script in RTL layout with end attachments"
+        testID="rtl-inline-view-example-6">
+        <RNTesterText style={{textAlign: 'left', direction: 'rtl'}}>
+          Hello
+          <View style={{width: 10, height: 10, backgroundColor: 'red'}} />
+          مَٰنِ ٱلرَّحِيمِ
+          <View style={{width: 10, height: 10, backgroundColor: 'blue'}} />
+        </RNTesterText>
+      </RtlInlineViewExample>
+    </View>
+  );
+}
+
 export default [
   {
     title: 'Empty Text',
@@ -124,6 +203,13 @@ export default [
     expect: 'The red box should align correctly with the rest of the text.',
     render: TextInlineViewsExample,
   },
+  {
+    title: 'RTL and Inline Views',
+    name: 'rtlInlineViews',
+    description: 'RTL Script and Layout Direction, Combined with Inline Views',
+    scrollable: true,
+    render: RtlAndInlineViewsExample,
+  },
   {
     title: 'numberOfLines with onTextLayout',
     name: 'numberOfLinesLayout',