reactnative : can't get ellipsizeMode to work

Question

I am trying to truncate a text in my reactnative app. I've decided to use the "ellipsizeMode" attribute, but I can't get it to work.

I wrote a demo of the problem :

'use strict';

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';


export class EllipsizeModeTest extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{'first part | '}</Text>
                <Text style={styles.text} numberOfLines={1} ellipsizeMode={'tail'}>
                    {'a text too long to be displayed on the screen'}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
    },
    text: {
        fontSize: 20,
    }
});

Now the text does not get truncated, any idea why ?

Answer 1

I had the same problem, it's enough to have the size of the element bound to a value. So if you define width, or add a flex value will work.

<View style={{width: 200}}><Text ellipsizeMode='tail' numberOfLines={1}></View>