CODEWITHSUNDEEP
androidreactjsreact-native
N Sharma
N Sharma

Reputation: 34497

Full text is not showing in alert dialog in react native

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 ?enter image description here

Upvotes: 14

Views: 9421

Answers (3)

Abhith Shaji
Abhith Shaji

Reputation: 639

If you pass only a single text inside the 'alert' , for eg) Alert.alert("hello") , this will be considered as the Alert Title.

The Alert title is supposed to be short so it won't display a large text.

So the first field in the 'alert()' is the 'Alert Title' and the next field is the 'Alert Message'.

Do like this :

Alert.alert('Alert Title', 'Alert Message', [
  {
    text: 'Cancel',
    onPress: () => console.log('Cancel Pressed'),
    style: 'cancel',
  },
  {text: 'OK', onPress: () => console.log('OK Pressed')},
]);

Upvotes: 2

Tarun
Tarun

Reputation: 1242

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 }
)

Upvotes: 4

Irfan Ali
Irfan Ali

Reputation: 2258

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.

Upvotes: 27

Related Questions