Full text is not showing in alert dialog in react native

Question

I am trying to show alert dialog to user on clicking on a button. I am trying like below

onPressButton() {
  Alert.alert(strings.tour_end);
}

strings.tour_end is "Great! Hope you like our product tour! Enjoy this app. We have some excited offers for you!"

This is how it is showing in alert. Is this bug in react-native ?

Answer 1

You have passed full message as Alert title, as per Alert API.

alert(title, message?, buttons?, options?, type?)

like below

alert("Great..!", strings.tour_end);

So title should be small message and you can show full message in message parameter.

if you want to develop customise Alert then use Modal API. Check it.

Or

You can use some third party npm modules to show customise alerts. which is also based on modal api.

npm install react-native-modalbox@latest --save

try this.

Answer 2

If you pass only text it will consider as a Title

As per the documentation https://facebook.github.io/react-native/docs/alert.. you can pass values like this.

Alert.alert(
'Alert Title',
'My Alert Msg',
[
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
], 
{ cancelable: false }
)