CODEWITHSUNDEEP
javascriptreact-native
Calm
Calm

Reputation: 51

Line break inside string (React Native)

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"

Upvotes: 1

Views: 20926

Answers (4)

Akshay Khandarkar
Akshay Khandarkar

Reputation: 81

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

Upvotes: 0

hang-coder
hang-coder

Reputation: 440

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>

Upvotes: 1

Kevin H Griffith
Kevin H Griffith

Reputation: 315

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.

Upvotes: 14

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

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: enter image description here

Upvotes: 6

Related Questions