Text Truncation doesn't work in TouchableHighlight in a FlatList

[abp437]

React Native version:
0.59.1

Description

I've a basic component in which I have added support only for portrait mode inside my app, so I need the text truncated at the end of line, but text truncation doesn't seem to work with the numberOfLines prop for TouchableHighlight in a FlatList.
Also please note I need TouchableHighlight since I want to navigate to different routes on press of the TouchableHighlight.
I'd expected the text to truncate at the end.
Please guide me with what's going wrong here.

Steps To Reproduce:

• Just run the below code in a React Native File

import React, { useState, useEffect } from 'react';
import {
    TouchableHighlight, FlatList, View, Text,
} from 'react-native';

const SomeComponent = () => {
    const [list, setList] = useState([]);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos')
            .then(response => response.json())
            .then(listData => setList(listData));
    }, []);

    return (
        <FlatList
            style={{
                flex: 1,
            }}
            data={list}
            renderItem={({ item }) => (
                <TouchableHighlight
                    underlayColor="#eee"
                    style={{
                        display: 'flex',
                        flexDirection: 'row',
                        borderBottomColor: '#bdbdbd',
                        borderBottomWidth: 1,
                        paddingVertical: 12,
                        paddingHorizontal: 15,
                    }}
                    onPress={() => console.log('Clicked Me')}
                >
                    <View style={{ display: 'flex', flexDirection: 'row' }}>
                        <View style={{
                            width: 50,
                            height: 50,
                            backgroundColor: '#bdbdbd',
                            borderRadius: 50 / 2,
                        }}
                        />
                        <View style={{ marginLeft: 10 }}>
                            <Text
                                numberOfLines={1}
                                style={{
                                    flex: 1,
                                    fontWeight: '700',
                                }}
                            >
                                {item.title}
                            </Text>
                            <Text>Something</Text>
                        </View>
                    </View>
                </TouchableHighlight>
            )}
            keyExtractor={item => item.id.toString()}
        />
    );
};

export default SomeComponent;

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.