Long texts getting cropped in Text components React-Native - react-native

Question

I have a functional component Comment, which dynamically receives data to show in a socialmedia like application. If a long text is given as a comment, the height of the card is increased accordinly but the last line is cropped by a half. I tried with many solutions I found in other posts, like textBreakStrategy={'simple'} or flexWrap: 'wrap' in the container, but nothing is solving this issue.
As additional information, a lot of Comments are being rendered in a container ScrollView, and the ScrollView is inside a View with flex: 1. I dont think there's any problem with the container.
To give a better idea, here's a picture of a Comment with a long text getting cropped in the last line:
Here is the component's code:
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { formatDistanceToNow } from 'date-fns'
import { es } from 'date-fns/esm/locale'
const Comment = props => {
const amITheCreator = (comment, user) => {
if (comment && user) {
return comment.creator_id === user.id;
}
return false;
};
const user = props.user;
const comment = props.item;
const date = new Date(comment.createdAt);
const relativeDate = formatDistanceToNow(date, { addSuffix: true, locale: es });
const itsMine = amITheCreator(comment, user);
const [liked, setLiked] = useState(comment.liked);
const [likes, setLikes] = useState(comment.likes);
const toggleLike = () => {
if (liked) {
setLikes(likes - 1);
} else {
setLikes(likes + 1);
}
setLiked(!liked);
};
const onLike = () => {
toggleLike();
props.onLike(comment.id);
};
return (
<View style={{ ...styles.container, backgroundColor: itsMine ? '#0095ff' : 'white' }}>
<View style={styles.header}>
<Text style={{ ...styles.owner, color: itsMine ? 'white' : '#222b45' }}>{comment.name}</Text>
<Text style={{ ...styles.date, color: itsMine ? 'white' : '#8f9bb3' }}>{relativeDate}</Text>
</View>
<View style={styles.contentContainer}>
<Text style={{ ...styles.content, color: itsMine ? 'white' : '#222b45' }}>{comment.content}</Text>
</View>
<View style={styles.header}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<AntDesign name={'heart'} color={itsMine ? 'white' : '#8f9bb3'} size={14} />
<Text style={{ ...styles.likes, color: itsMine ? 'white' : '#8f9bb3' }}> {likes ? likes : '0'} Me gusta</Text>
</View>
<TouchableOpacity onPress={onLike}>
{liked ?
<AntDesign name={'heart'} color={'#ff2d55'} size={20} />
:
<AntDesign name={'hearto'} color={itsMine ? 'white' : '#8f9bb3'} size={20} />
}
</TouchableOpacity>
</View>
</View >
);
};
const styles = StyleSheet.create({
container: {
marginHorizontal: 15,
marginBottom: 15,
borderRadius: 7,
padding: 10,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
},
owner: {
fontWeight: 'bold',
},
date: {
fontSize: 12,
color: 'white',
},
contentContainer: {
padding: 5,
flexWrap: 'wrap',
},
content: {
fontSize: 16,
alignSelf: 'stretch',
width: '100%',
padding: 5,
},
likes: {
color: 'white',
fontSize: 15,
fontWeight: 'bold',
},
});
export default Comment;