I'm developing an app where at some point app receives a string from Facebook Graph API.

String looks like that:

"Some text some text, some text.\n\nMore text and more\n\nAnd little bit more".

How can I replace \n\n with line break what actually works in code?

I know how to replace this with something:

var ret = stringToReplace.replace('\n\n','<br />');

But how can i replace it with working line break. I have tried to replace with '\n' '\r\n'. Every replacement just acts like usual text. For example:

"Some text some text, some text.<br />More text and more<br />And little bit more"

I'm developing an app where at some point app receives a string from Facebook Graph API.

String looks like that:

"Some text some text, some text.\n\nMore text and more\n\nAnd little bit more".

How can I replace \n\n with line break what actually works in code?

I know how to replace this with something:

var ret = stringToReplace.replace('\n\n','<br />');

But how can i replace it with working line break. I have tried to replace with '\n' '\r\n'. Every replacement just acts like usual text. For example:

"Some text some text, some text.<br />More text and more<br />And little bit more"

• javascript
• react-native

4 Answers 4

I know I am pretty late to the party but I recently stumble across the same problem when I was fetching data with \n from a database. The solution that worked for me was just to run the replace method and replace incoming \n with jsx \n. So in your case it would be:

var ret = stringToReplace.replace(/\\n/g,'\n');

Looks like a really stupid solution but it worked for me.

I test the following code and it works. You should just wrap your text in a <Text> component.

export default class App extends React.Component {
  text = "Some text some text, some text.\n\nMore text and more\n\nAnd little bit more"

  render() {
    return (
      <View style={styles.container}>
        <Text>
          {this.text}
        </Text>
      </View>
    );
  }
}

The result of this code is like this:

React/ React native has line break object {`\n`}, see below code sample

<Text style={{margin: 10}}>
 Our Address {`\n`}

xxx, Clear Water Bay Road {`\n`}
Clear Water Bay, Kowloon {`\n`}
HONG KONG {`\n`}
Tel: + xx {`\n`}
Fax: + xx {`\n`}                    
</Text>

Use template literals/backticks as wrapper instead of double-quotes. It worked for me.