diff --git a/releases/next/docs/text.html b/releases/next/docs/text.html
index a1a6a530cb5..7491513e6c2 100644
--- a/releases/next/docs/text.html
+++ b/releases/next/docs/text.html
@@ -48,7 +48,9 @@ layout, including line wrapping, such that the total number of lines
does not exceed this number.This prop is commonly used with ellipsizeMode.
onLayout function #
Invoked on mount and layout changes with
{nativeEvent: {layout: {x, y, width, height}}}
onLongPress function #
This function is called on long press.
e.g., `onLongPress={this.increaseSize}>``
onPress function #
This function is called on press.
e.g., `onPress={() => console.log('1st')}``
selectable bool #
Lets the user select text, to use the native copy and paste functionality.
style style #
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') Specifies font weight. The values 'normal' and 'bold' are supported for
most fonts. Not all fonts have a variant for each of the numeric values,
in that case the closest one is chosen.
lineHeight number
textAlign enum('auto', 'left', 'right', 'center', 'justify') Specifies text alignment. The value 'justify' is only supported on iOS and
-fallbacks to left on Android.
textDecorationLine enum('none', 'underline', 'line-through', 'underline line-through')
textShadowOffset {width: number, height: number}
textShadowRadius number
androidtextAlignVertical enum('auto', 'top', 'bottom', 'center')
iosfontVariant [enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]
iosletterSpacing number
iostextDecorationColor color
iostextDecorationStyle enum('solid', 'double', 'dotted', 'dashed')
ioswritingDirection enum('auto', 'ltr', 'rtl')
testID string #
Used to locate this view in end-to-end tests.
iosadjustsFontSizeToFit bool #
Specifies whether font should be scaled down automatically to fit given style constraints.
iosallowFontScaling bool #
Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
+fallbacks to left on Android.
textDecorationLine enum('none', 'underline', 'line-through', 'underline line-through')
textShadowOffset {width: number, height: number}
textShadowRadius number
androidincludeFontPadding bool Set to false to remove extra font padding intended to make space for certain ascenders / descenders.
+With some fonts, this padding can make text look slightly misaligned when centered vertically.
+For best results also set textAlignVertical to center. Default is true.
androidtextAlignVertical enum('auto', 'top', 'bottom', 'center')
iosfontVariant [enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]
iosletterSpacing number
iostextDecorationColor color
iostextDecorationStyle enum('solid', 'double', 'dotted', 'dashed')
ioswritingDirection enum('auto', 'ltr', 'rtl')
testID string #
Used to locate this view in end-to-end tests.
iosadjustsFontSizeToFit bool #
Specifies whether font should be scaled down automatically to fit given style constraints.
iosallowFontScaling bool #
Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
default is true.
iosminimumFontScale number #
Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
iossuppressHighlighting bool #
When true, no visual change is made when text is pressed down. By
default, a gray oval highlights the text on press down.
You can edit the content above on GitHub and send us a pull request!
Description #
Nested Text #
Both iOS and Android allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (NSAttributedString on iOS, SpannableString on Android). In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
@@ -1090,6 +1092,23 @@ class TextExample extends with dots in the beginning.
</Text>
</UIExplorerBlock>
+ <UIExplorerBlock title="Include Font Padding">
+ <View style={{flexDirection: 'row', justifyContent: 'space-around', marginBottom: 10}}>
+ <View style={{alignItems: 'center'}}>
+ <Text style={styles.includeFontPaddingText}>
+ Ey
+ </Text>
+ <Text>Default</Text>
+ </View>
+ <View style={{alignItems: 'center'}}>
+ <Text style={[styles.includeFontPaddingText, {includeFontPadding: false, marginLeft: 10}]}>
+ Ey
+ </Text>
+ <Text>includeFontPadding: false</Text>
+ </View>
+ </View>
+ <Text>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.</Text>
+ </UIExplorerBlock>
</UIExplorerPage>
);
}
@@ -1100,6 +1119,14 @@ class TextExample extends : 5,
backgroundColor: 'rgba(100, 100, 100, 0.3)'
},
+ includeFontPaddingText: {
+ fontSize: 120,
+ fontFamily: 'sans-serif',
+ backgroundColor: '#EEEEEE',
+ color: '#000000',
+ textAlignVertical: 'center',
+ alignSelf: 'center',
+ }
});
module.exports = TextExample;
