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 ( + + + {label} + + {children} + + ); +} + +component RtlAndInlineViewsExample() { + return ( + + + + مَٰنِ ٱلرَّحِيمِ + + + + + + + Hello + {' '} + World! + + + + + + + مَٰنِ ٱلرَّحِيمِ + + + + + + مَٰنِ ٱلرَّحِيمِ + + + + + + + مَٰنِ ٱلرَّحِيمِ + Hello + + + + + + + Hello + + مَٰنِ ٱلرَّحِيمِ + + + + + ); +} + 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',