Backslash symbol with small n character is used to denote next line in web apps and react native applications. When we use ‘n’ character in between the given string text then it would automatically breaks the text from that particular location in both android and iOS react native apps. So in this tutorial we would Create Multi Line Text Breaking Text Line From Middle in React Native Android iOS app.
Contents in this project Create Multi Line Text Breaking Text Line From Middle in React Native Android iOS App:
1. Import StyleSheet, Text and View component in your project’s App.js main file.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
|
2. Create our main Export default class named as App extends with Component.
|
1
2
3
4
|
export default class App extends Component {
}
|
3. Creating render’s return block in MyApp class. Now we would make a main Root View in render’s return block.
|
1
2
3
4
5
6
7
8
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
4. Creating Text component in Root View component. Now we would use the ‘n’ symbol combination between text to break text line from between.
|
1
2
3
4
5
|
<Text style={styles.text}>
Hello Guys, This is an Example of
{‘n’}
How to Break Multiline Text in React Native.
</Text>
|
5. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#fff’,
padding: 16,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 12,
fontSize: 22,
fontWeight: “100”,
},
});
|
6. Complete Source Code for App.js file class:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;
export default class App extends Component {
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>
Hello Guys, This is an Example of
{‘n’}
How to Break Multiline Text in React Native.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
backgroundColor: ‘#fff’,
padding: 16,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
textAlign: ‘center’,
margin: 12,
fontSize: 22,
fontWeight: “100”,
},
});
|
Screenshot:
Also Read :
React Native Change Activity Action Bar Title Text Color StackNavigator
Popup Menu Overflow Menu in React Navigation React Native
How to Use State Inside React Native App Full Explained Example Tutorial
React Native Create Android Like Fragment for Android iOS Example Tutorial
React Navigation 5.x Change Header Title on Button Click in React Native Dynamically
