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 ponent and rendered in a FlatList.

I've tried various binations 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

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 ponent and rendered in a FlatList.

I've tried various binations 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

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Mar 29, 2019 at 7:04 Necrolyte asked Mar 29, 2019 at 3:21 NecrolyteNecrolyte 5322 silver badges77 bronze badges 3

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

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 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.

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

Some{"\n"}text

or

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

Try this solution:

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

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

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

You can try this way:

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

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

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

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

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