/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @flow
*/
'use strict';
var React = require('react-native');
var {
Image,
StyleSheet,
Text,
View,
} = React;
var Entity = React.createClass({
render: function() {
return (
{this.props.children}
);
}
});
var AttributeToggler = React.createClass({
getInitialState: function() {
return {fontWeight: 'bold', fontSize: 15};
},
toggleWeight: function() {
this.setState({
fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
});
},
increaseSize: function() {
this.setState({
fontSize: this.state.fontSize + 1
});
},
render: function() {
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
);
}
});
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 23
Size 8
);
},
}, {
title: 'Color',
render: function() {
return (
Red color
Blue 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 text
Italic text
);
},
}, {
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
أحب اللغة العربية 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(): ReactElement {
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 images',
render: function() {
return (
This text contains an inline image . Neat, huh?
);
},
}];
var styles = StyleSheet.create({
backgroundColorText: {
margin: 5,
marginBottom: 0,
backgroundColor: 'rgba(100, 100, 100, 0.3)'
},
});