diff --git a/packages/rn-tester/js/components/TextInlineView.js b/packages/rn-tester/js/components/TextInlineView.js
index 94269d36018b02..360a15a17cb140 100644
--- a/packages/rn-tester/js/components/TextInlineView.js
+++ b/packages/rn-tester/js/components/TextInlineView.js
@@ -10,31 +10,32 @@
'use strict';
-const React = require('react');
-const {Image, Text, TouchableHighlight, View} = require('react-native');
+import RNTesterText from '../components/RNTesterText';
+import React from 'react';
+import {Image, TouchableHighlight, View} from 'react-native';
function Basic(): React.Node {
return (
-
+
This text contains an inline blue view{' '}
and
an inline image . Neat,
huh?
-
+
);
}
function NestedTexts(): React.Node {
return (
- This is the first row
-
-
- This is a nested text
+ This is the first row
+
+
+ This is a nested text
- with a Red View
-
-
+ with a Red View
+
+
);
}
@@ -45,11 +46,12 @@ function ClippedByText(): React.Node {
{/*
* Inline View
**/}
-
- The inline view below is
- taller than its Text parent and should be clipped.
-
-
+ The{' '}
+ inline view{' '}
+ below is taller than its Text parent and should be clipped.
+
+
-
+
{/*
* Inline Image
**/}
-
- The inline image below is
- taller than its Text parent and should be clipped.
-
-
+ The{' '}
+ inline image{' '}
+ below is taller than its Text parent and should be clipped.
+
+
-
+
);
}
@@ -118,11 +121,11 @@ class ChangeImageSize extends React.Component {
onPress={() => {
this.setState({width: this.state.width === 50 ? 100 : 50});
}}>
-
+
Change Image Width (width={this.state.width})
-
+
-
+
This is an
{
}}
/>
inline image
-
+
);
}
@@ -154,11 +157,11 @@ class ChangeViewSize extends React.Component {
onPress={() => {
this.setState({width: this.state.width === 50 ? 100 : 50});
}}>
-
+
Change View Width (width={this.state.width})
-
+
-
+
This is an
{
}}
/>
inline view
-
+
);
}
@@ -192,9 +195,11 @@ class ChangeInnerViewSize extends React.Component {
rerendered and remains at its old size. If other things change
(e.g. we display `state.width` as text somewhere) it could circumvent
the bug and cause the pink view to be rerendered at its new size. */}
- Change Pink View Width
+
+ Change Pink View Width
+
-
+
This is an
{
/>
inline view
-
+
);
}
diff --git a/packages/rn-tester/js/components/TextLegend.js b/packages/rn-tester/js/components/TextLegend.js
index 359dd67c2dc970..da8c4521ada785 100644
--- a/packages/rn-tester/js/components/TextLegend.js
+++ b/packages/rn-tester/js/components/TextLegend.js
@@ -8,6 +8,7 @@
* @flow strict-local
*/
+import RNTesterText from '../components/RNTesterText';
import RNTOption from './RNTOption';
import * as React from 'react';
import {StyleSheet, Text, View} from 'react-native';
@@ -45,10 +46,14 @@ export default function TextLegend(): React.Node {
const [fontSize, setFontSize] = React.useState(50);
return (
- setFontSize(fontSize + 3)}>Increase size
- setFontSize(fontSize - 3)}>Decrease size
+ setFontSize(fontSize + 3)}>
+ Increase size
+
+ setFontSize(fontSize - 3)}>
+ Decrease size
+
- Language
+ Language
{Object.keys(PANGRAMS).map(lang => (
{
setTextMetrics(event.nativeEvent.lines);
}}
@@ -203,10 +208,10 @@ export default function TextLegend(): React.Node {
textAlign: alignment,
}}>
{PANGRAMS[language]}
-
+
- Alignment:
+ Alignment:
{
};
return (
-
+
Tap the controls below to change attributes.
-
-
-
+
+
+
See how it will even work on{' '}
- this nested text
-
-
-
- Toggle Weight
+
+ this nested RNTesterText
+
+
+
+
+ Toggle Weight
{' (with highlight onPress)'}
-
-
+
+
Increase Size (suppressHighlighting true)
-
+
);
}
@@ -134,27 +137,27 @@ class AdjustingFontSize extends React.Component<
}
return (
-
Truncated text is baaaaad.
-
-
+
Shrinking to fit available space is much better!
-
+
-
{'Add text to me to watch me shrink!' + ' ' + this.state.dynamicText}
-
+
-
+
-
{'Text limited by height, watch as this reeeeaaaally loooooong teeeeeeext grooooows and then shriiiinks as you add text to me! ioahsdia soady auydoa aoisyd aosdy ' +
' ' +
this.state.dynamicText}
-
+
-
-
+
{'Differently sized nested elements will shrink together. '}
-
-
+
+
{'LARGE TEXT! ' + this.state.dynamicText}
-
-
+
+
-
+
Reset
-
-
+
+
Remove Text
-
-
+
+
Add Text
-
+
);
@@ -209,17 +218,23 @@ class AdjustingFontSize extends React.Component<
function TextLinkifyExample(props: {}): React.Node {
return (
<>
- Phone number: 123-123-1234
- Link: https://www.facebook.com
- Email: employee@facebook.com
-
+
+ Phone number: 123-123-1234
+
+
+ Link: https://www.facebook.com
+
+
+ Email: employee@facebook.com
+
+
Phone number: 123-123-1234 Link: https://www.facebook.com Email:
employee@facebook.com
-
-
+
+
Phone number: 123-123-1234 Link: https://www.facebook.com Email:
employee@facebook.com
-
+
);
}
@@ -227,63 +242,72 @@ function TextLinkifyExample(props: {}): React.Node {
function TextTransformExample(props: {}): React.Node {
return (
<>
-
+
This text should be uppercased.
-
-
+
+
This TEXT SHOULD be lowercased.
-
-
+
+
This text should be CAPITALIZED.
-
-
+
+
Capitalize a date:
-
+
the 9th of november, 1998
-
-
-
+
+
+
Capitalize a 2 digit date:
- the 25th of december
-
-
- Mixed: uppercase
- LoWeRcAsE
- capitalize each word
-
-
+
+ the 25th of december
+
+
+
+ Mixed:{' '}
+
+ uppercase{' '}
+
+
+ LoWeRcAsE{' '}
+
+
+ capitalize each word
+
+
+
Should be "ABC":
-
- abc
-
-
-
+
+ abc
+
+
+
Should be "AbC":
-
- abc
-
-
-
+
+ abc
+
+
+
{
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
}
-
-
+
+
{
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
}
-
-
+
+
{
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
}
-
-
+
+
{
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
}
-
-
+
Works with other text styles
-
+
);
}
@@ -309,25 +333,25 @@ function IncludeFontPaddingExample(props: {}): React.Node {
marginBottom: 10,
}}>
- Ey
- Default
+ Ey
+ Default
-
Ey
-
- includeFontPadding: false
+
+ includeFontPadding: false
-
+
By default Android will put extra space above text to allow for
upper-case accents or other ascenders. With some fonts, this can make
text look slightly misaligned when centered vertically.
-
+
);
}
@@ -335,31 +359,33 @@ function IncludeFontPaddingExample(props: {}): React.Node {
function FontVariantsExample(props: {}): React.Node {
return (
<>
- Small Caps{'\n'}
-
+ Small Caps{'\n'}
+
+
Old Style nums 0123456789{'\n'}
-
-
+
Lining nums 0123456789{'\n'}
-
-
+
+
Tabular nums{'\n'}
1111{'\n'}
2222{'\n'}
-
-
+
+
Proportional nums{'\n'}
1111{'\n'}
2222{'\n'}
-
+
);
}
@@ -367,18 +393,27 @@ function FontVariantsExample(props: {}): React.Node {
function EllipsizeModeExample(props: {}): React.Node {
return (
<>
-
+
This very long text should be truncated with dots in the end.
-
-
- This very long text should be truncated with dots in the middle.
-
-
+
+
+ RNTesterText very long text should be truncated with dots in the middle.
+
+
This very long text should be truncated with dots in the beginning.
-
-
+
+
This very long text should be clipped and this will not be visible.
-
+
);
}
@@ -386,19 +421,21 @@ function EllipsizeModeExample(props: {}): React.Node {
function FontFamilyExample(props: {}): React.Node {
return (
<>
- Sans-Serif
-
+ Sans-Serif
+
Sans-Serif Bold
-
- Serif
- Serif Bold
- Monospace
-
+
+ Serif
+
+ Serif Bold
+
+ Monospace
+
Monospace Bold (After 5.0)
-
-
+
+
Unknown Font Family
-
+
);
}
@@ -406,7 +443,7 @@ function FontFamilyExample(props: {}): React.Node {
function TextShadowExample(props: {}): React.Node {
return (
<>
-
Demo text shadow
-
+
);
}
@@ -422,23 +459,25 @@ function TextShadowExample(props: {}): React.Node {
function AllowFontScalingExample(props: {}): React.Node {
return (
<>
-
+
By default, text will respect Text Size accessibility setting on
Android. It means that all font sizes will be increased or decreased
depending on the value of the Text Size setting in the OS's Settings
app.
-
-
+
+
You can disable scaling for your Text component by passing {'"'}
allowFontScaling={'{'}false{'}"'} prop.
-
-
+
+
This text will not scale.{' '}
-
+
This text also won't scale because it inherits "allowFontScaling" from
its parent.
-
-
+
+
);
}
@@ -446,22 +485,26 @@ function AllowFontScalingExample(props: {}): React.Node {
function NumberOfLinesExample(props: {}): React.Node {
return (
<>
-
+
Maximum of one line no matter now much I write here. If I keep writing
it{"'"}ll just truncate after one line
-
-
+
+
Maximum of one line no matter now much I write here. If I keep writing
it{"'"}ll just truncate after one line
-
-
- Maximum of two lines no matter now much I write here. If I keep writing
- it{"'"}ll just truncate after two lines
-
-
+
+
+ RNTesterText of two lines no matter now much I write here. If I keep
+ writing it{"'"}ll just truncate after two lines
+
+
No maximum lines specified no matter now much I write here. If I keep
writing it{"'"}ll just keep going and going
-
+
);
}
@@ -469,18 +512,24 @@ function NumberOfLinesExample(props: {}): React.Node {
function HyphenationExample(props: {}): React.Node {
return (
<>
-
- Normal:
+
+ Normal:
WillHaveAHyphenWhenBreakingForNewLine
-
-
- None:
+
+
+ None:
WillNotHaveAHyphenWhenBreakingForNewLine
-
-
- Full:
+
+
+ Full:
WillHaveAHyphenWhenBreakingForNewLine
-
+
);
}
@@ -488,26 +537,30 @@ function HyphenationExample(props: {}): React.Node {
function FontWeightExample(props: {}): React.Node {
return (
<>
- Move fast and be bold
- Move fast and be normal
- FONT WEIGHT 900
- FONT WEIGHT 800
- FONT WEIGHT 700
- FONT WEIGHT 600
- FONT WEIGHT 500
- FONT WEIGHT 400
- FONT WEIGHT 300
- FONT WEIGHT 200
- FONT WEIGHT 100
- FONT WEIGHT 900
- FONT WEIGHT 800
- FONT WEIGHT 700
- FONT WEIGHT 600
- FONT WEIGHT 500
- FONT WEIGHT 400
- FONT WEIGHT 300
- FONT WEIGHT 200
- FONT WEIGHT 100
+
+ Move fast and be bold
+
+
+ Move fast and be normal
+
+ FONT WEIGHT 900
+ FONT WEIGHT 800
+ FONT WEIGHT 700
+ FONT WEIGHT 600
+ FONT WEIGHT 500
+ FONT WEIGHT 400
+ FONT WEIGHT 300
+ FONT WEIGHT 200
+ FONT WEIGHT 100
+ FONT WEIGHT 900
+ FONT WEIGHT 800
+ FONT WEIGHT 700
+ FONT WEIGHT 600
+ FONT WEIGHT 500
+ FONT WEIGHT 400
+ FONT WEIGHT 300
+ FONT WEIGHT 200
+ FONT WEIGHT 100
);
}
@@ -515,30 +568,30 @@ function FontWeightExample(props: {}): React.Node {
function BackgroundColorExample(props: {}): React.Node {
return (
<>
-
+
Red background,
-
+
{' '}
blue background,
-
+
{' '}
inherited blue background,
-
+
{' '}
nested green background.
-
-
-
-
-
+
+
+
+
+
Same alpha as background,
-
+
Inherited alpha from background,
-
+
Reapply alpha
-
-
-
+
+
+
);
}
@@ -550,16 +603,16 @@ function ContainerBackgroundColorExample(props: {}): React.Node {
-
+
Default containerBackgroundColor (inherited) + backgroundColor wash
-
-
+
{"containerBackgroundColor: 'transparent' + backgroundColor wash"}
-
+
);
}
@@ -567,24 +620,33 @@ function ContainerBackgroundColorExample(props: {}): React.Node {
function TextDecorationExample(props: {}): React.Node {
return (
<>
- Solid underline
- None textDecoration
-
+ Solid underline
+
+
+ None textDecoration
+
+
Solid line-through
-
-
+
+
Both underline and line-through
-
-
+
+
Mixed text with{' '}
- underline and{' '}
- line-through{' '}
+
+ underline
+ {' '}
+ and{' '}
+
+ line-through
+ {' '}
text nodes
-
+
);
}
@@ -592,7 +654,7 @@ function TextDecorationExample(props: {}): React.Node {
function NestedExample(props: {}): React.Node {
return (
<>
- console.log('1st')}>
+ console.log('1st')}>
(Normal text,
(R)red
@@ -631,14 +693,16 @@ function NestedExample(props: {}): React.Node {
)
)
-
- console.log('1st')}>
+
+ console.log('1st')}>
(Serif
- console.log('2nd')}>
(Serif Bold Italic
- console.log('3rd')}>
(Monospace Normal
- console.log('4th')}>
(Sans-Serif Bold
- console.log('5th')}>
(and Sans-Serif Normal)
-
+
)
-
+
)
-
+
)
-
+
)
-
-
+
+
Entity Name
-
-
- Nested text with size 8, size 23,
+
+
+ Nested text with size 8,{' '}
+ size 23,
and size 8 again
-
+
Nested text with red color,{' '}
blue color,
and red color again
-
+
(opacity
-
+
(is inherited
-
+
(and accumulated
-
+
(and also applies to the background)
-
+
)
-
+
)
-
+
)
-
+
);
}
@@ -697,26 +762,26 @@ function NestedExample(props: {}): React.Node {
function TextAlignExample(props: {}): React.Node {
return (
- auto (default) - english LTR
- أحب اللغة العربية auto (default) - arabic RTL
-
+ auto (default) - english LTR
+ أحب اللغة العربية auto (default) - arabic RTL
+
left left left left left left left left left left left left left left
left
-
-
+
+
center center center center center center center center center center
center
-
-
+
+
right right right right right right right right right right right right
right
-
-
+
+
justify (works when api level >= 26 otherwise fallbacks to "left"): this
text component{"'"}s contents are laid out with "textAlign: justify" and
as you can see all of the lines except the last one span the available
width of the parent container.
-
+
);
}
@@ -726,24 +791,24 @@ function UnicodeExample(props: {}): React.Node {
<>
-
+
星际争霸是世界上最好的游戏。
-
+
-
+
星际争霸是世界上最好的游戏。
-
+
-
+
星际争霸是世界上最好的游戏。
-
+
-
+
星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
-
+
@@ -755,62 +820,69 @@ function AndroidMaterialDesignFonts(props: {}): React.Node {
<>
- Roboto Regular
-
+
+ Roboto Regular
+
+
Roboto Italic
-
-
+
+
Roboto Bold
-
-
+
Roboto Bold Italic
-
- Roboto Light
-
+
+
+ Roboto Light
+
+
Roboto Light Italic
-
-
+
+
Roboto Thin (After 4.2)
-
-
+
+
Roboto Thin Italic (After 4.2)
-
-
+
+
Roboto Condensed
-
-
+
Roboto Condensed Italic
-
-
+
Roboto Condensed Bold
-
-
+
Roboto Condensed Bold Italic
-
-
+
+
Roboto Medium (After 5.0)
-
-
+
+
Roboto Medium Italic (After 5.0)
-
+
@@ -822,54 +894,56 @@ function CustomFontsExample(props: {}): React.Node {
<>
- NotoSerif Regular
-
+ NotoSerif Regular
+
+
NotoSerif Bold Italic
-
-
+
+
NotoSerif Italic (Missing Font file)
-
-
+
Rubik Regular
-
-
+
Rubik Light
-
-
+
Rubik Bold
-
-
+
Rubik Medium
-
-
+
Rubik Medium Italic
-
+
@@ -879,7 +953,7 @@ function CustomFontsExample(props: {}): React.Node {
function LineHeightExample(props: {}): React.Node {
return (
<>
-
Holisticly formulate inexpensive ideas before best-of-breed benefits.{' '}
- Continually expedite magnetic
- potentialities rather than client-focused interfaces.
-
- Continually expedite
+ magnetic potentialities rather than client-focused interfaces.
+
+
Holisticly formulate inexpensive ideas before best-of-breed benefits.{' '}
- Continually expedite magnetic
- potentialities rather than client-focused interfaces.
-
- Continually expedite
+ magnetic potentialities rather than client-focused interfaces.
+
+
Holisticly formulate
-
-
+
Holisticly formulate
-
+
);
}
@@ -945,11 +1019,17 @@ function LetterSpacingExample(props: {}): React.Node {
return (
<>
- letterSpacing = 0
- letterSpacing = 2
- letterSpacing = 9
+
+ letterSpacing = 0
+
+
+ letterSpacing = 2
+
+
+ letterSpacing = 9
+
-
With size and background color
-
+
-
+
letterSpacing = -1
-
-
+
[letterSpacing = 3]
-
+
[Nested letterSpacing = 0]
-
-
+
+
[Nested letterSpacing = 6]
-
-
+
+
);
@@ -985,11 +1065,11 @@ function TextBaseLineLayoutExample(props: {}): React.Node {
const texts = [];
for (let i = 9; i >= 0; i--) {
texts.push(
-
{i}
- ,
+ ,
);
}
@@ -1000,24 +1080,28 @@ function TextBaseLineLayoutExample(props: {}): React.Node {
return (
- {'Nested s:'}
+ {'Nested s:'}
{marker}
- {texts}
+ {texts}
{marker}
- {'Array of s in :'}
+
+ {'Array of s in :'}
+
{marker}
{texts}
{marker}
- {'Interleaving and :'}
+
+ {'Interleaving and :'}
+
{marker}
-
+
Some text.
{marker}
- Text inside View.
+ Text inside View.
{marker}
-
+
{marker}
-
+
{'Multi-line interleaved and :'}
-
+
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
venenatis,{' '}
- mauris eu commodo maximus
+ mauris eu commodo maximus
{' '}
, ante arcu vestibulum ligula, et scelerisque diam.
-
+
- {'Multi-line alignment'}
+
+ {'Multi-line alignment'}
+
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
+
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
+
- {':'}
+ {':'}
{marker}
{texts}
{marker}
- {':'}
+
+ {':'}
+
{marker}
@@ -1093,14 +1181,14 @@ const examples = [
render(): React.Node {
return (
-
Text with background color only
-
-
+
Text with background color and uniform borderRadii
-
-
+
Text with background color and non-uniform borders
-
-
+
Text with borderWidth
-
-
+
Text with background AND borderWidth
-
+
);
},
@@ -1168,10 +1256,10 @@ const examples = [
name: 'wrap',
render(): React.Node {
return (
-
+
The text should wrap if it goes on multiple lines. See, this is going
to the next line.
-
+
);
},
},
@@ -1187,9 +1275,9 @@ const examples = [
name: 'padding',
render(): React.Node {
return (
-
+
This text is indented by 10px padding on all sides.
-
+
);
},
},
@@ -1227,8 +1315,8 @@ const examples = [
render(): React.Node {
return (
<>
- Size 23
- Size 8
+ Size 23
+ Size 8
);
},
@@ -1258,8 +1346,12 @@ const examples = [
render(): React.Node {
return (
<>
- Move fast and be italic
- Move fast and be normal
+
+ Move fast and be italic
+
+
+ Move fast and be normal
+
);
},
@@ -1269,9 +1361,9 @@ const examples = [
name: 'fontStyleAndWeight',
render(): React.Node {
return (
-
+
Move fast and be both bold and italic
-
+
);
},
},
@@ -1308,9 +1400,9 @@ const examples = [
name: 'spaces',
render(): React.Node {
return (
-
+
A {'generated'} {'string'} and some spaces
-
+
);
},
},
@@ -1375,10 +1467,10 @@ const examples = [
name: 'selectable',
render(): React.Node {
return (
-
+
This text is selectable if you click-and-hold, and will offer the
native Android selection menus.
-
+
);
},
},
@@ -1387,9 +1479,9 @@ const examples = [
name: 'selectionColor',
render(): React.Node {
return (
-
+
This text will have a orange highlight on selection.
-
+
);
},
},
@@ -1474,7 +1566,7 @@ const examples = [
title: 'Substring Emoji (should only see "test")',
name: 'substringEmoji',
render(): React.Node {
- return {'test🙃'.substring(0, 5)};
+ return {'test🙃'.substring(0, 5)};
},
},
@@ -1498,7 +1590,9 @@ const examples = [
render(): React.Node {
return (
- Text element is selectable
+
+ Text element is selectable
+
);
},
@@ -1509,19 +1603,22 @@ const examples = [
render(): React.Node {
return (
-
+
Text element aligned to the top via textAlignVertical
-
-
+
+
Text element aligned to the top via verticalAlign
-
-
+
Text element aligned to the middle via textAlignVertical
-
-
+
+
Text element aligned to the middle via verticalAlign
-
+
);
},
@@ -1532,7 +1629,7 @@ const examples = [
render: function (): React.Node {
return (
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
+
);
},
@@ -1555,7 +1652,7 @@ const examples = [
render: function (): React.Node {
return (
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
+
);
},