Line break inside string (React Native)

Question

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"

Kevin H Griffith · Accepted Answer · 2020-04-28 15:40:36Z

15

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.

answered Apr 28, 2020 at 15:40

Kevin H Griffith

3354 silver badges9 bronze badges

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

4 Comments

Kevin H Griffith Over a year ago

@contrl What happens is that \n is initially interpreted as a string when it is fetched from the database. However, when calling replace, \n can then be perceived as a new line.

Hinrich Over a year ago

this is pretty weird, but it actually did the trick for me.

contrl Over a year ago

@KevinHGriffith I still don't fully grasp the mechanism underlying this behavior but thanks for your answer :)

Kevin H Griffith Over a year ago

@contrl sorry for not being able to fully explain why it works. Glad I could help you out though. :)

Vahid Boreiri · Accepted Answer · 2019-02-20 23:15:46Z

6

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:

edited Feb 20, 2019 at 23:15

answered Feb 20, 2019 at 22:43

Vahid Boreiri

3,4561 gold badge21 silver badges35 bronze badges

1 Comment

Calm Over a year ago

Yes, this solution works, when i enter my text manually, but in my app this text comes from Facebook Graph API and i can't change it manually.

hang-coder · Accepted Answer · 2021-04-10 10:34:59Z

1

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>

answered Apr 10, 2021 at 10:34

hang-coder

4504 silver badges8 bronze badges

1 Comment

Westy Over a year ago

This works well, thanks! My only comment is that you don't really need the backticks, since you're not doing any variable evaluation - single quotes would be sufficient.

Akshay Khandarkar · Accepted Answer · 2021-09-29 08:09:11Z

0

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

answered Sep 29, 2021 at 8:09

Akshay Khandarkar

811 silver badge11 bronze badges

Collectives™ on Stack Overflow

Line break inside string (React Native)

4 Answers 4

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related