flex direction row items overflow how to fix this? - reactjs

Question

I have two rows, 1st one contains image and second one text. So when I use flexDirection: 'row' the text overflow the width and ellipsis not showing. Please have a look into my code.
<View style={styles.boxContainer}>
<View style={{marginRight: 10}}>
<Text style={{textAlign: 'left'}}>
<Image
style={styles.eventImg}
source={{uri: item.image}}
/>
</Text>
</View>
<View>
<Text style={{fontSize: 16, fontWeight: '500'}}>{item.title}</Text>
<Text style={{fontSize: 12, color: '#878787'}}>{item.formatted_date}</Text>
<Text style={{fontSize: 10}} numberOfLines={1} ellipsizeMode='tail'>{item.descr}</Text>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity
onPress={() =>
this.onPressReadMore(item.id)
}
>
<Text style={{fontSize: 12, padding: 5, backgroundColor: '#76ac42', color: '#ffffff', borderRadius: 3, textAlign: 'center', marginTop: 10, width: 80}}>Read More</Text>
</TouchableOpacity>
<Text style={{alignSelf: 'center', textAlign: 'right'}}>Registered</Text>
</View>
</View>
</View>
styles
const styles = StyleSheet.create({
container: {
backgroundColor: '#ffffff'
},
tabContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
},
tabSingle: {
flex: 1,
marginBottom: 5
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
textAlign: 'left',
paddingTop: 20,
paddingLeft: 20,
paddingRight: 20
},
boxContainer: {
backgroundColor: '#f6f6f6',
padding: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10,
flexDirection: 'row',
borderRadius: 5
},
eventImg: {
width: 80,
height: 80,
resizeMode: 'cover',
borderRadius: 5
}
});
Where am going wrong. I have tried many article and none of them seems working. Is there any way to fix this. Please have a look into the design,

Answer 1

Try this code:
<View style={{flexDirection:'row'}}>
<Text style={{fontSize: 10, flex: 1, flexWrap: 'wrap', flexShrink: 1}} ellipsizeMode='tail'>
{item.descr}
</Text>
</View>

Answer 2

Set the horizontal value in View, which contains the ellipsis.
<View style={{width: 200}} >
....
<Text style={{fontSize: 10}} numberOfLines={1} ellipsizeMode='tail'>{item.descr}
</Text>
Here's an example of a word-for-word abbreviation I've simplified.