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

Question

I want to insert a new line  like  r n   lt br   gt   in a Text component in React Native  If I have   lt text gt   lt br   gt  Hi  lt br   gt  this is a test message  lt br   gt   lt  text gt   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

User · Answer

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

User · Answer

Use    lt Text gt   Hi  nCurtis    lt  Text gt    Result      Hi       Curtis

User · Answer

You can also just add it as a constant in your render method so its easy to reuse     render         const br     n        return            lt Text gt Capital Street br Cambridge br CB11 5XE br United Kingdom lt  Text gt

User · Answer

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  lt br   gt  for every line break        example     lt Text gt                 First line           Another line  which will respect line break            lt  Text gt      param props     export const Text  React FunctionComponent lt Props gt     props    gt      const   children  Wrapper    div      props     return        lt Wrapper style    whiteSpace   pre-line     gt         children       lt  Wrapper gt           export default Text    Usage    lt Text gt           This page uses server side rendering  SSR       Each page refresh  either SSR or CSR  queries the GraphQL API and displays products below        lt  Text gt    Displays

User · Answer

React won t like you putting HTML  lt br   gt  in where it s expecting text  and  ns aren t always rendered unless in a  lt pre gt  tag  Perhaps wrap each line-breaked string  paragraph  in a  lt p gt  tag like this   text split  quot  n quot   map  line  idx    gt   lt p key  idx  gt  line  lt  p gt     Don t forget the key if you re iterating React components

User · Answer

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            lt Text gt  description  lt  Text gt              return          lt View style   marginTop  50   gt           descriptionElement         lt  View gt                 See snack for a live example  https   snack expo io  cmacdonnacha react-native-new-break-line-example

User · Answer

Use  n in text and css white-space  pre-wrap

User · Answer

Why work so hard  it s 2020  create a component to handle this type of issues     export class AppTextMultiLine extends React PureComponent       render         const textArray   this props value split   n    return            lt View gt               textArray map  value    gt                   return  lt AppText gt  value  lt  AppText gt                            lt  View gt

User · Answer

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     lt Text style    maxWidth width 2   gt  string  lt  Text gt    This will display text 50  width of your screen

User · Answer

Just put    n   within the Text tag   lt Text gt      Hello    n       World    lt  Text gt

User · Answer

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  lt br  gt  tags    lt Typography style    whiteSpace   pre-line     gt       shortDescription split   lt br  gt    join   n     lt  Typography gt    Sorry  I couldn t comment on his post due to the reputation score limitation

User · Answer

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        lt View gt         lt Text gt            1  line 1         2  line 2         3  line 3          lt  Text gt       lt  View gt

User · Answer

There are two options  Option 1  Using Template Literals  const Message    This is a message     lt Text gt       Hi      Message      lt  Text gt   Result  Hi  This is a message  Option 2  Use    n   as line breaks   lt Text gt      Hello    n       World    lt  Text gt   Result  Hello World

User · Answer

You can use    n   as line breaks            Hi     n   this is a test message

User · Answer

If at all you are displaying data from state variables  use this    lt Text gt  this state user bio replace   lt br  gt      n    lt  Text gt

User · Answer

Simple use backticks  ES 6 feature  SOLUTION 1 const Message    This is a message     lt Text gt       Hi      Message      lt  Text gt   SOLUTION 2 Add  quot  n quot  in Text  lt Text gt  Hi   quot  n quot   This is a message   lt  Text gt

User · Answer

You can also do    lt Text gt    Hi  this is a test message     lt  Text gt    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

User · Answer

do this   x000D   x000D   lt Text gt       Hi   n this is a test message       lt Text  gt  x000D   x000D   x000D

User · Answer

this is a nice question   you can do this in multiple ways First  lt View gt       lt Text gt          Hi this is first line    n   hi this is second line       lt  Text gt   lt  View gt   which means you can use   n  backslash n to break the line Second  lt View gt        lt Text gt           Hi this is first line       lt  Text gt        lt View gt            lt Text gt               hi this is second line            lt  Text gt        lt  View gt   lt  View gt   which means you can use another  lt View gt  component inside first  lt View gt  and wrap it around  lt Text gt  component Happy Coding

User · Answer

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

User · Answer

You can try using like this    lt text gt     val  n   lt  text gt

User · Answer

lt Text gt  Hi   quot  n quot   this is a test message   lt  Text gt

User · Answer

You can do it as follows      Create nYour Account

User · Answer

This worked for me    lt Text gt   Hi  nthis is a test message    lt  Text gt     react-native 0 41 0

User · Answer

This should do it    lt Text gt  Hi    n   this is a test message   lt  Text gt

User · Answer

Just use    n   where you want to break the line

User · Answer

Another way to insert  lt br gt  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    gt        if  index  gt  0          items push  lt br key   br-  index   gt              items push  lt Fragment key   item-  index  gt  line  lt  Fragment gt        return items              Then the text can be used as variable    lt Text gt  textContent  lt  Text gt    If not available  Fragment can be defined this way   const Fragment    props    gt  props children

User · Answer

You can use    like this    lt Text gt   Hi  this is a test message    lt  Text gt

User · Answer

This code works on my environment   react-native 0 63 4  const charChangeLine          const charChangeLine    quot  n quot     or it is ok  const textWithChangeLine    quot abc ndef quot    lt Text gt  textWithChangeLine replace    n   charChangeLine   lt  Text gt   Result abc def

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

Examples related to javascript

Examples related to text

Examples related to react-native

Examples related to newline