React Native Tutorial #12 - Alerts

Key Takeaways

alright than my friends so we've created this 2 News app now but what I'd like to do is just add a couple more features to make this app Sparkle if you will so the first thing I'm gonna do is a tiny little bit of validation in here to make sure I use actually type something instead of just clicking add to do because that makes no sense right there and then secondly I also want to show you how to do alerts so a little message that pops up so what we're gonna do is validate this field if say for example the word that a user types in here is less than three letters long or something like that then what we're gonna do is show an alert to say look you need to add something in that's a bit longer so that's what we're going to do the first thing we need to do is perform this check inside the submit handle of when a user clicks on this that is the point we want to check look whatever they've typed in here does that equal to at least three or four characters long so we need to do a little if check inside this submit handler to do just that so let's say if and then in here or say text which is the text we receive and that is the value inside the text input if that dot length is going to be over three so at least three characters long then we're going to update the state so let's grab all of this stuff set to dues cut it and paste it all right here so that's the case if this is at least three characters long so let me try this out first of all and wait for this to reload blah blah okay so if I just type in for example D hard to do it's not going to add it D D still doesn't add it D D D nope because it needs to be greater than three but the minute I add a fourth character it is gonna add that so that's fine but if it's say two characters and we're trying to add it then we don't really know why it's not adding this nothing's telling us we can't add something that's two letters long so that's the point we want to add an alert so if this fails right here this check instead of setting to do is what we're going to do is instead show and alert now to do that we need to import the alert components from react native that comes with it out of the box so in here now we can then say alert dots alert we call the alert method on the alert object and inside here what we need to do is pass through a few different arguments the first one is going to be the title of the alert and we'll just say oops so that's the title the second one is going to be some kind of message and I'm going to say - duze must be over three cars long so three characters long and I've done that all in capitals I really shouldn't do that so let's write this again - duze must be over three chars long and then the final parameter is going to be an array over here and inside that array is going to be some different objects and each object represents a little button that's going to be on the alert and when we click on that button I'll press that button it's going to close the alert now inside this object we can specify the text of that button which is going to be in this case understood we can also add an on press property and that could be just an anonymous function which is going to say console dot log and then alert closed okay because when we click on this button it is going to close the alert okay and that's all there is to it so let me save that now and see if this works so if we come over to the form in a second when it loads and try just adding one character out to do and we get this alert so there's the title the text and then the bottom when I click on this one just do it it closes it and if I take a look at the tools over here we can see it logged that to the console alert closed when we clicked on that if I do it for two characters it pops up again and we do it for three pops up again if I do it for four we don't get that any adds it to the list so there we go that's how we can use a little bit of validation and also show an alert