/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @flow
* @providesModule TextExample
*/
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
Image,
StyleSheet,
Text,
View,
} = ReactNative;
var RNTesterBlock = require('./RNTesterBlock');
var RNTesterPage = require('./RNTesterPage');
class Entity extends React.Component<$FlowFixMeProps> {
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() {
var 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<{}> {
static title = '';
static description = 'Base component for rendering styled text.';
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.
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
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.
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.
);
}
}
var 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',
}
});
module.exports = TextExample;