mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Adam Comella
a2a03bc68b
Summary: Now that inline views are supported on iOS and Android, we can add some examples to RNTester. I brought back examples from https://github.com/facebook/react-native/commit/03663491c6e68409f73d5c9bbc1a2e3c02ee0966. I also added some new inline view examples in TextInlineView.js. Note that some examples are only supported on iOS because they rely on the inline view being able to size to content. Android's implementation requires that a width and height be specified on the inline view. Here are the known bugs illustrated by these examples: - ClippedByText - Expected: The image/view wraps to the next line (because it is too wide) and gets clipped vertically (because it is too tall). - iOS bug: The image/view does not get wrapped to the next line - Android bug: The view gets wrapped to the next line but doesn't get clipped vertically. The image appears to be positioned too low. - ChangeImageSize/ChangeViewSize: - Expected: The "Change Image/View Width" button causes the image/view to toggle between a width of 50 and 100. - iOS bug: First update works. Subsequent updates don't get rendered. - Android bug: No updates get rendered. - ChangeInnerViewSize: - Expected: The "Change Pink View Width" button causes the pink inner view to toggle between a width of 50 and 100. - iOS bug: First update works but second update **CRASHES** the app. - Android bug: No updates get rendered. [Internal] [Added] - Added inline view examples to RNTester Pull Request resolved: https://github.com/facebook/react-native/pull/24814 Differential Revision: D15318070 Pulled By: cpojer fbshipit-source-id: 35a4aaab88e477d627456eeb4208c509c42927df
1129 lines
31 KiB
JavaScript
1129 lines
31 KiB
JavaScript
/**
|
|
* 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
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const React = require('react');
|
|
const {
|
|
Button,
|
|
LayoutAnimation,
|
|
Platform,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} = require('react-native');
|
|
const TextAncestor = require('TextAncestor');
|
|
const TextInlineView = require('./Shared/TextInlineView');
|
|
const TextLegend = require('./Shared/TextLegend');
|
|
|
|
// TODO: Is there a cleaner way to flip the TextAncestor value to false? I
|
|
// suspect apps won't even be able to leverage this workaround because
|
|
// TextAncestor is not public.
|
|
function InlineView(props) {
|
|
return (
|
|
<TextAncestor.Provider value={false}>
|
|
<View {...props} />
|
|
</TextAncestor.Provider>
|
|
);
|
|
}
|
|
|
|
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 (
|
|
<View style={{direction: isRTL ? 'rtl' : 'ltr'}}>
|
|
<Text>auto (default) - english LTR</Text>
|
|
<Text>
|
|
{'\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 ' +
|
|
'\u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic RTL'}
|
|
</Text>
|
|
<Text style={{textAlign: 'left'}}>
|
|
left left left left left left left left left left left left left left
|
|
left
|
|
</Text>
|
|
<Text style={{textAlign: 'center'}}>
|
|
center center center center center center center center center center
|
|
center
|
|
</Text>
|
|
<Text style={{textAlign: 'right'}}>
|
|
right right right right right right right right right right right
|
|
right right
|
|
</Text>
|
|
<Text style={{textAlign: 'justify'}}>
|
|
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.
|
|
</Text>
|
|
<Button
|
|
onPress={toggleRTL}
|
|
title={`Switch to ${isRTL ? 'LTR' : 'RTL'}`}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class Entity extends React.Component<$FlowFixMeProps> {
|
|
render() {
|
|
return (
|
|
<Text style={{fontWeight: '500', color: '#527fe4'}}>
|
|
{this.props.children}
|
|
</Text>
|
|
);
|
|
}
|
|
}
|
|
|
|
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 (
|
|
<View>
|
|
<Text style={curStyle}>
|
|
Tap the controls below to change attributes.
|
|
</Text>
|
|
<Text>
|
|
<Text>
|
|
See how it will even work on{' '}
|
|
<Text style={curStyle}>this nested text</Text>
|
|
</Text>
|
|
</Text>
|
|
<Text
|
|
style={{backgroundColor: '#ffaaaa', marginTop: 5}}
|
|
onPress={this.toggleWeight}>
|
|
Toggle Weight
|
|
</Text>
|
|
<Text
|
|
style={{backgroundColor: '#aaaaff', marginTop: 5}}
|
|
onPress={this.increaseSize}>
|
|
Increase Size
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
type AdjustingFontSizeProps = $ReadOnly<{||}>;
|
|
|
|
type AdjustingFontSizeState = {|
|
|
dynamicText: string,
|
|
shouldRender: boolean,
|
|
|};
|
|
|
|
class AdjustingFontSize extends React.Component<
|
|
AdjustingFontSizeProps,
|
|
AdjustingFontSizeState,
|
|
> {
|
|
state = {
|
|
dynamicText: '',
|
|
shouldRender: true,
|
|
};
|
|
|
|
reset = () => {
|
|
LayoutAnimation.easeInEaseOut();
|
|
this.setState({
|
|
shouldRender: false,
|
|
});
|
|
setTimeout(() => {
|
|
LayoutAnimation.easeInEaseOut();
|
|
this.setState({
|
|
dynamicText: '',
|
|
shouldRender: true,
|
|
});
|
|
}, 300);
|
|
};
|
|
|
|
addText = () => {
|
|
this.setState({
|
|
dynamicText:
|
|
this.state.dynamicText +
|
|
(Math.floor((Math.random() * 10) % 2) ? ' foo' : ' bar'),
|
|
});
|
|
};
|
|
|
|
removeText = () => {
|
|
this.setState({
|
|
dynamicText: this.state.dynamicText.slice(
|
|
0,
|
|
this.state.dynamicText.length - 4,
|
|
),
|
|
});
|
|
};
|
|
|
|
render() {
|
|
if (!this.state.shouldRender) {
|
|
return <View />;
|
|
}
|
|
return (
|
|
<View>
|
|
<Text
|
|
ellipsizeMode="tail"
|
|
numberOfLines={1}
|
|
style={{fontSize: 36, marginVertical: 6}}>
|
|
Truncated text is baaaaad.
|
|
</Text>
|
|
<Text
|
|
numberOfLines={1}
|
|
adjustsFontSizeToFit={true}
|
|
style={{fontSize: 40, marginVertical: 6}}>
|
|
Shrinking to fit available space is much better!
|
|
</Text>
|
|
|
|
<Text
|
|
adjustsFontSizeToFit={true}
|
|
numberOfLines={1}
|
|
style={{fontSize: 30, marginVertical: 6}}>
|
|
{'Add text to me to watch me shrink!' + ' ' + this.state.dynamicText}
|
|
</Text>
|
|
|
|
<Text
|
|
adjustsFontSizeToFit={true}
|
|
numberOfLines={4}
|
|
style={{fontSize: 20, marginVertical: 6}}>
|
|
{'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}
|
|
</Text>
|
|
|
|
<Text
|
|
adjustsFontSizeToFit={true}
|
|
numberOfLines={1}
|
|
style={{marginVertical: 6}}>
|
|
<Text style={{fontSize: 14}}>
|
|
{'Differently sized nested elements will shrink together. '}
|
|
</Text>
|
|
<Text style={{fontSize: 20}}>
|
|
{'LARGE TEXT! ' + this.state.dynamicText}
|
|
</Text>
|
|
</Text>
|
|
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
marginTop: 5,
|
|
marginVertical: 6,
|
|
}}>
|
|
<Text style={{backgroundColor: '#ffaaaa'}} onPress={this.reset}>
|
|
Reset
|
|
</Text>
|
|
<Text style={{backgroundColor: '#aaaaff'}} onPress={this.removeText}>
|
|
Remove Text
|
|
</Text>
|
|
<Text style={{backgroundColor: '#aaffaa'}} onPress={this.addText}>
|
|
Add Text
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class TextBaseLineLayoutExample extends React.Component<*, *> {
|
|
render() {
|
|
const texts = [];
|
|
for (let i = 9; i >= 0; i--) {
|
|
texts.push(
|
|
<Text key={i} style={{fontSize: 8 + i * 5, backgroundColor: '#eee'}}>
|
|
{i}
|
|
</Text>,
|
|
);
|
|
}
|
|
|
|
const marker = (
|
|
<View style={{width: 20, height: 20, backgroundColor: 'gray'}} />
|
|
);
|
|
const subtitleStyle = {fontSize: 16, marginTop: 8, fontWeight: 'bold'};
|
|
|
|
return (
|
|
<View>
|
|
<Text style={subtitleStyle}>{'Nested <Text/>s:'}</Text>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
<Text>{texts}</Text>
|
|
{marker}
|
|
</View>
|
|
|
|
<Text style={subtitleStyle}>{'Array of <Text/>s in <View>:'}</Text>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
{texts}
|
|
{marker}
|
|
</View>
|
|
|
|
{/* iOS-only because it relies on inline views being able to size to content.
|
|
* Android's implementation requires that a width and height be specified
|
|
* on the inline view. */}
|
|
<Text style={subtitleStyle}>{'Interleaving <View> and <Text>:'}</Text>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
<Text selectable={true}>
|
|
Some text.
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'baseline',
|
|
backgroundColor: '#eee',
|
|
}}>
|
|
{marker}
|
|
<Text>Text inside View.</Text>
|
|
{marker}
|
|
</View>
|
|
</Text>
|
|
{marker}
|
|
</View>
|
|
|
|
<Text style={subtitleStyle}>{'<TextInput/>:'}</Text>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
<TextInput style={{margin: 0, padding: 0}}>{texts}</TextInput>
|
|
{marker}
|
|
</View>
|
|
|
|
<Text style={subtitleStyle}>{'<TextInput multiline/>:'}</Text>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
<TextInput multiline={true} style={{margin: 0, padding: 0}}>
|
|
{texts}
|
|
</TextInput>
|
|
{marker}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class TextRenderInfoExample extends React.Component<*, *> {
|
|
state = {
|
|
textMetrics: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
capHeight: 0,
|
|
descender: 0,
|
|
ascender: 0,
|
|
xHeight: 0,
|
|
},
|
|
numberOfTextBlocks: 1,
|
|
fontSize: 14,
|
|
};
|
|
|
|
render() {
|
|
const topOfBox =
|
|
this.state.textMetrics.y +
|
|
this.state.textMetrics.height -
|
|
(this.state.textMetrics.descender + this.state.textMetrics.capHeight);
|
|
return (
|
|
<View>
|
|
<View>
|
|
<View
|
|
style={{
|
|
position: 'absolute',
|
|
left: this.state.textMetrics.x + this.state.textMetrics.width,
|
|
top: topOfBox,
|
|
width: 5,
|
|
height: Math.ceil(
|
|
this.state.textMetrics.capHeight -
|
|
this.state.textMetrics.xHeight,
|
|
),
|
|
backgroundColor: 'red',
|
|
}}
|
|
/>
|
|
<View
|
|
style={{
|
|
position: 'absolute',
|
|
left: this.state.textMetrics.x + this.state.textMetrics.width,
|
|
top:
|
|
topOfBox +
|
|
(this.state.textMetrics.capHeight -
|
|
this.state.textMetrics.xHeight),
|
|
width: 5,
|
|
height: Math.ceil(this.state.textMetrics.xHeight),
|
|
backgroundColor: 'green',
|
|
}}
|
|
/>
|
|
<Text
|
|
style={{fontSize: this.state.fontSize}}
|
|
onTextLayout={event => {
|
|
const {lines} = event.nativeEvent;
|
|
if (lines.length > 0) {
|
|
this.setState({textMetrics: lines[lines.length - 1]});
|
|
}
|
|
}}>
|
|
{new Array(this.state.numberOfTextBlocks)
|
|
.fill('A tiny block of text.')
|
|
.join(' ')}
|
|
</Text>
|
|
</View>
|
|
<Text
|
|
onPress={() =>
|
|
this.setState({
|
|
numberOfTextBlocks: this.state.numberOfTextBlocks + 1,
|
|
})
|
|
}>
|
|
More text
|
|
</Text>
|
|
<Text
|
|
onPress={() => this.setState({fontSize: this.state.fontSize + 1})}>
|
|
Increase size
|
|
</Text>
|
|
<Text
|
|
onPress={() => this.setState({fontSize: this.state.fontSize - 1})}>
|
|
Decrease size
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class TextWithCapBaseBox extends React.Component<*, *> {
|
|
state = {
|
|
textMetrics: {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
capHeight: 0,
|
|
descender: 0,
|
|
ascender: 0,
|
|
xHeight: 0,
|
|
},
|
|
};
|
|
render() {
|
|
return (
|
|
<Text
|
|
onTextLayout={event => {
|
|
const {lines} = event.nativeEvent;
|
|
if (lines.length > 0) {
|
|
this.setState({textMetrics: lines[0]});
|
|
}
|
|
}}
|
|
style={[
|
|
{
|
|
marginTop: Math.ceil(
|
|
-(
|
|
this.state.textMetrics.ascender -
|
|
this.state.textMetrics.capHeight
|
|
),
|
|
),
|
|
marginBottom: Math.ceil(-this.state.textMetrics.descender),
|
|
},
|
|
this.props.style,
|
|
]}>
|
|
{this.props.children}
|
|
</Text>
|
|
);
|
|
}
|
|
}
|
|
|
|
exports.title = '<Text>';
|
|
exports.description = 'Base component for rendering styled text.';
|
|
exports.displayName = 'TextExample';
|
|
exports.examples = [
|
|
{
|
|
title: 'Wrap',
|
|
render: function() {
|
|
return (
|
|
<Text>
|
|
The text should wrap if it goes on multiple lines. See, this is going
|
|
to the next line.
|
|
</Text>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: "Substring Emoji (should only see 'test')",
|
|
render: function() {
|
|
return <Text>{'test🙃'.substring(0, 5)}</Text>;
|
|
},
|
|
},
|
|
{
|
|
title: 'Transparent Background Color',
|
|
render: function() {
|
|
return (
|
|
<Text style={{backgroundColor: '#00000020', padding: 10}}>
|
|
Text in a gray box!
|
|
<Text style={{backgroundColor: 'red'}}>
|
|
Another text in a (inline) red box (which is inside the gray box).
|
|
</Text>
|
|
</Text>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Text metrics',
|
|
render: function() {
|
|
return <TextRenderInfoExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Text metrics legend',
|
|
render: () => <TextLegend />,
|
|
},
|
|
{
|
|
title: 'Baseline capheight box',
|
|
render: () => (
|
|
<View style={{backgroundColor: 'red'}}>
|
|
<TextWithCapBaseBox>Some example text.</TextWithCapBaseBox>
|
|
</View>
|
|
),
|
|
},
|
|
{
|
|
title: 'Padding',
|
|
render: function() {
|
|
return (
|
|
<Text style={{padding: 10}}>
|
|
This text is indented by 10px padding on all sides.
|
|
</Text>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Family',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{fontFamily: Platform.isTV ? 'Times' : 'Cochin'}}>
|
|
Cochin
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: Platform.isTV ? 'Times' : 'Cochin',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
Cochin bold
|
|
</Text>
|
|
<Text style={{fontFamily: 'Helvetica'}}>Helvetica</Text>
|
|
<Text style={{fontFamily: 'Helvetica', fontWeight: 'bold'}}>
|
|
Helvetica bold
|
|
</Text>
|
|
<Text style={{fontFamily: Platform.isTV ? 'Courier' : 'Verdana'}}>
|
|
Verdana
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: Platform.isTV ? 'Courier' : 'Verdana',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
Verdana bold
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Size',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{fontSize: 23}}>Size 23</Text>
|
|
<Text style={{fontSize: 8}}>Size 8</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Color',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{color: 'red'}}>Red color</Text>
|
|
<Text style={{color: 'blue'}}>Blue color</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Weight',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{fontSize: 20, fontWeight: '100'}}>
|
|
Move fast and be ultralight
|
|
</Text>
|
|
<Text style={{fontSize: 20, fontWeight: '200'}}>
|
|
Move fast and be light
|
|
</Text>
|
|
<Text style={{fontSize: 20, fontWeight: 'normal'}}>
|
|
Move fast and be normal
|
|
</Text>
|
|
<Text style={{fontSize: 20, fontWeight: 'bold'}}>
|
|
Move fast and be bold
|
|
</Text>
|
|
<Text style={{fontSize: 20, fontWeight: '900'}}>
|
|
Move fast and be ultrabold
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Style',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{fontStyle: 'normal'}}>Normal text</Text>
|
|
<Text style={{fontStyle: 'italic'}}>Italic text</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Selectable',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text selectable={true}>
|
|
This text is <Text style={{fontWeight: 'bold'}}>selectable</Text> if
|
|
you click-and-hold.
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Text Decoration',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text
|
|
style={{
|
|
textDecorationLine: 'underline',
|
|
textDecorationStyle: 'solid',
|
|
}}>
|
|
Solid underline
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
textDecorationLine: 'underline',
|
|
textDecorationStyle: 'double',
|
|
textDecorationColor: '#ff0000',
|
|
}}>
|
|
Double underline with custom color
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
textDecorationLine: 'underline',
|
|
textDecorationStyle: 'dashed',
|
|
textDecorationColor: '#9CDC40',
|
|
}}>
|
|
Dashed underline with custom color
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
textDecorationLine: 'underline',
|
|
textDecorationStyle: 'dotted',
|
|
textDecorationColor: 'blue',
|
|
}}>
|
|
Dotted underline with custom color
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'none'}}>None textDecoration</Text>
|
|
<Text
|
|
style={{
|
|
textDecorationLine: 'line-through',
|
|
textDecorationStyle: 'solid',
|
|
}}>
|
|
Solid line-through
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
textDecorationLine: 'line-through',
|
|
textDecorationStyle: 'double',
|
|
textDecorationColor: '#ff0000',
|
|
}}>
|
|
Double line-through with custom color
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
textDecorationLine: 'line-through',
|
|
textDecorationStyle: 'dashed',
|
|
textDecorationColor: '#9CDC40',
|
|
}}>
|
|
Dashed line-through with custom color
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
textDecorationLine: 'line-through',
|
|
textDecorationStyle: 'dotted',
|
|
textDecorationColor: 'blue',
|
|
}}>
|
|
Dotted line-through with custom color
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'underline line-through'}}>
|
|
Both underline and line-through
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Nested',
|
|
description:
|
|
'Nested text components will inherit the styles of their ' +
|
|
'parents (only backgroundColor is inherited from non-Text parents). ' +
|
|
'<Text> only supports other <Text> and raw text (strings) as children.',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text>
|
|
(Normal text,
|
|
<Text style={{fontWeight: 'bold'}}>
|
|
(and bold
|
|
<Text style={{fontSize: 11, color: '#527fe4'}}>
|
|
(and tiny inherited bold blue)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{opacity: 0.7}}>
|
|
(opacity
|
|
<Text>
|
|
(is inherited
|
|
<Text style={{opacity: 0.7}}>
|
|
(and accumulated
|
|
<Text style={{backgroundColor: '#ffaaaa'}}>
|
|
(and also applies to the background)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{fontSize: 12}}>
|
|
<Entity>Entity Name</Entity>
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Text Align',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text>auto (default) - english LTR</Text>
|
|
<Text>
|
|
{'\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 ' +
|
|
'\u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic ' +
|
|
'RTL'}
|
|
</Text>
|
|
<Text style={{textAlign: 'left'}}>
|
|
left left left left left left left left left left left left left
|
|
left left
|
|
</Text>
|
|
<Text style={{textAlign: 'center'}}>
|
|
center center center center center center center center center
|
|
center center
|
|
</Text>
|
|
<Text style={{textAlign: 'right'}}>
|
|
right right right right right right right right right right right
|
|
right right
|
|
</Text>
|
|
<Text style={{textAlign: 'justify'}}>
|
|
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.
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Letter Spacing',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{letterSpacing: 0}}>letterSpacing = 0</Text>
|
|
<Text style={{letterSpacing: 2, marginTop: 5}}>
|
|
letterSpacing = 2
|
|
</Text>
|
|
<Text style={{letterSpacing: 9, marginTop: 5}}>
|
|
letterSpacing = 9
|
|
</Text>
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
letterSpacing: 2,
|
|
backgroundColor: 'fuchsia',
|
|
marginTop: 5,
|
|
}}>
|
|
With size and background color
|
|
</Text>
|
|
</View>
|
|
<Text style={{letterSpacing: -1, marginTop: 5}}>
|
|
letterSpacing = -1
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
letterSpacing: 3,
|
|
backgroundColor: '#dddddd',
|
|
marginTop: 5,
|
|
}}>
|
|
[letterSpacing = 3]
|
|
<Text style={{letterSpacing: 0, backgroundColor: '#bbbbbb'}}>
|
|
[Nested letterSpacing = 0]
|
|
</Text>
|
|
<Text style={{letterSpacing: 6, backgroundColor: '#eeeeee'}}>
|
|
[Nested letterSpacing = 6]
|
|
</Text>
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Spaces',
|
|
render: function() {
|
|
return (
|
|
<Text>
|
|
A {'generated'} {'string'} and some spaces
|
|
</Text>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Line Height',
|
|
render: function() {
|
|
return (
|
|
<Text>
|
|
<Text style={{lineHeight: 35}}>
|
|
A lot of space between the lines of this long passage that should
|
|
wrap once.
|
|
</Text>
|
|
</Text>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Empty Text',
|
|
description: "It's ok to have Text with zero or null children.",
|
|
render: function() {
|
|
return <Text />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Toggling Attributes',
|
|
render: function(): React.Element<any> {
|
|
return <AttributeToggler />;
|
|
},
|
|
},
|
|
{
|
|
title: 'backgroundColor attribute',
|
|
description: 'backgroundColor is inherited from all types of views.',
|
|
render: function() {
|
|
return (
|
|
<Text style={{backgroundColor: 'yellow'}}>
|
|
Yellow container background,
|
|
<Text style={{backgroundColor: '#ffaaaa'}}>
|
|
{' '}
|
|
red background,
|
|
<Text style={{backgroundColor: '#aaaaff'}}>
|
|
{' '}
|
|
blue background,
|
|
<Text>
|
|
{' '}
|
|
inherited blue background,
|
|
<Text style={{backgroundColor: '#aaffaa'}}>
|
|
{' '}
|
|
nested green background.
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'numberOfLines attribute',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text numberOfLines={1}>
|
|
Maximum of one line, no matter how much I write here. If I keep
|
|
writing, it{"'"}ll just truncate after one line.
|
|
</Text>
|
|
<Text numberOfLines={2} style={{marginTop: 20}}>
|
|
Maximum of two lines, no matter how much I write here. If I keep
|
|
writing, it{"'"}ll just truncate after two lines.
|
|
</Text>
|
|
<Text style={{marginTop: 20}}>
|
|
No maximum lines specified, no matter how much I write here. If I
|
|
keep writing, it{"'"}ll just keep going and going.
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Text highlighting (tap the link to see highlight)',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text>
|
|
Lorem ipsum dolor sit amet,{' '}
|
|
<Text
|
|
suppressHighlighting={false}
|
|
style={{
|
|
backgroundColor: 'white',
|
|
textDecorationLine: 'underline',
|
|
color: 'blue',
|
|
}}
|
|
onPress={() => null}>
|
|
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
|
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
|
|
nostrud
|
|
</Text>{' '}
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat.
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'allowFontScaling attribute',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text>
|
|
By default, text will respect Text Size accessibility setting on
|
|
iOS. It means that all font sizes will be increased or decreased
|
|
depending on the value of Text Size setting in{' '}
|
|
<Text style={{fontWeight: 'bold'}}>
|
|
Settings.app - Display & Brightness - Text Size
|
|
</Text>
|
|
</Text>
|
|
<Text style={{marginTop: 10}}>
|
|
You can disable scaling for your Text component by passing {'"'}
|
|
allowFontScaling={'{'}false{'}"'} prop.
|
|
</Text>
|
|
<Text allowFontScaling={false} style={{marginTop: 20, fontSize: 15}}>
|
|
This text will not scale.{' '}
|
|
<Text style={{fontSize: 15}}>
|
|
This text also won't scale because it inherits "allowFontScaling"
|
|
from its parent.
|
|
</Text>
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Inline views',
|
|
render: () => <TextInlineView.Basic />,
|
|
},
|
|
{
|
|
title: 'Inline image/view clipped by <Text>',
|
|
render: () => <TextInlineView.ClippedByText />,
|
|
},
|
|
{
|
|
title: 'Relayout inline image',
|
|
render: () => <TextInlineView.ChangeImageSize />,
|
|
},
|
|
{
|
|
title: 'Relayout inline view',
|
|
render: () => <TextInlineView.ChangeViewSize />,
|
|
},
|
|
{
|
|
title: 'Relayout nested inline view',
|
|
render: () => <TextInlineView.ChangeInnerViewSize />,
|
|
},
|
|
{
|
|
title: 'Text shadow',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text
|
|
style={{
|
|
fontSize: 20,
|
|
textShadowOffset: {width: 2, height: 2},
|
|
textShadowRadius: 1,
|
|
textShadowColor: '#00cccc',
|
|
}}>
|
|
Demo text shadow
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Ellipsize mode',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text numberOfLines={1}>
|
|
This very long text should be truncated with dots in the end.
|
|
</Text>
|
|
<Text ellipsizeMode="middle" numberOfLines={1}>
|
|
This very long text should be truncated with dots in the middle.
|
|
</Text>
|
|
<Text ellipsizeMode="head" numberOfLines={1}>
|
|
This very long text should be truncated with dots in the beginning.
|
|
</Text>
|
|
<Text ellipsizeMode="clip" numberOfLines={1}>
|
|
This very looooooooooooooooooooooooooooong text should be clipped.
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Font variants',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{fontVariant: ['small-caps']}}>Small Caps{'\n'}</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: Platform.isTV ? 'Times' : 'Hoefler Text',
|
|
fontVariant: ['oldstyle-nums'],
|
|
}}>
|
|
Old Style nums 0123456789{'\n'}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: Platform.isTV ? 'Times' : 'Hoefler Text',
|
|
fontVariant: ['lining-nums'],
|
|
}}>
|
|
Lining nums 0123456789{'\n'}
|
|
</Text>
|
|
<Text style={{fontVariant: ['tabular-nums']}}>
|
|
Tabular nums{'\n'}
|
|
1111{'\n'}
|
|
2222{'\n'}
|
|
</Text>
|
|
<Text style={{fontVariant: ['proportional-nums']}}>
|
|
Proportional nums{'\n'}
|
|
1111{'\n'}
|
|
2222{'\n'}
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Nested content',
|
|
render: function() {
|
|
// iOS-only because it relies on inline views being able to size to content.
|
|
// Android's implementation requires that a width and height be specified
|
|
// on the inline view.
|
|
return (
|
|
<Text>
|
|
This text has a view
|
|
<InlineView style={{borderColor: 'red', borderWidth: 1}}>
|
|
<Text style={{borderColor: 'blue', borderWidth: 1}}>which has</Text>
|
|
<Text style={{borderColor: 'green', borderWidth: 1}}>
|
|
another text inside.
|
|
</Text>
|
|
<Text style={{borderColor: 'yellow', borderWidth: 1}}>
|
|
And moreover, it has another view
|
|
<InlineView style={{borderColor: 'red', borderWidth: 1}}>
|
|
<Text style={{borderColor: 'blue', borderWidth: 1}}>
|
|
with another text inside!
|
|
</Text>
|
|
</InlineView>
|
|
</Text>
|
|
</InlineView>
|
|
Because we need to go deeper.
|
|
</Text>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Dynamic Font Size Adjustment',
|
|
render: function(): React.Element<any> {
|
|
return <AdjustingFontSize />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Text Align with RTL',
|
|
render: function() {
|
|
return <TextAlignRTLExample />;
|
|
},
|
|
},
|
|
{
|
|
title: "Text `alignItems: 'baseline'` style",
|
|
render: function() {
|
|
return <TextBaseLineLayoutExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Transform',
|
|
render: function() {
|
|
return (
|
|
<View>
|
|
<Text style={{textTransform: 'uppercase'}}>
|
|
This text should be uppercased.
|
|
</Text>
|
|
<Text style={{textTransform: 'lowercase'}}>
|
|
This TEXT SHOULD be lowercased.
|
|
</Text>
|
|
<Text style={{textTransform: 'capitalize'}}>
|
|
This text should be CAPITALIZED.
|
|
</Text>
|
|
<Text style={{textTransform: 'capitalize'}}>
|
|
Mixed: <Text style={{textTransform: 'uppercase'}}>uppercase </Text>
|
|
<Text style={{textTransform: 'lowercase'}}>LoWeRcAsE </Text>
|
|
<Text style={{textTransform: 'capitalize'}}>
|
|
capitalize each word
|
|
</Text>
|
|
</Text>
|
|
<Text>
|
|
Should be "ABC":
|
|
<Text style={{textTransform: 'uppercase'}}>
|
|
a<Text>b</Text>c
|
|
</Text>
|
|
</Text>
|
|
<Text>
|
|
Should be "AbC":
|
|
<Text style={{textTransform: 'uppercase'}}>
|
|
a<Text style={{textTransform: 'none'}}>b</Text>c
|
|
</Text>
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
];
|