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
  • 53
  • 2
  • 7
  • 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

8 Answers8

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
  • 206,104
  • 70
  • 425
  • 565
  • You did it! Who's the real player? Who's the real MVP ?? – Necrolyte Mar 29 '19 at 07:00
  • 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
  • 35,834
  • 5
  • 42
  • 73
Larry Williamson
  • 1,149
  • 5
  • 18
  • 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,861
  • 8
  • 27
  • 59
1

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

const t = d.replace(/\\n/g, "\n");
Anah
  • 51
  • 3
0

You can try this way:

<Text>{`{item.name}`}</Text>
Brijesh Shiroya
  • 3,323
  • 1
  • 13
  • 20
  • 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
  • 933
  • 1
  • 5
  • 9
0

When I've stored document content in a database I've used JSON.stringify() to format the string before saving it and that will cause the string to include the raw \n in the string like what you have. To then render the string with the \n actually converted to new lines you should be able to simply pass that string into JSON.parse().

Michael Hirsch
  • 11
  • 1
-2

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

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