mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Nick Gerleman
6e8ce60bd4
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/51551 This allows hit RN's hit testing to find nested spans, and click them. This mechanism is fully separate from the one used by a11y virtual views, and ClickableSpan, such as those added for links via dataDetectorType (and also the `link` role). When we do have a link accessibilityRole, that ClickableSpan hit test seems to prevent the React one, and we only activate the onPress once (but then add keyboard interaction, press visual, and add to the a11y tree). Changelog: [Internal] Reviewed By: mdvacca Differential Revision: D75257326 fbshipit-source-id: 0c693f581ec121cf4b4e3e2040d141985118224f
1751 lines
51 KiB
JavaScript
1751 lines
51 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import type {RNTesterModule} from '../../types/RNTesterTypes';
|
|
|
|
import hotdog from '../../assets/hotdog.jpg';
|
|
import RNTesterText from '../../components/RNTesterText';
|
|
import TextLegend from '../../components/TextLegend';
|
|
import TextAdjustsDynamicLayoutExample from './TextAdjustsDynamicLayoutExample';
|
|
import TextSharedExamples from './TextSharedExamples';
|
|
|
|
const TextInlineView = require('../../components/TextInlineView');
|
|
const React = require('react');
|
|
const {
|
|
Image,
|
|
LayoutAnimation,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} = require('react-native');
|
|
|
|
class Entity extends React.Component<{children: React.Node}> {
|
|
render(): React.Node {
|
|
return (
|
|
<Text style={{fontWeight: 'bold', color: '#527fe4'}}>
|
|
{this.props.children}
|
|
</Text>
|
|
);
|
|
}
|
|
}
|
|
class AttributeToggler extends React.Component<{...}, $FlowFixMeState> {
|
|
state: {fontSize: number, fontWeight: 'bold' | 'normal'} = {
|
|
fontWeight: 'bold',
|
|
fontSize: 15,
|
|
};
|
|
|
|
toggleWeight = () => {
|
|
this.setState({
|
|
fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold',
|
|
});
|
|
};
|
|
|
|
increaseSize = () => {
|
|
this.setState({
|
|
fontSize: this.state.fontSize + 1,
|
|
});
|
|
};
|
|
|
|
render(): React.Node {
|
|
const curStyle = {
|
|
fontWeight: this.state.fontWeight,
|
|
fontSize: this.state.fontSize,
|
|
};
|
|
return (
|
|
<View testID="text-with-toggle-attributes">
|
|
<RNTesterText style={curStyle}>
|
|
Tap the controls below to change attributes.
|
|
</RNTesterText>
|
|
<RNTesterText>
|
|
<RNTesterText>
|
|
See how it will even work on{' '}
|
|
<RNTesterText style={curStyle}>
|
|
this nested RNTesterText
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
<RNTesterText>
|
|
<RNTesterText onPress={this.toggleWeight} testID="toggle-weight">
|
|
Toggle Weight
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
<RNTesterText onPress={this.increaseSize} testID="increase-size">
|
|
Increase Size
|
|
</RNTesterText>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
type AdjustingFontSizeProps = $ReadOnly<{}>;
|
|
|
|
type AdjustingFontSizeState = {
|
|
dynamicText: string,
|
|
shouldRender: boolean,
|
|
};
|
|
|
|
class AdjustingFontSize extends React.Component<
|
|
AdjustingFontSizeProps,
|
|
AdjustingFontSizeState,
|
|
> {
|
|
state: AdjustingFontSizeState = {
|
|
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(): React.Node {
|
|
if (!this.state.shouldRender) {
|
|
return <View />;
|
|
}
|
|
return (
|
|
<View>
|
|
<RNTesterText
|
|
ellipsizeMode="tail"
|
|
numberOfLines={1}
|
|
style={{fontSize: 36, marginVertical: 6}}>
|
|
Truncated text is baaaaad.
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
numberOfLines={1}
|
|
adjustsFontSizeToFit={true}
|
|
style={{fontSize: 40, marginVertical: 6}}>
|
|
Shrinking to fit available space is much better!
|
|
</RNTesterText>
|
|
|
|
<RNTesterText
|
|
adjustsFontSizeToFit={true}
|
|
numberOfLines={1}
|
|
style={{fontSize: 30, marginVertical: 6}}>
|
|
{'Add text to me to watch me shrink!' + ' ' + this.state.dynamicText}
|
|
</RNTesterText>
|
|
|
|
<RNTesterText
|
|
adjustsFontSizeToFit={true}
|
|
numberOfLines={4}
|
|
android_hyphenationFrequency="normal"
|
|
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}
|
|
</RNTesterText>
|
|
|
|
<RNTesterText
|
|
adjustsFontSizeToFit={true}
|
|
style={{fontSize: 20, marginVertical: 6, maxHeight: 50}}>
|
|
{'Text limited by height, watch as this reeeeaaaally loooooong teeeeeeext grooooows and then shriiiinks as you add text to me! ioahsdia soady auydoa aoisyd aosdy ' +
|
|
' ' +
|
|
this.state.dynamicText}
|
|
</RNTesterText>
|
|
|
|
<RNTesterText
|
|
adjustsFontSizeToFit={true}
|
|
numberOfLines={1}
|
|
style={{marginVertical: 6}}>
|
|
<RNTesterText style={{fontSize: 14}}>
|
|
{'Differently sized nested elements will shrink together. '}
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontSize: 20}}>
|
|
{'LARGE TEXT! ' + this.state.dynamicText}
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
marginTop: 5,
|
|
marginVertical: 6,
|
|
}}>
|
|
<RNTesterText
|
|
style={{backgroundColor: '#ffaaaa'}}
|
|
onPress={this.reset}>
|
|
Reset
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{backgroundColor: '#aaaaff'}}
|
|
onPress={this.removeText}>
|
|
Remove Text
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{backgroundColor: '#aaffaa'}}
|
|
onPress={this.addText}>
|
|
Add Text
|
|
</RNTesterText>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
function TextLinkifyExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText dataDetectorType="phoneNumber">
|
|
Phone number: 123-123-1234
|
|
</RNTesterText>
|
|
<RNTesterText dataDetectorType="link">
|
|
Link: https://www.facebook.com
|
|
</RNTesterText>
|
|
<RNTesterText dataDetectorType="email">
|
|
Email: employee@facebook.com
|
|
</RNTesterText>
|
|
<RNTesterText dataDetectorType="none">
|
|
Phone number: 123-123-1234 Link: https://www.facebook.com Email:
|
|
employee@facebook.com
|
|
</RNTesterText>
|
|
<RNTesterText dataDetectorType="all">
|
|
Phone number: 123-123-1234 Link: https://www.facebook.com Email:
|
|
employee@facebook.com
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function TextTransformExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText style={{textTransform: 'uppercase'}}>
|
|
This text should be uppercased.
|
|
</RNTesterText>
|
|
<RNTesterText style={{textTransform: 'lowercase'}}>
|
|
This TEXT SHOULD be lowercased.
|
|
</RNTesterText>
|
|
<RNTesterText style={{textTransform: 'capitalize'}}>
|
|
This text should be CAPITALIZED.
|
|
</RNTesterText>
|
|
<RNTesterText>
|
|
Capitalize a date:
|
|
<RNTesterText style={{textTransform: 'capitalize'}}>
|
|
the 9th of november, 1998
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
<RNTesterText>
|
|
Capitalize a 2 digit date:
|
|
<RNTesterText style={{textTransform: 'capitalize'}}>
|
|
the 25th of december
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
<RNTesterText style={{textTransform: 'capitalize'}}>
|
|
Mixed:{' '}
|
|
<RNTesterText style={{textTransform: 'uppercase'}}>
|
|
uppercase{' '}
|
|
</RNTesterText>
|
|
<RNTesterText style={{textTransform: 'lowercase'}}>
|
|
LoWeRcAsE{' '}
|
|
</RNTesterText>
|
|
<RNTesterText style={{textTransform: 'capitalize'}}>
|
|
capitalize each word
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
<RNTesterText>
|
|
Should be "ABC":
|
|
<RNTesterText style={{textTransform: 'uppercase'}}>
|
|
a<RNTesterText>b</RNTesterText>c
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
<RNTesterText>
|
|
Should be "AbC":
|
|
<RNTesterText style={{textTransform: 'uppercase'}}>
|
|
a<RNTesterText style={{textTransform: 'none'}}>b</RNTesterText>c
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
<RNTesterText style={{textTransform: 'none'}}>
|
|
{
|
|
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
|
|
}
|
|
</RNTesterText>
|
|
<RNTesterText style={{textTransform: 'uppercase'}}>
|
|
{
|
|
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
|
|
}
|
|
</RNTesterText>
|
|
<RNTesterText style={{textTransform: 'lowercase'}}>
|
|
{
|
|
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
|
|
}
|
|
</RNTesterText>
|
|
<RNTesterText style={{textTransform: 'capitalize'}}>
|
|
{
|
|
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
|
|
}
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
textTransform: 'uppercase',
|
|
fontSize: 16,
|
|
color: 'turquoise',
|
|
backgroundColor: 'blue',
|
|
lineHeight: 32,
|
|
letterSpacing: 2,
|
|
alignSelf: 'flex-start',
|
|
}}>
|
|
Works with other text styles
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function IncludeFontPaddingExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
marginBottom: 10,
|
|
}}>
|
|
<View style={{alignItems: 'center'}}>
|
|
<RNTesterText style={styles.includeFontPaddingText}>Ey</RNTesterText>
|
|
<RNTesterText>Default</RNTesterText>
|
|
</View>
|
|
<View style={{alignItems: 'center'}}>
|
|
<RNTesterText
|
|
style={[
|
|
styles.includeFontPaddingText,
|
|
{includeFontPadding: false, marginLeft: 10},
|
|
]}>
|
|
Ey
|
|
</RNTesterText>
|
|
<RNTesterText>includeFontPadding: false</RNTesterText>
|
|
</View>
|
|
</View>
|
|
<RNTesterText>
|
|
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.
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function FontVariantsExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText style={{fontVariant: ['small-caps']}}>
|
|
Small Caps{'\n'}
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'Roboto',
|
|
fontVariant: ['oldstyle-nums'],
|
|
}}>
|
|
Old Style nums 0123456789{'\n'}
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'Roboto',
|
|
fontVariant: ['lining-nums'],
|
|
}}>
|
|
Lining nums 0123456789{'\n'}
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontVariant: ['tabular-nums']}}>
|
|
Tabular nums{'\n'}
|
|
1111{'\n'}
|
|
2222{'\n'}
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontVariant: ['proportional-nums']}}>
|
|
Proportional nums{'\n'}
|
|
1111{'\n'}
|
|
2222{'\n'}
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function EllipsizeModeExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText numberOfLines={1} style={styles.wrappedText}>
|
|
This very long text should be truncated with dots in the end.
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
ellipsizeMode="middle"
|
|
numberOfLines={1}
|
|
style={styles.wrappedText}>
|
|
RNTesterText very long text should be truncated with dots in the middle.
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
ellipsizeMode="head"
|
|
numberOfLines={1}
|
|
style={styles.wrappedText}>
|
|
This very long text should be truncated with dots in the beginning.
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
ellipsizeMode="clip"
|
|
numberOfLines={1}
|
|
style={styles.wrappedText}>
|
|
This very long text should be clipped and this will not be visible.
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function FontFamilyExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText style={{fontFamily: 'sans-serif'}}>Sans-Serif</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
|
|
Sans-Serif Bold
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'serif'}}>Serif</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'serif', fontWeight: 'bold'}}>
|
|
Serif Bold
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'monospace'}}>Monospace</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'monospace', fontWeight: 'bold'}}>
|
|
Monospace Bold (After 5.0)
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'Unknown Font Family'}}>
|
|
Unknown Font Family
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function TextShadowExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText
|
|
style={{
|
|
fontSize: 20,
|
|
textShadowOffset: {width: 2, height: 2},
|
|
textShadowRadius: 1,
|
|
textShadowColor: '#00cccc',
|
|
}}>
|
|
Demo text shadow
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function AllowFontScalingExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText>
|
|
By default, text will respect Text Size accessibility setting on
|
|
Android. It means that all font sizes will be increased or decreased
|
|
depending on the value of the Text Size setting in the OS's Settings
|
|
app.
|
|
</RNTesterText>
|
|
<RNTesterText style={{marginTop: 10}}>
|
|
You can disable scaling for your Text component by passing {'"'}
|
|
allowFontScaling={'{'}false{'}"'} prop.
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
allowFontScaling={false}
|
|
style={{marginTop: 20, fontSize: 15}}>
|
|
This text will not scale.{' '}
|
|
<RNTesterText style={{fontSize: 15}}>
|
|
This text also won't scale because it inherits "allowFontScaling" from
|
|
its parent.
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function MaxFontSizeMultiplierExample(props: {}): React.Node {
|
|
return (
|
|
<View testID={'max-font-size-multiplier'}>
|
|
<Text>
|
|
When allowFontScaling is enabled, you can use the maxFontSizeMultiplier
|
|
prop to set an upper limit on how much the font size will be scaled.
|
|
</Text>
|
|
<Text
|
|
allowFontScaling={true}
|
|
maxFontSizeMultiplier={1}
|
|
style={{marginTop: 10}}>
|
|
This text will not scale up (max 1x)
|
|
</Text>
|
|
<Text allowFontScaling={true} maxFontSizeMultiplier={1.5}>
|
|
This text will scale up (max 1.5x)
|
|
</Text>
|
|
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
|
|
<Text>Inherit max (max 1x)</Text>
|
|
</Text>
|
|
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
|
|
<Text maxFontSizeMultiplier={1.5}>
|
|
Override inherited max (max 1.5x)
|
|
</Text>
|
|
</Text>
|
|
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
|
|
<Text maxFontSizeMultiplier={0}>Ignore inherited max (no max)</Text>
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function NumberOfLinesExample(props: {}): React.Node {
|
|
return (
|
|
<View testID="number-of-lines">
|
|
<RNTesterText numberOfLines={1} style={styles.wrappedText}>
|
|
Maximum of one line no matter now much I write here. If I keep writing
|
|
it{"'"}ll just truncate after one line
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={[{fontSize: 31}, styles.wrappedText]}
|
|
numberOfLines={1}>
|
|
Maximum of one line no matter now much I write here. If I keep writing
|
|
it{"'"}ll just truncate after one line
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
numberOfLines={2}
|
|
style={[{marginTop: 20}, styles.wrappedText]}>
|
|
RNTesterText of two lines no matter now much I write here. If I keep
|
|
writing it{"'"}ll just truncate after two lines
|
|
</RNTesterText>
|
|
<RNTesterText numberOfLines={1} style={{marginTop: 20}}>
|
|
The hotdog should be truncated. The hotdog should be truncated. The
|
|
hotdog should be truncated. The hotdog should be truncated. The hotdog
|
|
should be truncated. The hotdog should be truncated. The hotdog should
|
|
be truncated. The hotdog should be truncated. The hotdog should be
|
|
truncated. The hotdog should be truncated.
|
|
<Image source={hotdog} style={{height: 12}} />
|
|
</RNTesterText>
|
|
<RNTesterText style={[{marginTop: 20}, styles.wrappedText]}>
|
|
No maximum lines specified no matter now much I write here. If I keep
|
|
writing it{"'"}ll just keep going and going
|
|
</RNTesterText>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function HyphenationExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText
|
|
android_hyphenationFrequency="normal"
|
|
style={styles.wrappedText}>
|
|
<RNTesterText style={{color: 'red'}}>Normal: </RNTesterText>
|
|
WillHaveAHyphenWhenBreakingForNewLine
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
android_hyphenationFrequency="none"
|
|
style={styles.wrappedText}>
|
|
<RNTesterText style={{color: 'red'}}>None: </RNTesterText>
|
|
WillNotHaveAHyphenWhenBreakingForNewLine
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
android_hyphenationFrequency="full"
|
|
style={styles.wrappedText}>
|
|
<RNTesterText style={{color: 'red'}}>Full: </RNTesterText>
|
|
WillHaveAHyphenWhenBreakingForNewLine
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function FontWeightExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText style={{fontWeight: 'bold'}}>
|
|
Move fast and be bold
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 'normal'}}>
|
|
Move fast and be normal
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontWeight: '900'}}>FONT WEIGHT 900</RNTesterText>
|
|
<RNTesterText style={{fontWeight: '800'}}>FONT WEIGHT 800</RNTesterText>
|
|
<RNTesterText style={{fontWeight: '700'}}>FONT WEIGHT 700</RNTesterText>
|
|
<RNTesterText style={{fontWeight: '600'}}>FONT WEIGHT 600</RNTesterText>
|
|
<RNTesterText style={{fontWeight: '500'}}>FONT WEIGHT 500</RNTesterText>
|
|
<RNTesterText style={{fontWeight: '400'}}>FONT WEIGHT 400</RNTesterText>
|
|
<RNTesterText style={{fontWeight: '300'}}>FONT WEIGHT 300</RNTesterText>
|
|
<RNTesterText style={{fontWeight: '200'}}>FONT WEIGHT 200</RNTesterText>
|
|
<RNTesterText style={{fontWeight: '100'}}>FONT WEIGHT 100</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 900}}>FONT WEIGHT 900</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 800}}>FONT WEIGHT 800</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 700}}>FONT WEIGHT 700</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 600}}>FONT WEIGHT 600</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 500}}>FONT WEIGHT 500</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 400}}>FONT WEIGHT 400</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 300}}>FONT WEIGHT 300</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 200}}>FONT WEIGHT 200</RNTesterText>
|
|
<RNTesterText style={{fontWeight: 100}}>FONT WEIGHT 100</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function BackgroundColorExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText style={{backgroundColor: '#ffaaaa'}}>
|
|
Red background,
|
|
<RNTesterText style={{backgroundColor: '#aaaaff'}}>
|
|
{' '}
|
|
blue background,
|
|
<RNTesterText>
|
|
{' '}
|
|
inherited blue background,
|
|
<RNTesterText style={{backgroundColor: '#aaffaa'}}>
|
|
{' '}
|
|
nested green background.
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
<RNTesterText style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
|
|
Same alpha as background,
|
|
<RNTesterText>
|
|
Inherited alpha from background,
|
|
<RNTesterText style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
|
|
Reapply alpha
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ContainerBackgroundColorExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<View style={{flexDirection: 'row', height: 85}}>
|
|
<View style={{backgroundColor: '#ffaaaa', width: 150}} />
|
|
<View style={{backgroundColor: '#aaaaff', width: 150}} />
|
|
</View>
|
|
<RNTesterText style={[styles.backgroundColorText, {top: -80}]}>
|
|
Default containerBackgroundColor (inherited) + backgroundColor wash
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={[
|
|
styles.backgroundColorText,
|
|
{top: -70, backgroundColor: 'transparent'},
|
|
]}>
|
|
{"containerBackgroundColor: 'transparent' + backgroundColor wash"}
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function TextDecorationExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText style={{textDecorationLine: 'underline'}}>
|
|
Solid underline
|
|
</RNTesterText>
|
|
<RNTesterText style={{textDecorationLine: 'none'}}>
|
|
None textDecoration
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
textDecorationLine: 'line-through',
|
|
textDecorationStyle: 'solid',
|
|
}}>
|
|
Solid line-through
|
|
</RNTesterText>
|
|
<RNTesterText style={{textDecorationLine: 'underline line-through'}}>
|
|
Both underline and line-through
|
|
</RNTesterText>
|
|
<RNTesterText>
|
|
Mixed text with{' '}
|
|
<RNTesterText style={{textDecorationLine: 'underline'}}>
|
|
underline
|
|
</RNTesterText>{' '}
|
|
and{' '}
|
|
<RNTesterText style={{textDecorationLine: 'line-through'}}>
|
|
line-through
|
|
</RNTesterText>{' '}
|
|
text nodes
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function NestedExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText onPress={() => console.log('1st')}>
|
|
(Normal text,
|
|
<Text style={{color: 'red', fontWeight: 'bold'}}>
|
|
(R)red
|
|
<Text style={{color: 'green', fontWeight: 'normal'}}>
|
|
(G)green
|
|
<Text style={{color: 'blue', fontWeight: 'bold'}}>
|
|
(B)blue
|
|
<Text style={{color: 'cyan', fontWeight: 'normal'}}>
|
|
(C)cyan
|
|
<Text style={{color: 'magenta', fontWeight: 'bold'}}>
|
|
(M)magenta
|
|
<Text style={{color: 'yellow', fontWeight: 'normal'}}>
|
|
(Y)yellow
|
|
<Text style={{color: 'black', fontWeight: 'bold'}}>
|
|
(K)black
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
<Text style={{fontWeight: 'bold'}} onPress={() => console.log('2nd')}>
|
|
(and bold
|
|
<Text
|
|
style={{fontStyle: 'italic', fontSize: 11, color: '#527fe4'}}
|
|
onPress={() => console.log('3rd')}>
|
|
(and tiny bold italic blue
|
|
<Text
|
|
style={{fontWeight: 'normal', fontStyle: 'normal'}}
|
|
onPress={() => console.log('4th')}>
|
|
(and tiny normal blue)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{fontFamily: 'serif'}}
|
|
onPress={() => console.log('1st')}>
|
|
(Serif
|
|
<RNTesterText
|
|
style={{fontStyle: 'italic', fontWeight: 'bold'}}
|
|
onPress={() => console.log('2nd')}>
|
|
(Serif Bold Italic
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'monospace',
|
|
fontStyle: 'normal',
|
|
fontWeight: 'normal',
|
|
}}
|
|
onPress={() => console.log('3rd')}>
|
|
(Monospace Normal
|
|
<RNTesterText
|
|
style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}
|
|
onPress={() => console.log('4th')}>
|
|
(Sans-Serif Bold
|
|
<RNTesterText
|
|
style={{fontWeight: 'normal'}}
|
|
onPress={() => console.log('5th')}>
|
|
(and Sans-Serif Normal)
|
|
</RNTesterText>
|
|
)
|
|
</RNTesterText>
|
|
)
|
|
</RNTesterText>
|
|
)
|
|
</RNTesterText>
|
|
)
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontSize: 12}}>
|
|
<Entity>Entity Name</Entity>
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontSize: 8}}>
|
|
Nested text with size 8,{' '}
|
|
<RNTesterText style={{fontSize: 23}}>size 23, </RNTesterText>
|
|
and size 8 again
|
|
</RNTesterText>
|
|
<Text style={{color: 'red'}}>
|
|
Nested text with red color,{' '}
|
|
<Text style={{color: 'blue'}}>blue color, </Text>
|
|
and red color again
|
|
</Text>
|
|
<RNTesterText style={{opacity: 0.7}}>
|
|
(opacity
|
|
<RNTesterText>
|
|
(is inherited
|
|
<RNTesterText style={{opacity: 0.7}}>
|
|
(and accumulated
|
|
<RNTesterText style={{opacity: 0.5, backgroundColor: '#ffaaaa'}}>
|
|
(and also applies to the background)
|
|
</RNTesterText>
|
|
)
|
|
</RNTesterText>
|
|
)
|
|
</RNTesterText>
|
|
)
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function TextAlignExample(props: {}): React.Node {
|
|
return (
|
|
<View testID="text-align-example">
|
|
<RNTesterText>auto (default) - english LTR</RNTesterText>
|
|
<RNTesterText>أحب اللغة العربية auto (default) - arabic RTL</RNTesterText>
|
|
<RNTesterText style={{textAlign: 'left'}}>
|
|
left left left left left left left left left left left left left left
|
|
left
|
|
</RNTesterText>
|
|
<RNTesterText style={{textAlign: 'center'}}>
|
|
center center center center center center center center center center
|
|
center
|
|
</RNTesterText>
|
|
<RNTesterText style={{textAlign: 'right'}}>
|
|
right right right right right right right right right right right right
|
|
right
|
|
</RNTesterText>
|
|
<RNTesterText style={{textAlign: 'justify'}}>
|
|
justify (works when api level >= 26 otherwise fallbacks to "left"): 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.
|
|
</RNTesterText>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function UnicodeExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<View>
|
|
<View style={{flexDirection: 'row'}}>
|
|
<RNTesterText style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。
|
|
</RNTesterText>
|
|
</View>
|
|
<View>
|
|
<RNTesterText style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。
|
|
</RNTesterText>
|
|
</View>
|
|
<View style={{alignItems: 'center'}}>
|
|
<RNTesterText style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。
|
|
</RNTesterText>
|
|
</View>
|
|
<View>
|
|
<RNTesterText style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
|
|
</RNTesterText>
|
|
</View>
|
|
</View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function AndroidMaterialDesignFonts(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
|
|
<View style={{flex: 1}}>
|
|
<RNTesterText style={{fontFamily: 'sans-serif'}}>
|
|
Roboto Regular
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'sans-serif', fontStyle: 'italic'}}>
|
|
Roboto Italic
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
|
|
Roboto Bold
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'sans-serif',
|
|
fontStyle: 'italic',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
Roboto Bold Italic
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'sans-serif-light'}}>
|
|
Roboto Light
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{fontFamily: 'sans-serif-light', fontStyle: 'italic'}}>
|
|
Roboto Light Italic
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'sans-serif-thin'}}>
|
|
Roboto Thin (After 4.2)
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{fontFamily: 'sans-serif-thin', fontStyle: 'italic'}}>
|
|
Roboto Thin Italic (After 4.2)
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'sans-serif-condensed'}}>
|
|
Roboto Condensed
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'sans-serif-condensed',
|
|
fontStyle: 'italic',
|
|
}}>
|
|
Roboto Condensed Italic
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'sans-serif-condensed',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
Roboto Condensed Bold
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'sans-serif-condensed',
|
|
fontStyle: 'italic',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
Roboto Condensed Bold Italic
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'sans-serif-medium'}}>
|
|
Roboto Medium (After 5.0)
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{fontFamily: 'sans-serif-medium', fontStyle: 'italic'}}>
|
|
Roboto Medium Italic (After 5.0)
|
|
</RNTesterText>
|
|
</View>
|
|
</View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function CustomFontsExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
|
|
<View style={{flex: 1}}>
|
|
<RNTesterText style={{fontFamily: 'notoserif'}}>
|
|
NotoSerif Regular
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'notoserif',
|
|
fontStyle: 'italic',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
NotoSerif Bold Italic
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontFamily: 'notoserif', fontStyle: 'italic'}}>
|
|
NotoSerif Italic (Missing Font file)
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'Rubik',
|
|
fontWeight: 'normal',
|
|
}}>
|
|
Rubik Regular
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'Rubik',
|
|
fontWeight: '300',
|
|
}}>
|
|
Rubik Light
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'Rubik',
|
|
fontWeight: '700',
|
|
}}>
|
|
Rubik Bold
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'Rubik',
|
|
fontWeight: '500',
|
|
}}>
|
|
Rubik Medium
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
fontFamily: 'Rubik',
|
|
fontStyle: 'italic',
|
|
fontWeight: '500',
|
|
}}>
|
|
Rubik Medium Italic
|
|
</RNTesterText>
|
|
</View>
|
|
</View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function LineHeightExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText
|
|
style={[
|
|
{
|
|
fontSize: 16,
|
|
lineHeight: 35,
|
|
borderColor: 'black',
|
|
borderWidth: 1,
|
|
marginBottom: 5,
|
|
},
|
|
styles.wrappedText,
|
|
]}
|
|
testID="line-height-greater-than-font-size">
|
|
Holisticly formulate inexpensive ideas before best-of-breed benefits.{' '}
|
|
<RNTesterText style={{fontSize: 20}}>Continually</RNTesterText> expedite
|
|
magnetic potentialities rather than client-focused interfaces.
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={[
|
|
{
|
|
fontSize: 16,
|
|
lineHeight: 8,
|
|
borderColor: 'black',
|
|
borderWidth: 1,
|
|
marginBottom: 5,
|
|
},
|
|
styles.wrappedText,
|
|
]}
|
|
testID="line-height-less-than-font-size">
|
|
Holisticly formulate inexpensive ideas before best-of-breed benefits.{' '}
|
|
<RNTesterText style={{fontSize: 20}}>Continually</RNTesterText> expedite
|
|
magnetic potentialities rather than client-focused interfaces.
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={[
|
|
{
|
|
fontSize: 24,
|
|
lineHeight: 8,
|
|
borderColor: 'black',
|
|
borderWidth: 1,
|
|
},
|
|
styles.wrappedText,
|
|
]}
|
|
testID="line-height-single-line-less-than-font-size">
|
|
Holisticly formulate
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={[
|
|
{
|
|
fontSize: 16,
|
|
lineHeight: 20,
|
|
borderColor: 'black',
|
|
borderWidth: 1,
|
|
},
|
|
styles.wrappedText,
|
|
]}
|
|
testID="line-height-single-line-greater-than-font-size">
|
|
Holisticly formulate
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function LetterSpacingExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<View>
|
|
<RNTesterText style={{letterSpacing: 0}}>
|
|
letterSpacing = 0
|
|
</RNTesterText>
|
|
<RNTesterText style={{letterSpacing: 2, marginTop: 5}}>
|
|
letterSpacing = 2
|
|
</RNTesterText>
|
|
<RNTesterText style={{letterSpacing: 9, marginTop: 5}}>
|
|
letterSpacing = 9
|
|
</RNTesterText>
|
|
<View style={{flexDirection: 'row'}}>
|
|
<RNTesterText
|
|
style={{
|
|
fontSize: 12,
|
|
letterSpacing: 2,
|
|
backgroundColor: 'fuchsia',
|
|
marginTop: 5,
|
|
}}>
|
|
With size and background color
|
|
</RNTesterText>
|
|
</View>
|
|
<RNTesterText style={{letterSpacing: -1, marginTop: 5}}>
|
|
letterSpacing = -1
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
letterSpacing: 3,
|
|
backgroundColor: '#dddddd',
|
|
marginTop: 5,
|
|
}}>
|
|
[letterSpacing = 3]
|
|
<RNTesterText style={{letterSpacing: 0, backgroundColor: '#bbbbbb'}}>
|
|
[Nested letterSpacing = 0]
|
|
</RNTesterText>
|
|
<RNTesterText style={{letterSpacing: 6, backgroundColor: '#eeeeee'}}>
|
|
[Nested letterSpacing = 6]
|
|
</RNTesterText>
|
|
</RNTesterText>
|
|
</View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function TextBaseLineLayoutExample(props: {}): React.Node {
|
|
const texts = [];
|
|
for (let i = 9; i >= 0; i--) {
|
|
texts.push(
|
|
<RNTesterText
|
|
key={i}
|
|
style={{fontSize: 8 + i * 5, maxWidth: 20, backgroundColor: '#eee'}}>
|
|
{i}
|
|
</RNTesterText>,
|
|
);
|
|
}
|
|
|
|
const marker = (
|
|
<View style={{width: 20, height: 20, backgroundColor: 'gray'}} />
|
|
);
|
|
const subtitleStyle = {fontSize: 16, marginTop: 8, fontWeight: 'bold'};
|
|
|
|
return (
|
|
<View>
|
|
{/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
|
|
* https://fburl.com/workplace/6291gfvu */}
|
|
<RNTesterText style={subtitleStyle}>{'Nested <Text/>s:'}</RNTesterText>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
<RNTesterText>{texts}</RNTesterText>
|
|
{marker}
|
|
</View>
|
|
|
|
{/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
|
|
* https://fburl.com/workplace/6291gfvu */}
|
|
<RNTesterText style={subtitleStyle}>
|
|
{'Array of <Text/>s in <View>:'}
|
|
</RNTesterText>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
{texts}
|
|
{marker}
|
|
</View>
|
|
|
|
{/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
|
|
* https://fburl.com/workplace/6291gfvu */}
|
|
<RNTesterText style={subtitleStyle}>
|
|
{'Interleaving <View> and <Text>:'}
|
|
</RNTesterText>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
<RNTesterText selectable={true}>
|
|
Some text.
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'baseline',
|
|
backgroundColor: '#eee',
|
|
}}>
|
|
{marker}
|
|
<RNTesterText>Text inside View.</RNTesterText>
|
|
{marker}
|
|
</View>
|
|
</RNTesterText>
|
|
{marker}
|
|
</View>
|
|
|
|
{/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
|
|
* https://fburl.com/workplace/6291gfvu */}
|
|
<RNTesterText style={subtitleStyle}>
|
|
{'Multi-line interleaved <View> and <Text>:'}
|
|
</RNTesterText>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
<RNTesterText selectable={true}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
|
|
venenatis,{' '}
|
|
<View
|
|
style={{
|
|
backgroundColor: 'yellow',
|
|
}}>
|
|
<RNTesterText>mauris eu commodo maximus</RNTesterText>
|
|
</View>{' '}
|
|
, ante arcu vestibulum ligula, et scelerisque diam.
|
|
</RNTesterText>
|
|
</View>
|
|
|
|
{/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
|
|
* https://fburl.com/workplace/6291gfvu */}
|
|
<RNTesterText style={subtitleStyle}>
|
|
{'Multi-line <Text> alignment'}
|
|
</RNTesterText>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
<View style={{width: 50, height: 50, backgroundColor: 'gray'}} />
|
|
<View style={{width: 125, backgroundColor: '#eee'}}>
|
|
<RNTesterText style={{fontSize: 15}}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</RNTesterText>
|
|
</View>
|
|
<View style={{width: 125, backgroundColor: '#eee'}}>
|
|
<RNTesterText style={{fontSize: 10}}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</RNTesterText>
|
|
</View>
|
|
</View>
|
|
|
|
{/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
|
|
* https://fburl.com/workplace/6291gfvu */}
|
|
<RNTesterText style={subtitleStyle}>{'<TextInput/>:'}</RNTesterText>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
<TextInput style={{margin: 0, padding: 0}}>{texts}</TextInput>
|
|
{marker}
|
|
</View>
|
|
|
|
{/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
|
|
* https://fburl.com/workplace/6291gfvu */}
|
|
<RNTesterText style={subtitleStyle}>
|
|
{'<TextInput multiline/>:'}
|
|
</RNTesterText>
|
|
<View style={{flexDirection: 'row', alignItems: 'baseline'}}>
|
|
{marker}
|
|
<TextInput multiline={true} style={{margin: 0, padding: 0}}>
|
|
{texts}
|
|
</TextInput>
|
|
{marker}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const examples = [
|
|
{
|
|
title: 'Background Color and Border Width',
|
|
name: 'background-border-width',
|
|
render(): React.Node {
|
|
return (
|
|
<View testID="background-border-width">
|
|
<RNTesterText
|
|
style={{
|
|
backgroundColor: '#F000F0',
|
|
padding: 10,
|
|
}}>
|
|
Text with background color only
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
backgroundColor: '#F000F0',
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
marginTop: 10,
|
|
}}>
|
|
Text with background color and uniform borderRadii
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
backgroundColor: '#F000F0',
|
|
borderTopRightRadius: 10,
|
|
borderTopLeftRadius: 20,
|
|
borderBottomRightRadius: 20,
|
|
borderBottomLeftRadius: 10,
|
|
padding: 10,
|
|
marginTop: 10,
|
|
}}>
|
|
Text with background color and non-uniform borders
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
borderWidth: 1,
|
|
borderColor: 'red',
|
|
borderTopRightRadius: 10,
|
|
borderTopLeftRadius: 20,
|
|
borderBottomRightRadius: 20,
|
|
borderBottomLeftRadius: 10,
|
|
padding: 10,
|
|
marginTop: 10,
|
|
}}>
|
|
Text with borderWidth
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{
|
|
backgroundColor: '#00AA00',
|
|
borderWidth: 2,
|
|
borderColor: 'blue',
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
marginTop: 10,
|
|
}}>
|
|
Text with background AND borderWidth
|
|
</RNTesterText>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Dynamic Font Size Adjustment',
|
|
name: 'ajustingFontSize',
|
|
render(): React.Node {
|
|
return <AdjustingFontSize />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Size Adjustment with Dynamic Layout',
|
|
name: 'textAdjustsDynamicLayout',
|
|
render(): React.Node {
|
|
return <TextAdjustsDynamicLayoutExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Wrap',
|
|
name: 'wrap',
|
|
render(): React.Node {
|
|
return (
|
|
<RNTesterText style={styles.wrappedText}>
|
|
The text should wrap if it goes on multiple lines. See, this is going
|
|
to the next line.
|
|
</RNTesterText>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Hyphenation',
|
|
name: 'hyphenation',
|
|
render(): React.Node {
|
|
return <HyphenationExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Padding',
|
|
name: 'padding',
|
|
render(): React.Node {
|
|
return (
|
|
<RNTesterText style={{padding: 10}}>
|
|
This text is indented by 10px padding on all sides.
|
|
</RNTesterText>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Text metrics legend',
|
|
name: 'textMetricLegend',
|
|
render(): React.Node {
|
|
return <TextLegend />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Family',
|
|
name: 'fontFamily',
|
|
render(): React.Node {
|
|
return <FontFamilyExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Android Material Design Fonts',
|
|
name: 'androidMaterialDesignFonts',
|
|
render(): React.Node {
|
|
return <AndroidMaterialDesignFonts />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Custom Fonts',
|
|
name: 'customFonts',
|
|
render(): React.Node {
|
|
return <CustomFontsExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Size',
|
|
name: 'fontSize',
|
|
render(): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText style={{fontSize: 23}}>Size 23</RNTesterText>
|
|
<RNTesterText style={{fontSize: 8}}>Size 8</RNTesterText>
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Color',
|
|
name: 'color',
|
|
render(): React.Node {
|
|
return (
|
|
<>
|
|
<Text style={{color: 'red'}}>Red color</Text>
|
|
<Text style={{color: 'blue'}}>Blue color</Text>
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Weight',
|
|
name: 'fontWeight',
|
|
render(): React.Node {
|
|
return <FontWeightExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Style',
|
|
name: 'fontStyle',
|
|
render(): React.Node {
|
|
return (
|
|
<>
|
|
<RNTesterText style={{fontStyle: 'italic'}}>
|
|
Move fast and be italic
|
|
</RNTesterText>
|
|
<RNTesterText style={{fontStyle: 'normal'}}>
|
|
Move fast and be normal
|
|
</RNTesterText>
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Font Style and Weight',
|
|
name: 'fontStyleAndWeight',
|
|
render(): React.Node {
|
|
return (
|
|
<RNTesterText style={{fontStyle: 'italic', fontWeight: 'bold'}}>
|
|
Move fast and be both bold and italic
|
|
</RNTesterText>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Text Decoration',
|
|
name: 'textDecoration',
|
|
render(): React.Node {
|
|
return <TextDecorationExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Nested',
|
|
name: 'nested',
|
|
render(): React.Node {
|
|
return <NestedExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Text Align',
|
|
name: 'textAlign',
|
|
render(): React.Node {
|
|
return <TextAlignExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Unicode',
|
|
name: 'unicode',
|
|
render(): React.Node {
|
|
return <UnicodeExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Spaces',
|
|
name: 'spaces',
|
|
render(): React.Node {
|
|
return (
|
|
<RNTesterText>
|
|
A {'generated'} {'string'} and some spaces
|
|
</RNTesterText>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Line Height',
|
|
name: 'lineHeight',
|
|
render(): React.Node {
|
|
return <LineHeightExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Letter Spacing',
|
|
name: 'letterSpacing',
|
|
render(): React.Node {
|
|
return <LetterSpacingExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Toggling Attributes',
|
|
name: 'togglingAttributes',
|
|
render: AttributeToggler,
|
|
},
|
|
{
|
|
title: 'backgroundColor attribute',
|
|
name: 'backgroundColorAttribute',
|
|
render(): React.Node {
|
|
return <BackgroundColorExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'containerBackgroundColor attribute',
|
|
name: 'containerBackgroundColorAttribute',
|
|
render(): React.Node {
|
|
return <ContainerBackgroundColorExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'numberOfLines attribute',
|
|
name: 'numberOfLines',
|
|
render(): React.Node {
|
|
return <NumberOfLinesExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'allowFontScaling attribute',
|
|
name: 'allowFontScaling',
|
|
render(): React.Node {
|
|
return <AllowFontScalingExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'maxFontSizeMultiplier attribute',
|
|
name: 'maxFontSizeMultiplier',
|
|
render(): React.Node {
|
|
return <MaxFontSizeMultiplierExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'selectable attribute',
|
|
name: 'selectable',
|
|
render(): React.Node {
|
|
return (
|
|
<RNTesterText selectable>
|
|
This text is selectable if you click-and-hold, and will offer the
|
|
native Android selection menus.
|
|
</RNTesterText>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'selectionColor attribute',
|
|
name: 'selectionColor',
|
|
render(): React.Node {
|
|
return (
|
|
<RNTesterText selectable selectionColor="orange">
|
|
This text will have a orange highlight on selection.
|
|
</RNTesterText>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Inline views',
|
|
name: 'inlineViewsBasic',
|
|
render(): React.Node {
|
|
return <TextInlineView.Basic />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Inline views with multiple nested texts',
|
|
name: 'inlineViewsMultiple',
|
|
render(): React.Node {
|
|
return <TextInlineView.NestedTexts />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Inline image/view clipped by <Text>',
|
|
name: 'inlineViewsClipped',
|
|
render(): React.Node {
|
|
return <TextInlineView.ClippedByText />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Relayout inline image',
|
|
name: 'relayoutInlineImage',
|
|
render(): React.Node {
|
|
return <TextInlineView.ChangeImageSize />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Relayout inline view',
|
|
name: 'relayoutInlineView',
|
|
render(): React.Node {
|
|
return <TextInlineView.ChangeViewSize />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Relayout nested inline view',
|
|
name: 'relayoutNestedInlineView',
|
|
render(): React.Node {
|
|
return <TextInlineView.ChangeInnerViewSize />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Text shadow',
|
|
name: 'textShadow',
|
|
render(): React.Node {
|
|
return <TextShadowExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Ellipsize mode',
|
|
name: 'ellipsizeMode',
|
|
render(): React.Node {
|
|
return <EllipsizeModeExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Font variants',
|
|
name: 'fontVariants',
|
|
render(): React.Node {
|
|
return <FontVariantsExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Include Font Padding',
|
|
name: 'includeFontPadding',
|
|
render(): React.Node {
|
|
return <IncludeFontPaddingExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Text Transform',
|
|
name: 'textTransform',
|
|
render(): React.Node {
|
|
return <TextTransformExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Substring Emoji (should only see "test")',
|
|
name: 'substringEmoji',
|
|
render(): React.Node {
|
|
return <RNTesterText>{'test🙃'.substring(0, 5)}</RNTesterText>;
|
|
},
|
|
},
|
|
|
|
{
|
|
title: 'Text linkify',
|
|
name: 'textLinkify',
|
|
render(): React.Node {
|
|
return <TextLinkifyExample />;
|
|
},
|
|
},
|
|
{
|
|
title: "Text `alignItems: 'baseline'` style",
|
|
name: 'alignItemsBaseline',
|
|
render(): React.Node {
|
|
return <TextBaseLineLayoutExample />;
|
|
},
|
|
},
|
|
{
|
|
title: 'Selectable Text',
|
|
name: 'selectableText',
|
|
render(): React.Node {
|
|
return (
|
|
<View>
|
|
<RNTesterText style={{userSelect: 'auto'}}>
|
|
Text element is selectable
|
|
</RNTesterText>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Text alignment',
|
|
name: 'textAlignment',
|
|
render(): React.Node {
|
|
return (
|
|
<View>
|
|
<RNTesterText
|
|
style={{textAlignVertical: 'top', borderWidth: 1, height: 75}}>
|
|
Text element aligned to the top via textAlignVertical
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{verticalAlign: 'top', borderWidth: 1, height: 75}}>
|
|
Text element aligned to the top via verticalAlign
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{textAlignVertical: 'center', borderWidth: 1, height: 75}}>
|
|
Text element aligned to the middle via textAlignVertical
|
|
</RNTesterText>
|
|
<RNTesterText
|
|
style={{verticalAlign: 'middle', borderWidth: 1, height: 75}}>
|
|
Text element aligned to the middle via verticalAlign
|
|
</RNTesterText>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Clipping',
|
|
name: 'clipping',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<RNTesterText
|
|
testID="text-clipping"
|
|
style={{
|
|
borderRadius: 50,
|
|
padding: 0,
|
|
borderColor: 'red',
|
|
borderWidth: 5,
|
|
overflow: 'hidden',
|
|
fontSize: 16,
|
|
}}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</RNTesterText>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
title: 'Box Shadow',
|
|
name: 'boxShadow',
|
|
render: function (): React.Node {
|
|
return (
|
|
<View>
|
|
<RNTesterText
|
|
testID="text-box-shadow"
|
|
style={{
|
|
borderRadius: 10,
|
|
boxShadow: '0 0 10px red',
|
|
}}>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</RNTesterText>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
...TextSharedExamples,
|
|
];
|
|
|
|
const 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',
|
|
},
|
|
wrappedText: {
|
|
maxWidth: 300,
|
|
},
|
|
});
|
|
|
|
module.exports = ({
|
|
title: 'Text',
|
|
documentationURL: 'https://reactnative.dev/docs/text',
|
|
category: 'Basic',
|
|
description: 'Base component for rendering styled text.',
|
|
displayName: 'TextExample',
|
|
examples,
|
|
}: RNTesterModule);
|