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