Answers for "react native text componet ellipsizeMode"

react native text ellipsis

<Text numberOfLines={1} ellipsizeMode='end'}>

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'
    }
});