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

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.