/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
'use strict';
const RNTesterBlock = require('../../components/RNTesterBlock');
const RNTesterPage = require('../../components/RNTesterPage');
const React = require('react');
const TextInlineView = require('../../components/TextInlineView');
const TextLegend = require('../../components/TextLegend');
const {LayoutAnimation, StyleSheet, Text, View} = require('react-native');
class Entity extends React.Component<{|children: React.Node|}> {
render() {
return (
{this.props.children}
);
}
}
class AttributeToggler extends React.Component<{...}, $FlowFixMeState> {
state = {fontWeight: 'bold', fontSize: 15};
toggleWeight = () => {
this.setState({
fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold',
});
};
increaseSize = () => {
this.setState({
fontSize: this.state.fontSize + 1,
});
};
render() {
const curStyle = {
fontWeight: this.state.fontWeight,
fontSize: this.state.fontSize,
};
return (
Tap the controls below to change attributes.
See how it will even work on{' '}
this nested text
Toggle Weight
{' (with highlight onPress)'}
Increase Size (suppressHighlighting true)
);
}
}
type AdjustingFontSizeProps = $ReadOnly<{||}>;
type AdjustingFontSizeState = {|
dynamicText: string,
shouldRender: boolean,
|};
class AdjustingFontSize extends React.Component<
AdjustingFontSizeProps,
AdjustingFontSizeState,
> {
state = {
dynamicText: '',
shouldRender: true,
};
reset = () => {
LayoutAnimation.easeInEaseOut();
this.setState({
shouldRender: false,
});
setTimeout(() => {
LayoutAnimation.easeInEaseOut();
this.setState({
dynamicText: '',
shouldRender: true,
});
}, 300);
};
addText = () => {
this.setState({
dynamicText:
this.state.dynamicText +
(Math.floor((Math.random() * 10) % 2) ? ' foo' : ' bar'),
});
};
removeText = () => {
this.setState({
dynamicText: this.state.dynamicText.slice(
0,
this.state.dynamicText.length - 4,
),
});
};
render() {
if (!this.state.shouldRender) {
return ;
}
return (
Truncated text is baaaaad.
Shrinking to fit available space is much better!
{'Add text to me to watch me shrink!' + ' ' + this.state.dynamicText}
{'Multiline text component shrinking is supported, watch as this reeeeaaaally loooooong teeeeeeext grooooows and then shriiiinks as you add text to me! ioahsdia soady auydoa aoisyd aosdy ' +
' ' +
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
);
}
}
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:
WillHaveAnHyphenWhenBreakingForNewLine
None:
WillNotHaveAnHyphenWhenBreakingForNewLine
Full:
WillHaveAnHyphenWhenBreakingForNewLine
High:
WillHaveAnHyphenWhenBreakingForNewLine
Balanced:
WillHaveAnHyphenWhenBreakingForNewLine
This text is indented by 10px padding on all sides.
Sans-Serif
Sans-Serif Bold
Serif
Serif Bold
Monospace
Monospace Bold (After 5.0)
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
Size 23
Size 8
Red color
Blue color
Move fast and be bold
Move fast and be normal
Move fast and be italic
Move fast and be normal
Move fast and be both bold and italic
Solid underline
None textDecoration
Solid line-through
Both underline and line-through
Mixed text with{' '}
underline and{' '}
line-through
{' '}
text nodes
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('4th')}>
(and tiny normal blue)
)
)
)
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
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.
星际争霸是世界上最好的游戏。
星际争霸是世界上最好的游戏。
星际争霸是世界上最好的游戏。
星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
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
Default containerBackgroundColor (inherited) + backgroundColor wash
{"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 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
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.
This text is selectable if you click-and-hold, and will offer the
native Android selection menus.
This text will have a orange highlight on selection.
Demo text shadow
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.
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'}
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.
This text should be uppercased.
This TEXT SHOULD be lowercased.
This text should be CAPITALIZED.
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
{'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
Phone number: 123-123-1234 Link: https://www.facebook.com Email:
employee@facebook.com
);
}
}
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',
},
});
exports.title = '';
exports.description = 'Base component for rendering styled text.';
exports.examples = [
{
title: 'Basic text',
render: function(): React.Element {
return ;
},
},
];