How To Insert A Line Break Into A Text Component In React Native?

Home » How To Line Break In React » How To Insert A Line Break Into A Text Component In React Native?

Maybe your like

Skip to the content Close Menu
  • HTML
  • CSS
  • JavaScript
  • Python
  • Contact
  • About the Site
  • About the Author
closeup photo of yellow Labrador retriever puppy
Spread the love

Sometimes, we want to insert a line break into a Text component in React Native.

In this article, we’ll look at how to insert a line break into a Text component in React Native.

How to insert a line break into a Text component in React Native?

To insert a line break into a Text component in React Native, we can add the '\n' character string.

For instance, we write:

import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import { Text } from 'react-native-paper'; export default class MyComponent extends React.Component { render() { return ( <View> <Text> Hi{'\n'} This is a test message. </Text> </View> ); } }

to add {'\n'} into the content of Text.

Then we see:

Hi This is a test message.

rendered.

Conclusion

To insert a line break into a Text component in React Native, we can add the '\n' character string.

Related Posts

  • How to Display Line Breaks from Saved Text Area in a React Component?

    Sometimes, we want to display line breaks from saved text area in a React component.…

  • How to pass text between React component tags?

    Sometimes, we want to pass text between React component tags. In this article, we'll look…

  • React Native — Nested Text and Text Input

    React Native is a mobile development that’s based on React that we can use to…

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

View Archive How to get the filename from a file input with JavaScript? How to add logging in React Native?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

Current ye@r * Leave this field empty

Tag » How To Line Break In React