diff --git a/packages/rn-tester/js/examples/Text/TextExample.android.js b/packages/rn-tester/js/examples/Text/TextExample.android.js
index 28dc76ac9c9aad..56383c78431015 100644
--- a/packages/rn-tester/js/examples/Text/TextExample.android.js
+++ b/packages/rn-tester/js/examples/Text/TextExample.android.js
@@ -202,745 +202,712 @@ class AdjustingFontSize extends React.Component<
}
}
-class TextExample extends React.Component<{...}> {
- render(): React.Node {
- return (
-
-
-
-
-
-
-
-
-
- The text should wrap if it goes on multiple lines. See, this is
- going to the next line.
-
-
-
-
- Normal:
- WillHaveAHyphenWhenBreakingForNewLine
-
-
- None:
- WillNotHaveAHyphenWhenBreakingForNewLine
-
-
- Full:
- WillHaveAHyphenWhenBreakingForNewLine
-
-
-
-
- This text is indented by 10px padding on all sides.
-
-
-
-
-
-
- Sans-Serif
-
- Sans-Serif Bold
-
- Serif
-
- Serif Bold
-
- Monospace
-
- Monospace Bold (After 5.0)
-
-
- Unknown Font Family
-
-
-
-
-
- Roboto Regular
-
- Roboto Italic
-
-
- Roboto Bold
-
-
- Roboto Bold Italic
-
- 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)
-
-
-
-
-
-
-
- NotoSerif Regular
-
- NotoSerif Bold Italic
-
-
- NotoSerif Italic (Missing Font file)
-
-
- Rubik Regular
-
-
- Rubik Light
-
-
- Rubik Bold
-
-
- Rubik Medium
-
-
- Rubik Medium Italic
-
-
-
-
+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
+
+
+ );
+}
-
- Size 23
- Size 8
-
-
- Red color
- Blue color
-
-
- 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 italic
- Move fast and be normal
-
-
-
- Move fast and be both bold and italic
-
-
-
- Solid underline
- None textDecoration
+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
+
+
+ Should be "ABC":
+
+ abc
+
+
+
+ Should be "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
+
+
+ );
+}
+
+function IncludeFontPaddingExample(props: {}): React.Node {
+ return (
+ <>
+
+
+ Ey
+ Default
+
+
- Solid line-through
-
-
- Both underline and line-through
+ style={[
+ styles.includeFontPaddingText,
+ {includeFontPadding: false, marginLeft: 10},
+ ]}>
+ Ey
+ 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.
+
+
+ );
+}
+
+function FontVariantsExample(props: {}): React.Node {
+ return (
+ <>
+ 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'}
+
+
+ );
+}
+
+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.
+
+
+ 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.
+
+
+ );
+}
+
+function FontFamilyExample(props: {}): React.Node {
+ return (
+ <>
+ Sans-Serif
+
+ Sans-Serif Bold
+
+ Serif
+ Serif Bold
+ Monospace
+
+ Monospace Bold (After 5.0)
+
+
+ Unknown Font Family
+
+
+ );
+}
+
+function TextShadowExample(props: {}): React.Node {
+ return (
+ <>
+
+ Demo text shadow
+
+
+ );
+}
+
+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.
+
+
+
+ );
+}
+
+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
+
+
+ No maximum lines specified no matter now much I write here. If I keep
+ writing it{"'"}ll just keep going and going
+
+
+ );
+}
+
+function HyphenationExample(props: {}): React.Node {
+ return (
+ <>
+
+ Normal:
+ WillHaveAHyphenWhenBreakingForNewLine
+
+
+ None:
+ WillNotHaveAHyphenWhenBreakingForNewLine
+
+
+ Full:
+ WillHaveAHyphenWhenBreakingForNewLine
+
+
+ );
+}
+
+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
+
+ );
+}
+
+function BackgroundColorExample(props: {}): React.Node {
+ return (
+ <>
+
+ Red background,
+
+ {' '}
+ blue background,
- Mixed text with{' '}
- underline and{' '}
-
- line-through
- {' '}
- text nodes
+ {' '}
+ inherited blue background,
+
+ {' '}
+ nested green background.
+
+
+
+
+
+ Same alpha as background,
+
+ Inherited alpha from background,
+
+ Reapply alpha
-
-
- console.log('1st')}>
- (Normal text,
-
- (R)red
-
- (G)green
-
- (B)blue
-
- (C)cyan
-
- (M)magenta
-
- (Y)yellow
-
- (K)black
-
-
+
+
+
+ );
+}
+
+function ContainerBackgroundColorExample(props: {}): React.Node {
+ return (
+ <>
+
+
+
+
+
+ Default containerBackgroundColor (inherited) + backgroundColor wash
+
+
+ {"containerBackgroundColor: 'transparent' + backgroundColor wash"}
+
+
+ );
+}
+
+function TextDecorationExample(props: {}): React.Node {
+ return (
+ <>
+ Solid underline
+ None textDecoration
+
+ Solid line-through
+
+
+ Both underline and line-through
+
+
+ Mixed text with{' '}
+ underline and{' '}
+ line-through{' '}
+ text nodes
+
+
+ );
+}
+
+function NestedExample(props: {}): React.Node {
+ return (
+ <>
+ console.log('1st')}>
+ (Normal text,
+
+ (R)red
+
+ (G)green
+
+ (B)blue
+
+ (C)cyan
+
+ (M)magenta
+
+ (Y)yellow
+
+ (K)black
+
+
+ console.log('2nd')}>
+ (and bold
+ console.log('3rd')}>
+ (and tiny bold italic blue
console.log('2nd')}>
- (and bold
- console.log('3rd')}>
- (and tiny bold italic blue
- console.log('4th')}>
- (and tiny normal blue)
-
- )
-
- )
+ style={{fontWeight: 'normal', fontStyle: 'normal'}}
+ onPress={() => console.log('4th')}>
+ (and tiny normal blue)
)
+ )
+
+ )
+
+ console.log('1st')}>
+ (Serif
+ console.log('2nd')}>
+ (Serif Bold Italic
console.log('1st')}>
- (Serif
+ style={{
+ fontFamily: 'monospace',
+ fontStyle: 'normal',
+ fontWeight: 'normal',
+ }}
+ onPress={() => console.log('3rd')}>
+ (Monospace Normal
console.log('2nd')}>
- (Serif Bold Italic
+ style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}
+ onPress={() => console.log('4th')}>
+ (Sans-Serif Bold
console.log('3rd')}>
- (Monospace Normal
- console.log('4th')}>
- (Sans-Serif Bold
- console.log('5th')}>
- (and Sans-Serif Normal)
-
- )
-
- )
+ style={{fontWeight: 'normal'}}
+ onPress={() => console.log('5th')}>
+ (and Sans-Serif Normal)
)
)
-
- Entity Name
-
-
- Nested text with size 8,{' '}
- size 23,
- and size 8 again
-
-
- Nested text with red color,{' '}
- blue color,
- and red color again
-
-
-
- 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.
+ )
+
+ )
+
+
+ Entity Name
+
+
+ Nested text with size 8, size 23,
+ and size 8 again
+
+
+ Nested text with red color,{' '}
+ blue color,
+ and red color again
+
+
+ );
+}
+
+function TextAlignExample(props: {}): React.Node {
+ return (
+ <>
+ 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.
+
+
+ );
+}
+
+function UnicodeExample(props: {}): React.Node {
+ return (
+ <>
+
+
+
+ 星际争霸是世界上最好的游戏。
-
-
-
-
-
- 星际争霸是世界上最好的游戏。
-
-
-
-
- 星际争霸是世界上最好的游戏。
-
-
-
-
- 星际争霸是世界上最好的游戏。
-
-
-
-
- 星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
-
-
-
-
-
-
- A {'generated'} {'string'} and some spaces
+
+
+
+ 星际争霸是世界上最好的游戏。
-
-
-
- Holisticly formulate inexpensive ideas before best-of-breed
- benefits. Continually expedite
- magnetic potentialities rather than client-focused interfaces.
+
+
+
+ 星际争霸是世界上最好的游戏。
-
-
-
- letterSpacing = 0
-
- letterSpacing = 2
-
-
- letterSpacing = 9
-
-
-
- With size and background color
-
-
-
- letterSpacing = -1
-
-
- [letterSpacing = 3]
-
- [Nested letterSpacing = 0]
-
-
- [Nested letterSpacing = 6]
-
-
-
-
-
-
-
-
-
-
-
-
- Red background,
-
- {' '}
- blue background,
-
- {' '}
- inherited blue background,
-
- {' '}
- nested green background.
-
-
-
+
+
+
+ 星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
-
- Same alpha as background,
-
- Inherited alpha from background,
-
- Reapply alpha
-
-
+
+
+
+ );
+}
+
+function AndroidMaterialDesignFonts(props: {}): React.Node {
+ return (
+ <>
+
+
+ Roboto Regular
+
+ Roboto Italic
-
-
-
-
-
-
-
- Default containerBackgroundColor (inherited) + backgroundColor wash
+
+ Roboto Bold
- {"containerBackgroundColor: 'transparent' + backgroundColor wash"}
-
-
-
-
- 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
+ style={{
+ fontFamily: 'sans-serif',
+ fontStyle: 'italic',
+ fontWeight: 'bold',
+ }}>
+ Roboto Bold Italic
-
- No maximum lines specified no matter now much I write here. If I
- keep writing it{"'"}ll just keep going and going
+ Roboto Light
+
+ Roboto Light Italic
-
-
-
- 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.
+
+ Roboto Thin (After 4.2)
-
- You can disable scaling for your Text component by passing {'"'}
- allowFontScaling={'{'}false{'}"'} prop.
+
+ Roboto Thin Italic (After 4.2)
-
- This text will not scale.{' '}
-
- This text also won't scale because it inherits "allowFontScaling"
- from its parent.
-
+
+ Roboto Condensed
-
-
-
- This text is selectable if you click-and-hold, and will offer the
- native Android selection menus.
+
+ Roboto Condensed Italic
-
-
-
- This text will have a orange highlight on selection.
+
+ Roboto Condensed Bold
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Demo text shadow
+ Roboto Condensed Bold Italic
-
-
-
- This very long text should be truncated with dots in the end.
+
+ Roboto Medium (After 5.0)
-
- This very long text should be truncated with dots in the middle.
+
+ Roboto Medium Italic (After 5.0)
+
+
+
+ );
+}
+
+function CustomFontsExample(props: {}): React.Node {
+ return (
+ <>
+
+
+ NotoSerif Regular
- This very long text should be truncated with dots in the beginning.
+ style={{
+ fontFamily: 'notoserif',
+ fontStyle: 'italic',
+ fontWeight: 'bold',
+ }}>
+ NotoSerif Bold Italic
-
- This very long text should be clipped and this will not be visible.
+
+ NotoSerif Italic (Missing Font file)
-
-
- Small Caps{'\n'}
- Old Style nums 0123456789{'\n'}
+ Rubik Regular
- Lining nums 0123456789{'\n'}
-
-
- Tabular nums{'\n'}
- 1111{'\n'}
- 2222{'\n'}
-
-
- Proportional nums{'\n'}
- 1111{'\n'}
- 2222{'\n'}
+ Rubik Light
-
-
-
-
- Ey
- Default
-
-
-
- Ey
-
- 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.
+ Rubik Bold
-
-
-
- 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
-
-
-
- Should be "ABC":
-
- abc
-
-
-
- Should be "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 '
- }
+
+ Rubik Medium
-
- {
- '.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
- }
+
+ Rubik Medium Italic
+
+
+
+ );
+}
+
+function LineHeightExample(props: {}): React.Node {
+ return (
+ <>
+
+ Holisticly formulate inexpensive ideas before best-of-breed benefits.{' '}
+ Continually expedite magnetic
+ potentialities rather than client-focused interfaces.
+
+
+ );
+}
+
+function LetterSpacingExample(props: {}): React.Node {
+ return (
+ <>
+
+ letterSpacing = 0
+ letterSpacing = 2
+ letterSpacing = 9
+
- Works with other text styles
+ With size and background color
-
-
- {'test🙃'.substring(0, 5)}
-
-
- 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
+
+
+ letterSpacing = -1
+
+
+ [letterSpacing = 3]
+
+ [Nested letterSpacing = 0]
-
- Phone number: 123-123-1234 Link: https://www.facebook.com Email:
- employee@facebook.com
+
+ [Nested letterSpacing = 6]
-
-
- );
- }
+
+
+
+ );
}
-const styles = StyleSheet.create({
- backgroundColorText: {
- left: 5,
- backgroundColor: 'rgba(100, 100, 100, 0.3)',
- },
- includeFontPaddingText: {
- fontSize: 120,
- fontFamily: 'sans-serif',
- backgroundColor: '#EEEEEE',
- color: '#000000',
- textAlignVertical: 'center',
- alignSelf: 'center',
- },
- wrappedText: {
- maxWidth: 300,
- },
-});
function TextBaseLineLayoutExample(props: {}): React.Node {
const texts = [];
@@ -999,10 +966,339 @@ function TextBaseLineLayoutExample(props: {}): React.Node {
const examples = [
{
- title: 'Basic text',
- name: 'basicText',
- render: function (): React.Element {
- return ;
+ title: 'Dynamic Font Size Adjustment',
+ name: 'ajustingFontSize',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Font Size Adjustment with Dynamic Layout',
+ name: 'textAdjustsDynamicLayout',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Wrap',
+ name: 'wrap',
+ render: function (): React.Node {
+ return (
+
+ The text should wrap if it goes on multiple lines. See, this is going
+ to the next line.
+
+ );
+ },
+ },
+ {
+ title: 'Hyphenation',
+ name: 'hyphenation',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Padding',
+ name: 'padding',
+ render: function (): React.Node {
+ return (
+
+ This text is indented by 10px padding on all sides.
+
+ );
+ },
+ },
+ {
+ title: 'Text metrics legend',
+ name: 'textMetricLegend',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Font Family',
+ name: 'fontFamily',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Android Material Design Fonts',
+ name: 'androidMaterialDesignFonts',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Custom Fonts',
+ name: 'customFonts',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Font Size',
+ name: 'fontSize',
+ render: function (): React.Node {
+ return (
+ <>
+ Size 23
+ Size 8
+
+ );
+ },
+ },
+ {
+ title: 'Color',
+ name: 'color',
+ render: function (): React.Node {
+ return (
+ <>
+ Red color
+ Blue color
+
+ );
+ },
+ },
+ {
+ title: 'Font Weight',
+ name: 'fontWeight',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Font Style',
+ name: 'fontStyle',
+ render: function (): React.Node {
+ return (
+ <>
+ Move fast and be italic
+ Move fast and be normal
+
+ );
+ },
+ },
+ {
+ title: 'Font Style and Weight',
+ name: 'fontStyleAndWeight',
+ render: function (): React.Node {
+ return (
+
+ Move fast and be both bold and italic
+
+ );
+ },
+ },
+ {
+ title: 'Text Decoration',
+ name: 'textDecoration',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Nested',
+ name: 'nested',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Text Align',
+ name: 'textAlign',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Unicode',
+ name: 'unicode',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Spaces',
+ name: 'spaces',
+ render: function (): React.Node {
+ return (
+
+ A {'generated'} {'string'} and some spaces
+
+ );
+ },
+ },
+ {
+ title: 'Line Height',
+ name: 'lineHeight',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Letter Spacing',
+ name: 'letterSpacing',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Empty Text',
+ name: 'emptyText',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Toggling Attributes',
+ name: 'togglingAttributes',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'backgroundColor attribute',
+ name: 'backgroundColorAttribute',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'containerBackgroundColor attribute',
+ name: 'containerBackgroundColorAttribute',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'numberOfLines attribute',
+ name: 'numberOfLines',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'allowFontScaling attribute',
+ name: 'allowFontScaling',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'selectable attribute',
+ name: 'selectable',
+ render: function (): React.Node {
+ return (
+
+ This text is selectable if you click-and-hold, and will offer the
+ native Android selection menus.
+
+ );
+ },
+ },
+ {
+ title: 'selectionColor attribute',
+ name: 'selectionColor',
+ render: function (): React.Node {
+ return (
+
+ This text will have a orange highlight on selection.
+
+ );
+ },
+ },
+ {
+ title: 'Inline views',
+ name: 'inlineViews',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Inline views with multiple nested texts',
+ name: 'inlineViewsMultiple',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Inline image/view clipped by ',
+ name: 'inlineViewsClipped',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Relayout inline image',
+ name: 'relayoutInlineImage',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Relayout inline view',
+ name: 'relayoutInlineView',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Relayout nested inline view',
+ name: 'relayoutNestedInlineView',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Text shadow',
+ name: 'textShadow',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Ellipsize mode',
+ name: 'ellipsizeMode',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Font variants',
+ name: 'fontVariants',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Include Font Padding',
+ name: 'includeFontPadding',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Text Transform',
+ name: 'textTransform',
+ render: function (): React.Node {
+ return ;
+ },
+ },
+ {
+ title: 'Substring Emoji (should only see "test")',
+ name: 'substringEmoji',
+ render: function (): React.Node {
+ return {'test🙃'.substring(0, 5)};
+ },
+ },
+
+ {
+ title: 'Text linkify',
+ name: 'textLinkify',
+ render: function (): React.Node {
+ return ;
},
},
{
@@ -1049,6 +1345,24 @@ const examples = [
TextInlineViewsExample,
];
+const styles = StyleSheet.create({
+ backgroundColorText: {
+ left: 5,
+ backgroundColor: 'rgba(100, 100, 100, 0.3)',
+ },
+ includeFontPaddingText: {
+ fontSize: 120,
+ fontFamily: 'sans-serif',
+ backgroundColor: '#EEEEEE',
+ color: '#000000',
+ textAlignVertical: 'center',
+ alignSelf: 'center',
+ },
+ wrappedText: {
+ maxWidth: 300,
+ },
+});
+
module.exports = ({
title: 'Text',
documentationURL: 'https://reactnative.dev/docs/text',