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

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.

Answers


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

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

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.


Use:

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

Result:

Hi,

Curtis!


This worked for me

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

(react-native 0.41.0)


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


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

<Text>{this.state.user.bio.replace('<br/>', '\n')}</Text>

You can try using like this

<text>{`${val}\n`}</text>

Better yet: if you use styled-components , you can do something like this:

import React, { Component } from 'react';
import styled from 'styled-components';

const Text = styled.Text`
  text-align: left;
  font-size: 20px;
`;

export default class extends Component {

 (...)

 render(){
  return (
    <View>
      <Text>{`
        1. line 1
        2. line 2
        3. line 3
      `}</Text>
    </View>
  );
 }

}

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:


You can use `` like this:

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

You can do it as follows:

{'Create\nYour Account'}


You can also just add it as a constant in your render method so its easy to reuse:

  render() {
    const br = `\n`;
     return (
        <Text>Capital Street{br}Cambridge{br}CB11 5XE{br}United Kingdom</Text>
     )  
  }

In case anyone is looking for a solution where you want to have a new line for each string in an array you could do something like this:

import * as React from 'react';
import { Text, View} from 'react-native';


export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      description: ['Line 1', 'Line 2', 'Line 3'],
    };
  }

  render() {
    // Separate each string with a new line
    let description = this.state.description.join('\n\n');

    let descriptionElement = (
      <Text>{description}</Text>
    );

    return (
      <View style={{marginTop: 50}}>
        {descriptionElement}
      </View>
    );
  }
}

See snack for a live example: https://snack.expo.io/@cmacdonnacha/react-native-new-break-line-example


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


Need Your Help

JWT (JSON Web Token) library for Java

java json web token jwt

I am working on a web application developed using Java and AngularJS and chose to implement token authentication and authorization.