ellipsizemode react native example
import React, { Component } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
export default class App extends Component<{}>
{
render()
{
return(
<View style = { styles.container }>
<View style = { styles.textHolder }>
<Text style = { styles.title }>Ellipsis from Tail (End)</Text>
<Text numberOfLines = { 1 } style = { styles.content }>Ellipsis Text from Tail React Native Demo.</Text>
</View>
<View style = { styles.textHolder }>
<Text style = { styles.title }>Ellipsis from Head (Start)</Text>
<Text numberOfLines = { 1 } style = { styles.content } ellipsizeMode = 'head'>Ellipsis Text from Head React Native Demo.</Text>
</View>
<View style = { styles.textHolder }>
<Text style = { styles.title }>Ellipsis from Middle</Text>
<Text numberOfLines = { 1 } style = { styles.content } ellipsizeMode = 'middle'>Ellipsis Text from Middle React Native Demo.</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create(
{
container:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee',
paddingHorizontal: 25,
paddingTop: (Platform.OS == 'ios') ? 20 : 0
},
textHolder:
{
paddingVertical: 15
},
title:
{
color: 'red',
fontWeight: 'bold',
fontSize: 16
},
content:
{
fontSize: 20,
color: 'black'
}
});