Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Nick Gerleman
2025-07-14 19:43:12 -07:00
committed by Facebook GitHub Bot
parent fc535ef542
commit 7cd0b42ca0
1 changed files with 86 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/rn-tester/js/examples/Text/TextSharedExamples.js
+86
View File
@@ -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',