/**
* 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
*/
/* eslint-disable react-native/no-inline-styles */
'use strict';
const React = require('react');
const ReactNative = require('react-native');
const {Image, StyleSheet, Text, View} = ReactNative;
const RNTesterBlock = require('./RNTesterBlock');
const RNTesterPage = require('./RNTesterPage');
const TextLegend = require('./Shared/TextLegend');
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)
);
}
}
class TextExample extends React.Component<{}> {
render() {
return (
The text should wrap if it goes on multiple lines. See, this is
going to the next line.
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)
Size 23
Size 8
Red color
Blue color
Move fast and be bold
Move fast and be bold
Move fast and be bold
Move fast and be bold
Move fast and be bold
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
星际争霸是世界上最好的游戏。
星际争霸是世界上最好的游戏。
星际争霸是世界上最好的游戏。
星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
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.
This text contains an inline image{' '}
. Neat, huh?
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.
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
);
}
}
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 ;
},
},
];