652

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.
2
  • 1
    You can use \n where you want to break the line.
    – Sid009
    Commented Feb 1, 2020 at 8:18
  • no \n will not work. i used. i would suggest use html tags for render and use css or simply <p> text </p>. you can use.
    – pankaj
    Commented Mar 16, 2021 at 9:55

40 Answers 40

1090

This should do it:

<Text>
Hi~{"\n"}
this is a test message.
</Text>
12
  • 64
    Is there a way to do it with string from variable so I could use: <Text>{content}</Text> ? Commented Mar 29, 2016 at 14:17
  • 4
    \n is a line break Commented Mar 30, 2016 at 15:45
  • 13
    Thanks for this. I ended up making a line break component for quick access var Br = React.createClass({ render() { return ( <Text> {"\n"}{"\n"} </Text> ) } }) Commented Jul 15, 2016 at 11:09
  • 12
    What if the text is in a string variable? <Text>{comments}</Text> We cannot use the {\n} logic there. Then how? Commented Jan 14, 2019 at 15:30
  • 14
    If the text comes from a prop, make sure you pass it like this: <Component text={"Line1\nLine2"} /> instead of <Component text="Line1\nLine2" /> (notice the added curly braces)
    – qwertzguy
    Commented Feb 15, 2020 at 21:38
183

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.

9
  • 48
    this is cleanest solution so far, together with white-space: pre-line; Commented May 19, 2017 at 17:43
  • 7
    @Tomasz: I think there is no white-space or whiteSpace: -Stylesheet for <Text>-Tag in react-native - or am I wrong?
    – suther
    Commented Aug 3, 2017 at 10:01
  • 1
    Template literals are clean and neat compare to accepted answer Commented Oct 10, 2018 at 16:25
  • 2
    agree, style of "white-space: pre-line" is the most clean solution, it works, and that's actually how html works.
    – scotty
    Commented Mar 4, 2022 at 7:19
  • 2
    I agree that this is the cleanest solution but it does not work on React Native which is what the question is asking. There is not a direct replacement for white-space on native and it doesn't work in all the cases. Commented May 2, 2022 at 23:21
79

Use:

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

Result:

Hi,

Curtis!

3
  • 12
    This seems not to be working when the message is a string variable: <Text>{message}</Text> Commented Jan 14, 2019 at 16:33
  • 1
    You can use function like this: splitLine = message => { ... } and RegExp in it, then <Text>{this.splitLine(message)}</Text>
    – COdek
    Commented Feb 2, 2019 at 18:07
  • If the passed text is empty the Text element will display "undefined". Commented Jan 8, 2023 at 17:54
69

Solution 1:

<Text>
  line 1{"\n"}
  line 2
</Text>

Solution 2:

 <Text>{`
  line 1
  line 2
 `}</Text>

Solution 3:

Here was my solution of handling multiple <br/> tags:

<Text style={{ whiteSpace: "pre-line" }}>
    {"Hi<br/> this is a test message.".split("<br/>").join("\n")}
</Text>

Solution 4:

use maxWidth for auto line break

<Text style={{ maxWidth:200}}>this is a test message. this is a test message</Text>
1
  • 6
    my up vote is for white-space: pre-line in solution 3 which allows you pass in a variable with \n style breaks and get them rendered Commented Sep 28, 2022 at 3:48
25

This worked for me

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

(react-native 0.41.0)

0
23

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

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

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

14

https://stackoverflow.com/a/44845810/10480776 @Edison D'souza's answer was exactly what I was looking for. However, it was only replacing the first occurrence of the string. Here was my solution to handling multiple <br/> tags:

<Typography style={{ whiteSpace: "pre-line" }}>
    {shortDescription.split("<br/>").join("\n")}
</Typography>

Sorry, I couldn't comment on his post due to the reputation score limitation.

1
  • This solution worked for me! Inside of the Typography I had this: {"${t('RateOptions.Details', { defaultValue: 'Rate info' })}".split('<br/>').join('\n')} Note the double quotes are supposed to be backticks Commented Apr 27, 2022 at 16:46
12

EDIT :

if you use Template Literals (see within the <Text> element) , you can also just add the line breaks like this:

import React, { Component } from 'react';
import { Text, View } from "react-native";

export default class extends Component {

 (...)

 render(){
  return (
    <View>
      <Text>{`
        1. line 1
        2. line 2
        3. line 3
      `}</Text>
    </View>
  );
 }
}
5
  • 3
    This has nothing to do with styled-components and will work no matter if you use them or not. Commented May 18, 2020 at 22:55
  • 2
    I think the comment above is saying that styled-components isn't what is providing the line-break, so there's no reason to use or mention it as the solution. It's the template literal that's providing the line break. Also, suggesting to install a new package to solve a simple problem is not necessary.
    – M -
    Commented Nov 2, 2021 at 17:35
  • 1
    This answer suggests adding styled-components but it's actually the template literal that provides the break, therefore styled-components does not participate in the solution at all. I should have made this more clear in my comment, sorry. Anyway it's hard to find a "constructive way to improve the answer" if it misses the point. If you're still looking for one though, then it would say something about removing styled-components from it leaving only template string literal, which are actually the solution (one of possible). Commented Nov 3, 2021 at 8:41
  • Thank you for the cooperation, what I meant was not that I don't know how to update the answer, but that instead of writing comments like that does not really help anyone, and if one thing stackoverflow teaches us is that cooperation makes wonders, therefore it's really appreciated if everybody replies in a constructive way. But honestly thanks for your contributions.
    – Telmo Dias
    Commented Nov 3, 2021 at 9:09
  • 1
    This suggestion helped to solve my case! Bravo Commented Apr 14, 2023 at 3:28
12

Use {"\n"} where you want the line break

7

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:

Sublime syntax highlight

6

this is a nice question , you can do this in multiple ways First

<View>
    <Text>
        Hi this is first line  {\n}  hi this is second line 
    </Text>
</View>

which means you can use {\n} backslash n to break the line

Second

<View>
     <Text>
         Hi this is first line
     </Text>
     <View>
         <Text>
             hi this is second line 
         </Text>
     </View>
</View>

which means you can use another <View> component inside first <View> and wrap it around <Text> component

Happy Coding

5

You can try using like this

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

You can use `` like this:

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

You can do it as follows:

{'Create\nYour Account'}

1
  • It worked form as well here <Header headerText={'Muhammad\n Tayyab\n Rana'} subHeadline="Web Developer and Designer" /> Commented Mar 22, 2019 at 16:58
3

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>
     )  
  }
3

Just put {'\n'} within the Text tag

<Text>

   Hello {'\n'}

   World!

</Text>
3

One of the cleanest and most flexible way would be using Template Literals.

An advantage of using this is, if you want to display the content of string variable in the text body, it is cleaner and straight forward.

(Please note the usage of backtick characters)

const customMessage = 'This is a test message';
<Text>
{`
  Hi~
  ${customMessage}
`}
</Text>

Would result in

Hi~
This is a test message
3

Here is a solution for React (not React Native) using TypeScript.

The same concept can be applied to React Native

import React from 'react';

type Props = {
  children: string;
  Wrapper?: any;
}

/**
 * Automatically break lines for text
 *
 * Avoids relying on <br /> for every line break
 *
 * @example
 * <Text>
 *   {`
 *     First line
 *
 *     Another line, which will respect line break
 *  `}
 * </Text>
 * @param props
 */
export const Text: React.FunctionComponent<Props> = (props) => {
  const { children, Wrapper = 'div' } = props;

  return (
    <Wrapper style={{ whiteSpace: 'pre-line' }}>
      {children}
    </Wrapper>
  );
};

export default Text;

Usage:

<Text>
  {`
    This page uses server side rendering (SSR)

    Each page refresh (either SSR or CSR) queries the GraphQL API and displays products below:
  `}
</Text>

Displays: enter image description here

3

Simple use backticks (ES 6 feature)

SOLUTION 1

const Message = 'This is a message';

<Text>
{`
  Hi~
  ${Message}
`}
</Text>

SOLUTION 2 Add "\n" in Text

<Text>
Hi~{"\n"}
This is a message.
</Text>
0
3

I know this is quite old but I came up with a solution for automatically breaking lines which allows you to pass in the text in the usual way (no trickery)

I created the following component

import React, {} from "react";
import {Text} from "react-native";

function MultiLineText({children,  ...otherProps}) {

const splits = children.split("\\n")
console.log(splits);
const items = []
for (let s of splits){
  items.push(s)
  items.push("\n")
}

  return (
    <Text {...otherProps}>{items}</Text>
  );
}


export default MultiLineText;

Then you can just use it like so..

<MultiLineText style={styles.text}>This is the first line\nThis is teh second line</MultiLineText>
3

There are two main solutions for this.

Method 1: Just add the '\n' like below

<Text>
   First Line {'\n'} Second Line.
</Text>

Method 2: Add the line break it in the string literals, like below.

 <Text>
   `First Line  
   Second Line`.
 </Text>

For more information, please refer the below tutorial.

https://sourcefreeze.com/how-to-insert-a-line-break-into-a-text-component-in-react-native/

1
  • Should be {`First line etc`} Commented Sep 11, 2022 at 15:29
3

Y'all can try this if trying to use a variable inside an element.

<Text>{newText}</Text>

const newText= text.body.split("\n").map((item, key) => {
    return (
      <span key={key}>
        {item}
        <br />
      </span>
    );
  });

2

do this:

<Text>

 { "Hi~ \n this is a test message." }

<Text/>

2

If you're getting your data from a state variable or props, the Text component has a style prop with minWidth, maxWidth.

example

const {height,width} = Dimensions.get('screen');

const string = `This is the description coming from the state variable, It may long thank this` 

<Text style={{ maxWidth:width/2}}>{string}</Text>

This will display text 50% width of your screen

1

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

2
  • 1
    I don’t see whiteSpace listed as a React Native Text Style Prop. Note that this isn’t HTML.
    – binki
    Commented Sep 3, 2018 at 0:56
  • for reference this works in react js. Others for some reason not working for me. Commented Apr 7, 2020 at 7:45
1

Another way to insert <br> between text lines that are defined in an array:

import react, { Fragment } from 'react';

const lines = [
  'One line',
  'Another line',
];

const textContent =
  lines.reduce(items, line, index) => {
    if (index > 0) {
      items.push(<br key={'br-'+index}/>);
    }
    items.push(<Fragment key={'item-'+index}>{line}</Fragment>);
    return items;
  }, []);

Then the text can be used as variable:

<Text>{textContent}</Text>

If not available, Fragment can be defined this way:

const Fragment = (props) => props.children;
1

This code works on my environment. (react-native 0.63.4)

const charChangeLine = `
`
// const charChangeLine = "\n" // or it is ok

const textWithChangeLine = "abc\ndef"

<Text>{textWithChangeLine.replace('¥n', charChangeLine)}</Text>

Result

abc
def
0

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

0

sometimes I write like this:

<Text>
  You have {" "}
  {remaining}$ {" "}
  from{" "}
  {total}$
<Text>

(as it looks more clear for myself)

Not the answer you're looking for? Browse other questions tagged or ask your own question.