React Native Insert Break Line Text Multiple Line Text Example

In HTML we all have seen a <br /> tag which is used to break line from middle of text line. In react native we would also perform the same thing using {‘n’} backward slash + small n. This simple code block would automatically breaks text line and move the next coming text to next line. We can use this functionality to manage lines so there won’t be disturbance in viewer reading. So in this tutorial we would learn about React Native Insert Break Line Text Multiple Line Text Example.

Contents in this project React Native Insert Break Line Text Multiple Line Text Example:

1. Open your project’s App.js file and import StyleSheet, View and Text component.

<br />
import React from ‘react’;<br />
import { StyleSheet, View, Text } from ‘react-native’;

1 2	import React from ‘react’; import { StyleSheet, View, Text } from ‘react-native’;

2. Creating our main export default HomeScreen functional component. Here we would make 2 Text components one with break line text and other with normal text. So you’ll be able to see the difference between both of them.

<br />
export default function HomeScreen() {<br />
  return (<br />
    <View style={styles.MainContainer}></p>
<p>      <Text style={styles.text}>Break Text {‘n’} in React Native Example</Text></p>
<p>      <Text style={styles.text}>Without Break Text in React Native Example</Text></p>
<p>    </View></p>
<p>  );<br />
}

export default function HomeScreen() {

return (

<Text style={styles.text}>Break Text {‘n’} in React Native Example</Text>

<Text style={styles.text}>Without Break Text in React Native Example</Text>

</View>

);

}

3. Creating style.

<br />
const styles = StyleSheet.create({<br />
  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
  },<br />
  text: {<br />
    fontSize: 28,<br />
    padding : 10,<br />
    textAlign: ‘center’<br />
  }<br />
});