How to add line breaks to text on React Native?

Question

I want to create a comment component like this: The problem is I don't find a way to make the styling for the lorem ipusm text. I tried the next:

 <View {...props} style={[styles.main, props.style]}>
  <View style={{ display: "flex", flexDirection: "row" }}>
    <Avatar user={user} />
    <Text style={styles.username}>{user.username}</Text>
  </View>
  <Text style={styles.comment}>
    {comment}
  </Text>
</View>

Where comment would be the lorem Ipsum text. And for the styles:

export const useCommentTheme = () =>
  useCreateStyle((colors) => ({
    main: {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      flexWrap: "wrap",
    },
    username: {
      color: colors.primary,
      fontFamily: poppins.extraBold,
      marginLeft: 5,
      fontSize: 16,
    },
    comment: {
      color: colors.text,
      marginLeft: 10,
      fontSize: 14,
    },
  }));

What this does is putting all the text under the Avatar and username, not at the side of the username, and add breaks when text overflows. How can I do to make the text breaks

Answer 1

You can use {'\n'} e.g.

const somePhrase =
    'Apples to oranges. Waffles to donuts. One two three four five six seven eight nine.';
  return (
    <View style={{flex:1,justifyContent:'center'}}>
      <Text style={{ textAlign: 'center' }}>
        {somePhrase.substring(0, 19)}
        {'\n'}
        {somePhrase.substring(19, 37)}
        {'\n'}
        {somePhrase.substring(37)}
      </Text>
    </View>
  );

Answer 2

It's simple, just add numberOfLines:

<Text
  numberOfLines={2} // change here as you need
>
  A very big text that should break into two lines ... 
</Text>