diff --git a/releases/next/docs/text.html b/releases/next/docs/text.html index 70079aaf9b8..cab3d8d7ff4 100644 --- a/releases/next/docs/text.html +++ b/releases/next/docs/text.html @@ -23,7 +23,8 @@ each other on account of the literal newlines:

: 20, fontWeight: 'bold', }, -};

Props #

accessible #

numberOfLines number #

Used to truncate the text with an ellipsis after computing the text +};

Props #

accessible #

lineBreakMode enum('head', 'middle', 'tail', 'clip') #

Line Break mode. Works only with numberOfLines. +clip is working only for iOS

numberOfLines number #

Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.

onLayout function #

Invoked on mount and layout changes with

{nativeEvent: {layout: {x, y, width, height}}}

onLongPress function #

This function is called on long press.

onPress function #

This function is called on press.

style style #

View#style...
color color
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, @@ -503,6 +504,26 @@ exports.examples /View> ); }, +}, { + title: 'Line break mode', + render: function() { + return ( + <View> + <Text numberOfLines={1}> + This very long text should be truncated with dots in the end. + </Text> + <Text lineBreakMode="middle" numberOfLines={1}> + This very long text should be truncated with dots in the middle. + </Text> + <Text lineBreakMode="head" numberOfLines={1}> + This very long text should be truncated with dots in the beginning. + </Text> + <Text lineBreakMode="clip" numberOfLines={1}> + This very looooooooooooooooooooooooooooong text should be clipped. + </Text> + </View> + ); + }, }]; var styles = StyleSheet.create({ @@ -886,6 +907,17 @@ exports.examples /Text> </UIExplorerBlock> + <UIExplorerBlock title="Line break mode"> + <Text numberOfLines={1}> + This very long text should be truncated with dots in the end. + </Text> + <Text lineBreakMode="middle" numberOfLines={1}> + This very long text should be truncated with dots in the middle. + </Text> + <Text lineBreakMode="head" numberOfLines={1}> + This very long text should be truncated with dots in the beginning. + </Text> + </UIExplorerBlock> </UIExplorerPage> ); }