How to add Line Break in React Native Text Component
In HTML, you can easily put a line break with the 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”}.
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.
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;
![react native text line break](https://i1.wp.com/codingwithrashid.com/wp-content/uploads/2019/05/react-native-add-break-text.png?fit=576%2C1024&ssl=1)
I hope you have learned how to add line breaks between text in react native. Have any queries? Please the comment section below.