how insert line break in alert message in react-native-awesome-alerts - react-native

Question

I'm using react-native-awesome-alerts in my code .
In alert message i want to break the text into a new line
it should be like the below image
alert
please help me how to do it
Here is my code
import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import AwesomeAlert from 'react-native-awesome-alerts';
export default class Alert extends Component {
constructor(props) {
super(props);
this.state = { showAlert: false };
}
showAlert = () => {
this.setState({
showAlert: true
});
};
hideAlert = () => {
this.setState({
showAlert: false
});
};
render() {
const { showAlert } = this.state;
return (
<View style={styles.container}>
<Text>I'm AwesomeAlert</Text>
<TouchableOpacity onPress={() => {
this.showAlert();
}}>
<View style={styles.button}>
<Text style={styles.text}>Try me!</Text>
</View>
</TouchableOpacity>
<AwesomeAlert
show={showAlert}
showProgress={false}
message='Incorrect Username/Password Used{“\n”}Please try again…'
messageStyle={styles.textStyle}
closeOnTouchOutside={true}
closeOnHardwareBackPress={false}
contentContainerStyle={styles.alertStyle}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
},
button: {
margin: 10,
paddingHorizontal: 10,
paddingVertical: 7,
borderRadius: 5,
backgroundColor: '#AEDEF4',
},
text: {
color: '#fff',
fontSize: 15
},
alertStyle: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
height: 100,
width: '60%',
borderWidth: 1,
borderColor: '#fff',
borderRadius: 7,
color: 'red'
},
textStyle: {
fontSize: 14,
color: 'black',
alignItems: 'center'
}
});
i have tried 'Incorrect Username/Password Used{“\n”}Please try again…' but still no luck
please let me know where it is going wrong

Answer 1

You need to change your message string to using backtick ` and add \n. This should work now.
message={`Incorrect Username/Password Used \n Please try again…`}
You might also change the container width to 80% and add textAlign:"centre" to textStyle CSS so that that it look better.
Here is what I managed to produce:

Answer 2

You can add a view with width to 80% and add textAlign: "centre" to AwesomeAlert messageStyle so that it looks better.
<View style={{ width: '80%' }}>
<AwesomeAlert
show={showAlert}
showProgress={false}
message='Incorrect Username/Password Used{“\n”}Please try again…'
messageStyle={styles.textStyle}
closeOnTouchOutside={true}
closeOnHardwareBackPress={false}
contentContainerStyle={styles.alertStyle}
/>
<View>

Answer 3

Add multiple AlertTitle tags inside the alert
<Alert>
<AlertTitle>First line's Text Goes Here</AlertTitle>
<AlertTitle>Second line's Text Goes Here</AlertTitle>
</Alert>

Answer 4

There are two main solutions for this.
Method 1: Just add the '\n' like below
<Text>
First Line {'\n'} Second Line.
</Text>
Method 2: Add the line break it in the string literals, like below.
<Text>
`First Line
Second Line`.
</Text>
For more information, please refer the below tutorial.
https://cutt.ly/ZZ50BCR