javascript <br> - How can I insert a line break into a text component in React Native?

multiple wrap (9)

You can use {'\n'} as line breaks. Hi~ {'\n'} this is a test message.

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 />

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

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

this is a test message.

You can try using like this


Use \n in text and css white-space: pre-wrap;

I cannot test it right now but this should do it:

this is a test message.

You can also do:

this is a test message.

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.






If at all you are displaying data from state variables, use this.

<Text>{'<br/>', '\n')}</Text>

I needed a one-line solution branching in a ternary operator to keep my code nicely indented.

{foo ? `First line of text\nSecond line of text` : `Single line of text`}

Sublime syntax highlighting helps highlight the line-break character:

function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;

data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
    data[0] // 3
    data[1] // jet
    data[2] // b
    alert(GET("id")[0]) // return 3

javascript text react-native newline