How to add Line Break in React Native Text Component

Last Updated on December 13, 2020.

In Html, you can easily put a line break with tag <br> but the thing is different for React Native. In React Native you have to use \n in between your text to get a line break. As react native uses JSX, you have to ensure that \n is wrapped with brace brackets, like {“\n”}.

Class based component

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.welcome}>
          React Native For You {'\n'} A website for app developers
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 18,
    textAlign: 'center',
    margin: 10,
  },
});

Function based component.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        React Native For You {'\n'} A website for app developers
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 18,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;

In the example above, I wanted a line break after React Native For You, and hence I have put {“\n”} between the text. See the output below.

I hope you have learnt how to add line breaks between text in react native. Have any queries? Please the comment section below.