Question 34937 in React native Question posted in
The official React Native documentation can be found here.

How to add line breaks to text on React Native?

I want to create a comment component like this:
Comment component
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

Tags:

2

Answers


  1. 0

    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>
  );
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search