How to render in React Native a line break inside a string retrieved from a database?

Question

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

Possible duplicate of How can I insert a line break into a <Text> component in React Native? — holydragon
– holydragon, Commented Mar 29, 2019 at 3:30
Nope, like mentionned in my question {'\n'} isn't working in this case — Necrolyte
– Necrolyte, Commented Mar 29, 2019 at 3: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
– Estus Flask, Commented Mar 29, 2019 at 6:55

Estus Flask · Accepted Answer · 2019-03-29 07:00:37Z

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.

edited Mar 29, 2019 at 7:00

answered Mar 29, 2019 at 6:53

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Necrolyte Over a year ago

You did it! Who's the real player? Who's the real MVP ??

Necrolyte Over a year ago

Yep, will do. Thanks for your time 🙏

Larry Williamson Over a year ago

I answered this 30 minutes prior in a comment below. stackoverflow.com/questions/55410052/…

Estus Flask Over a year ago

@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.

Larry Williamson Over a year ago

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.

Maheer Ali · Accepted Answer · 2019-03-29 03:35:08Z

1

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

Some{"\n"}text

or

<Text>{`Some\ntext`}</Text>

edited Mar 29, 2019 at 3:35

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

answered Mar 29, 2019 at 3:31

Larry Williamson

1,1236 silver badges19 bronze badges

3 Comments

Ankush Rishi Over a year ago

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?

Necrolyte Over a year ago

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

Larry Williamson Over a year ago

Use a replace – <Text>{item.name.replace(/\\n/g,'\n')}</Text>

Ankush Rishi · Accepted Answer · 2019-03-29 03:44:12Z

1

Try this solution:

   {item.name.split("\n").map((i,key) => {
      return <Text key={key}>{i}</Text>;
   })}

answered Mar 29, 2019 at 3:44

Ankush Rishi

3,2008 gold badges30 silver badges61 bronze badges

1 Comment

four-eyes Over a year ago

This is a nice solution!

Anah · Accepted Answer · 2021-06-23 19:26:46Z

1

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

const t = d.replace(/\\n/g, "\n");

answered Jun 23, 2021 at 19:26

Anah

614 bronze badges

Comments

Brijesh Shiroya · Accepted Answer · 2019-03-29 04:55:23Z

0

You can try this way:

<Text>{`{item.name}`}</Text>

edited Mar 29, 2019 at 4:55

answered Mar 29, 2019 at 4:27

Brijesh Shiroya

3,3831 gold badge15 silver badges24 bronze badges

3 Comments

Necrolyte Over a year ago

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 Over a year ago

no, i thought of that but the notation inside the component don't change anything: <Component>{item.name}</Component> same result as <Component>{{item.name}}</Component>

Brijesh Shiroya Over a year ago

Can you share your requirements more or share more code?

Jebin Benny · Accepted Answer · 2019-03-29 07:07:16Z

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>);

edited Mar 29, 2019 at 7:07

answered Mar 29, 2019 at 5:31

Jebin Benny

9511 gold badge5 silver badges9 bronze badges

2 Comments

Jebin Benny Over a year ago

I just updated the code, and it's working for me. please check

Necrolyte Over a year ago

I suppose it should works for me too (@estus solution seems better though) but I can't manage to integrate it with my FlatList

Michael Hirsch · Accepted Answer · 2022-07-14 16:39:05Z

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().

answered Jul 14, 2022 at 16:39

Michael Hirsch

111 bronze badge

Comments

iamaatoh · Accepted Answer · 2019-03-29 03:44:50Z

-2

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

<Text style={{ whiteSpace: "pre" }}>{item.name}</Text>

answered Mar 29, 2019 at 3:44

iamaatoh

7965 silver badges12 bronze badges

1 Comment

Necrolyte Over a year ago

whiteSpace isn't a React Native property

Collectives™ on Stack Overflow

How to render in React Native a line break inside a string retrieved from a database?

8 Answers 8

5 Comments

3 Comments

1 Comment

Comments

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

3 Comments

1 Comment

Comments

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related