How can I insert a line break into a <Text> component in React Native?

05/03/2020 21:00:02

I want to insert a new line (like \r\n, <br />) in a Text component in React Native.

If I have:

<text><br />
Hi~<br >
this is a test message.<br />
</text>

Then React Native renders Hi~ this is a test message.

Is it possible render text to add a new line like so:

Hi~
this is a test message.

Verified Answer (624 Votes)

09/09/2015 17:55:31

This should do it:

<Text>
Hi~{"\n"}
this is a test message.
</Text>
624

Answer #2 (87 Votes)

11/21/2016 11:31:09

You can also do:

<Text>{`
Hi~
this is a test message.
`}</Text>

Easier in my opinion, because you don't have to insert stuff within the string; just wrap it once and it keeps all your line-breaks.

87

Answer #3 (30 Votes)

05/17/2018 14:46:59

Use:

<Text>{`Hi,\nCurtis!`}</Text>

Result:

Hi,

Curtis!

30
3
Hack Hex uses Stack Exchance API by the Stack Exchange Inc. to scrape questions/answers under Creative Commons license.