Add text examples combining textAlign, attachments, script direction, and layout direction (#52445)

Summary:
Pull Request resolved: #52445

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

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D77702743

fbshipit-source-id: a20d5b09e84d86a16e2443726ac82416b13796a8

Author: NickGerleman

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',