0

I can't get line breaks to work inside a string variable with React Native. In my database I have documents with a field called name. Name is a string. Name can contains specific line breaks. Data is fetched in my React Native component and rendered in a FlatList.

I've tried various combinations of:

  • \n
  • {'\n'}

None of them work, the line break is render as text

\\ In database document
name: "Some\ntitle"
\\ or
name: "Some{'\n'}title"

\\ In React Native (simplified)
<FlatList
    renderItem={
        <Text>{item.name}<\Text>
    }
>
<\FlatList>

It is rendered as:
Some\ntitle or Some{'\n'}title

Instead of:
Some
title

----------- SOLUTION -----------

// In database
name: "Some\ntitle"

// In React Native
{item.name.replace('\n', '\n')}

// Render
Some
title

Necrolyte
  • 51
  • 2
  • 6
  • Possible duplicate of [How can I insert a line break into a component in React Native?](https://stackoverflow.com/questions/32469570/how-can-i-insert-a-line-break-into-a-text-component-in-react-native) – holydragon Mar 29 '19 at 03:30
  • Nope, like mentionned in my question {'\n'} isn't working in this case – Necrolyte Mar 29 '19 at 03:42
  • The question misses the part where you retrieve a string from a database. That's where the problem likely needs to be addressed. – Estus Flask Mar 29 '19 at 06:55

7 Answers7

4

That \n line feed appears literally means that it was escaped at some point, it is \\n in fact.

It can be {item.name.replace('\\n', '\n')}.

The actual problem is that it was escaped at all. This may affect other escape sequences and should be solved in the place where a string was escaped.

Estus Flask
  • 179,509
  • 61
  • 360
  • 499
  • You did it! Who's the real player? Who's the real MVP ?? – Necrolyte Mar 29 '19 at 07:00
  • Glad it helped. I'd suggest to check why a string was escaped when retrieved from a DB, there could be other characters that need treatment. – Estus Flask Mar 29 '19 at 07:02
  • Yep, will do. Thanks for your time – Necrolyte Mar 29 '19 at 07:06
  • I answered this 30 minutes prior in a comment below. https://stackoverflow.com/questions/55410052/how-to-render-in-react-native-a-line-break-inside-a-string-retrieved-from-a-data/55410110#comment97542872_55410110 – Larry Williamson Apr 03 '19 at 00:21
  • @lawrencealan I don't check other answers thoroughly so I was unaware of the comment. I don't consider SO a competition; I just provided the solution and the explanation. Any way, the comment should be a part of your answer because this is the real problem here. – Estus Flask Apr 03 '19 at 09:44
  • It's obviously a competition, there's a scoring system and leaderboards :) – my answer answered his original question, but he expanded the scope over time, to which I expanded my answer and awaited his response, instead of responding to my comment, he accepted your answer, which is the same. All good, just worth noting. – Larry Williamson Apr 03 '19 at 16:14
1

Use {"\n"} in place of \n:

Some{"\n"}text

or

<Text>{`Some\ntext`}</Text>
Maheer Ali
  • 34,163
  • 5
  • 36
  • 62
Larry Williamson
  • 1,142
  • 5
  • 17
  • your approach is correct but how will you do this for a dynamic data? like in this question `Some Text` is coming from database. So it will be like `item.name`. how will you set `item.name` in a new line? – Ankush Rishi Mar 29 '19 at 03:38
  • I've already tried this and it didn't work. The Text component is the renderItem of a FlatList component. name is a string stored in a mongodb collection. What Ankush Rishi said – Necrolyte Mar 29 '19 at 03:40
  • 1
    Use a replace – `{item.name.replace(/\\n/g,'\n')}` – Larry Williamson Mar 29 '19 at 06:31
1

Try this solution:

   {item.name.split("\n").map((i,key) => {
      return <Text key={key}>{i}</Text>;
   })}
Ankush Rishi
  • 2,645
  • 8
  • 24
  • 55
0

You can try this way:

<Text>{`{item.name}`}</Text>
Brijesh Shiroya
  • 3,272
  • 1
  • 12
  • 18
  • Thanks but it's unpractical: when the items of a list are documents from a database the content isn't hardcoded is the component, the line break has to be coded in the document then render in React Native – Necrolyte Mar 29 '19 at 04:52
  • no, i thought of that but the notation inside the component don't change anything: {item.name} same result as {`{item.name}`} – Necrolyte Mar 29 '19 at 05:41
  • Can you share your requirements more or share more code? – Brijesh Shiroya Mar 29 '19 at 05:46
0

Can you try this solution: we tested it and i seems working

  var str = item.name;
  var result = str.split("\n"); 
  return result.map((i, key) => <Text key={key}>{i + "\n"}</Text>);
Jebin Benny
  • 858
  • 1
  • 4
  • 9
0

Using regex, replace all the \\n to \n

const t = d.replace(/\\n/g, "\n");
Anah
  • 21
  • 3
-1

Try styling the component with style={{ whiteSpace: "pre" }} to preserve the spaces

<Text style={{ whiteSpace: "pre" }}>{item.name}</Text>
iamaatoh
  • 730
  • 5
  • 12