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

manpreet Best Answer 2 years ago

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

manpreet 2 years ago

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.