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 breaks such as \n, <br /> added to the Text component.

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

FOr example, if you have 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 the 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 the start and end of the text including the 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 the \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 in multiple lines
• line break automatically using style maxWidth