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.