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

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.


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.






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>{'<br/>', '\n')}</Text>

You can try using like this


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 {


  return (
        1. line 1
        2. line 2
        3. line 3


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:

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) {

    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 = (

    return (
      <View style={{marginTop: 50}}>

See snack for a live 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.