Long texts getting cropped in Text components 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;

question from:https://stackoverflow.com/questions/65850335/long-texts-getting-cropped-in-text-components-react-native

Answer 1

Waitting for answers