Text Truncation doesn't work in TouchableHighlight in a FlatList #25285
Description
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;