ellipsizemode react native example

1import React, { Component } from 'react';
2import { View, Text, StyleSheet, Platform } from 'react-native';
3
4export default class App extends Component<{}>
5{
6    render()
7    {
8        return(
9            <View style = { styles.container }>
10                <View style = { styles.textHolder }>
11                    <Text style = { styles.title }>Ellipsis from Tail (End)</Text>
12                    <Text numberOfLines = { 1 } style = { styles.content }>Ellipsis Text from Tail React Native Demo.</Text>
13                </View>
14
15                <View style = { styles.textHolder }>
16                    <Text style = { styles.title }>Ellipsis from Head (Start)</Text>
17                    <Text numberOfLines = { 1 } style = { styles.content } ellipsizeMode = 'head'>Ellipsis Text from Head React Native Demo.</Text>
18                </View>
19
20                <View style = { styles.textHolder }>
21                    <Text style = { styles.title }>Ellipsis from Middle</Text>
22                    <Text numberOfLines = { 1 } style = { styles.content } ellipsizeMode = 'middle'>Ellipsis Text from Middle React Native Demo.</Text>
23                </View>
24            </View>
25        );
26    }
27}
28
29const styles = StyleSheet.create(
30{
31    container:
32    {
33        flex: 1,
34        justifyContent: 'center',
35        alignItems: 'center',
36        backgroundColor: '#eee',
37        paddingHorizontal: 25,
38        paddingTop: (Platform.OS == 'ios') ? 20 : 0
39    },
40
41    textHolder:
42    {
43        paddingVertical: 15
44    },
45
46    title:
47    {
48        color: 'red',
49        fontWeight: 'bold',
50        fontSize: 16
51    },
52
53    content:
54    {
55        fontSize: 20,
56        color: 'black'
57    }
58});