From 2187007c4ef881b166bbecc1e548126884f09d63 Mon Sep 17 00:00:00 2001
From: Website Deployment Script
Used to truncate the text with an ellipsis after computing the text +};
Line Break mode. Works only with numberOfLines. +clip is working only for iOS
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.
Invoked on mount and layout changes with
{nativeEvent: {layout: {x, y, width, height}}}
This function is called on long press.
This function is called on press.
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> ); }