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;
I hope you have learned how to add line breaks between text in react native. Have any queries? Please the comment section below.
