/**
* 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 UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
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
{' (with highlight onPress)'}
Increase Size (suppressHighlighting true)
);
}
});
var TextExample = React.createClass({
statics: {
title: '',
description: 'Base component for rendering styled text.',
},
render: function() {
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
console.log('1st')}>
(Normal text,
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 contains an inline image . Neat, huh?
Demo text shadow
);
}
});
var styles = StyleSheet.create({
backgroundColorText: {
left: 5,
backgroundColor: 'rgba(100, 100, 100, 0.3)'
},
});
module.exports = TextExample;