/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @providesModule TextExample
*/
'use strict';
const Platform = require('Platform');
var React = require('react');
var createReactClass = require('create-react-class');
var ReactNative = require('react-native');
var {Image, Text, TextInput, View, LayoutAnimation, Button} = ReactNative;
type TextAlignExampleRTLState = {|
isRTL: boolean,
|};
class TextAlignRTLExample extends React.Component<*, TextAlignExampleRTLState> {
constructor(...args: Array<*>) {
super(...args);
this.state = {
isRTL: false,
};
}
render() {
const {isRTL} = this.state;
const toggleRTL = () => this.setState({isRTL: !isRTL});
return (
auto (default) - english LTR
{'\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 ' +
'\u0627\u0644\u0639\u0631\u0628\u064A\u0629 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: 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.
);
}
}
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
Increase Size
);
}
}
var AdjustingFontSize = createReactClass({
displayName: 'AdjustingFontSize',
getInitialState: function() {
return {dynamicText: '', shouldRender: true};
},
reset: function() {
LayoutAnimation.easeInEaseOut();
this.setState({
shouldRender: false,
});
setTimeout(() => {
LayoutAnimation.easeInEaseOut();
this.setState({
dynamicText: '',
shouldRender: true,
});
}, 300);
},
addText: function() {
this.setState({
dynamicText:
this.state.dynamicText +
(Math.floor((Math.random() * 10) % 2) ? ' foo' : ' bar'),
});
},
removeText: function() {
this.setState({
dynamicText: this.state.dynamicText.slice(
0,
this.state.dynamicText.length - 4,
),
});
},
render: function() {
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}
{'Differently sized nested elements will shrink together. '}
{'LARGE TEXT! ' + this.state.dynamicText}
Reset
Remove Text
Add Text
);
},
});
class TextBaseLineLayoutExample extends React.Component<*, *> {
render() {
var texts = [];
for (var i = 9; i >= 0; i--) {
texts.push({i});
}
const marker = ;
const subtitleStyle = {fontSize: 16, marginTop: 8, fontWeight: 'bold'};
return (
{'Nested s:'}
{marker}
{texts}
{marker}
{'Array of s in :'}
{marker}
{texts}
{marker}
{'Interleaving and :'}
{marker}
Some text.
{marker}
Text inside View.
{marker}
{marker}
{':'}
{marker}
{texts}
{marker}
{':'}
{marker}
{texts}
{marker}
);
}
}
exports.title = '';
exports.description = 'Base component for rendering styled text.';
exports.displayName = 'TextExample';
exports.examples = [
{
title: 'Wrap',
render: function() {
return (
The text should wrap if it goes on multiple lines. See, this is going
to the next line.
);
},
},
{
title: 'Padding',
render: function() {
return (
This text is indented by 10px padding on all sides.
);
},
},
{
title: 'Font Family',
render: function() {
return (
Cochin
Cochin bold
Helvetica
Helvetica bold
Verdana
Verdana bold
);
},
},
{
title: 'Font Size',
render: function() {
return (
Size 23Size 8
);
},
},
{
title: 'Color',
render: function() {
return (
Red colorBlue color
);
},
},
{
title: 'Font Weight',
render: function() {
return (
Move fast and be ultralight
Move fast and be light
Move fast and be normal
Move fast and be bold
Move fast and be ultrabold
);
},
},
{
title: 'Font Style',
render: function() {
return (
Normal textItalic text
);
},
},
{
title: 'Selectable',
render: function() {
return (
This text is selectable if
you click-and-hold.
);
},
},
{
title: 'Text Decoration',
render: function() {
return (
Solid underline
Double underline with custom color
Dashed underline with custom color
Dotted underline with custom color
None textDecoration
Solid line-through
Double line-through with custom color
Dashed line-through with custom color
Dotted line-through with custom color
Both underline and line-through
);
},
},
{
title: 'Nested',
description:
'Nested text components will inherit the styles of their ' +
'parents (only backgroundColor is inherited from non-Text parents). ' +
' only supports other and raw text (strings) as children.',
render: function() {
return (
(Normal text,
(and bold
(and tiny inherited bold blue)
)
)
(opacity
(is inherited
(and accumulated
(and also applies to the background)
)
)
)
Entity Name
);
},
},
{
title: 'Text Align',
render: function() {
return (
auto (default) - english LTR
{'\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 ' +
'\u0627\u0644\u0639\u0631\u0628\u064A\u0629 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: 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.
);
},
},
{
title: 'Letter Spacing',
render: function() {
return (
letterSpacing = 0
letterSpacing = 2
letterSpacing = 9
letterSpacing = -1
);
},
},
{
title: 'Spaces',
render: function() {
return (
A {'generated'} {' '} {'string'} and some spaces
);
},
},
{
title: 'Line Height',
render: function() {
return (
A lot of space between the lines of this long passage that should
wrap once.
);
},
},
{
title: 'Empty Text',
description: "It's ok to have Text with zero or null children.",
render: function() {
return ;
},
},
{
title: 'Toggling Attributes',
render: function(): React.Element {
return ;
},
},
{
title: 'backgroundColor attribute',
description: 'backgroundColor is inherited from all types of views.',
render: function() {
return (
Yellow container background,
{' '}
red background,
{' '}
blue background,
{' '}
inherited blue background,
{' '}
nested green background.
);
},
},
{
title: 'numberOfLines attribute',
render: function() {
return (
Maximum of one line, no matter how much I write here. If I keep
writing, it{"'"}ll just truncate after one line.
Maximum of two lines, no matter how much I write here. If I keep
writing, it{"'"}ll just truncate after two lines.
No maximum lines specified, no matter how much I write here. If I
keep writing, it{"'"}ll just keep going and going.
);
},
},
{
title: 'Text highlighting (tap the link to see highlight)',
render: function() {
return (
Lorem ipsum dolor sit amet,{' '}
null}>
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
{' '}
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
);
},
},
{
title: 'allowFontScaling attribute',
render: function() {
return (
By default, text will respect Text Size accessibility setting on
iOS. It means that all font sizes will be increased or descreased
depending on the value of Text Size setting in{' '}
Settings.app - Display & Brightness - Text Size
You can disable scaling for your Text component by passing {'"'}allowFontScaling={'{'}false{'}"'}{' '}
prop.
This text will not scale.
);
},
},
{
title: 'Inline views',
render: function() {
return (
This text contains an inline blue view{' '}
{' '}
and an inline image{' '}
. Neat, huh?
);
},
},
{
title: 'Text shadow',
render: function() {
return (
Demo text shadow
);
},
},
{
title: 'Ellipsize mode',
render: function() {
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 looooooooooooooooooooooooooooong text should be clipped.
);
},
},
{
title: 'Font variants',
render: function() {
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'}
);
},
},
{
title: 'Nested content',
render: function() {
return (
This text has a view
which hasanother text inside.
And moreover, it has another view
with another text inside!
Because we need to go deeper.
);
},
},
{
title: 'Dynamic Font Size Adjustment',
render: function(): React.Element {
return ;
},
},
{
title: 'Text Align with RTL',
render: function() {
return ;
},
},
{
title: 'Text `alignItems: \'baseline\'` style',
render: function() {
return ;
},
},
];