Multi-Line Text / Break Text in React Native

This tutorial explains how to add multi-line text/break text in react native application. This is very simple and easy as well. you need use {'\n'} as line breaks in text component, whenever you need to add line break in react native application.

Multi-Line Text Break in React Native Application.

Lets see the below example, where we are using line break statement in Text component in react native application. This will display the text in new line and in organised manner.

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


export default class App extends Component {

  render() {
    return (
      <View style={styles.Container}>

        <Text style={styles.paragraph}>
          Hello This is an example of
          {'\n'}
          multiline text
        </Text>

        <Text style={styles.paragraph}>{`Here is an other way to 
        set multiline text.`}</Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Screenshot : 

This is all about Multi-Line Text / Break Text in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.