{

React Native How to add line break to text component?


This is a short tutorial on how to add multiple lines in the text component in React native.

And also insert line break such as \n, <br /> added to the Text component.

In Html, tag is used to insert the line break.

FOr example, if you multiple lines of text displayed on new lines, We will insert a line break.

There are multiple ways we can do it.

Let’s create a Component to render text component.

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

export default function App() {
  const Message = 'This is a message';

  return (
    <View>
      <Text>Hello World text component</Text>
    </View>
  );
}

React Native Text Component Line break example

First Way, using \n inside a text with special syntax.

Wrap text that contains \n inside {} with start and end of the text includes backtick symbol.

Here is an example

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

export default function App() {
  const Message = 'This is a message';

  return (
    <View>
      <Text>
      {`Hello World, \ntext component`}
      </Text>
    </View>
  );
}

This displays the following text on a mobile device

Hello World, 
text component

Similarly, You can wrap text in multiple lines inside { } without \n symbol.

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

export default function App() {
  const Message = 'This is a message';

  return (
    <View>
      <Text>
      {`
      Hello World,
      text component
      `}
      </Text>
    </View>
  );
}
  • use Styles such as width whiteSpace pre-line

if you have long-form content that needs to break text into multiple lines, change the width.

This changes as per screen resolution.

In the below example style attribute add with the maxWidth parameter in the text component.

text content is broken into multiple lines with a maximum width of 100.

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

export default function App() {
  const Message = 'This is a message';

  return (
    <View>
      <Text style={{ maxWidth:100}}>
   
      Hello World, text component example in react native
     
      </Text>
    </View>
  );
}

These formats are automatically based on screen resolution and we don’t have control over when and where to break text.

Conclusion

This is a simple example in react native

  • Display text component content into multiple lines
  • line break automatically using style maxWidth
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.