1
00:00:02,270 --> 00:00:08,210
Now to shows such an alert, React Native has got us covered, from React Native we can import alert and

2
00:00:08,210 --> 00:00:15,260
that's also not a component we use but instead, an object where we can call a native API, where we can call

3
00:00:15,260 --> 00:00:22,670
a native feature. So here where we return if one of these conditions is met and therefore we're not having

4
00:00:22,670 --> 00:00:30,380
a valid number, there we can call alert.alert and now throw an alert which you can configure as described

5
00:00:30,380 --> 00:00:35,930
here. You can set a title, you can add a message and you can also add buttons and some general options.

6
00:00:36,280 --> 00:00:39,230
Now the title could be invalid 

7
00:00:39,230 --> 00:00:48,680
number, the message string could be number has to be a number between 1 and 99.

8
00:00:50,020 --> 00:00:53,680
Buttons then is an array of alert buttons,

9
00:00:53,680 --> 00:01:01,420
what you add here are simply Javascript objects where each object can have a certain style, a text and

10
00:01:01,480 --> 00:01:11,200
a press, so a click handler basically and I will add a text here where I simply say okay, where I then define

11
00:01:11,200 --> 00:01:14,650
a style and style here is one of three text values,

12
00:01:14,650 --> 00:01:17,100
it's not a style you defined with a stylesheet,

13
00:01:17,170 --> 00:01:21,520
instead it's one of these three predefined style identifiers.

14
00:01:21,520 --> 00:01:25,180
It's either a cancel style, default or destructive,

15
00:01:25,180 --> 00:01:33,220
this changes the colour and presentation here and I'll give this destructive as a style and I'll also

16
00:01:33,220 --> 00:01:39,980
add my own press handler where I point at the reset input handler because I want to reset the user input

17
00:01:40,060 --> 00:01:46,000
if it was invalid anyways. With that the alert is configured and this alert will now be shown if the

18
00:01:46,000 --> 00:01:47,350
input is invalid

19
00:01:47,350 --> 00:01:50,640
here. Let's give it a try and save this

20
00:01:50,790 --> 00:01:55,560
and if I click confirm here, I actually get not a number,

21
00:01:55,590 --> 00:02:02,500
we'll have to fix that but if I enter 0 here, now I get this alert with the okay button and if I click

22
00:02:02,500 --> 00:02:05,060
it, this is reset and we're good

23
00:02:05,080 --> 00:02:12,630
but let's make sure that we also get this if we have not a number, if chosen number is not a number

24
00:02:12,680 --> 00:02:15,700
and the reason for that is that this check won't work in Javascript,

25
00:02:15,700 --> 00:02:21,470
instead you have a special isNaN function which you wrap your value around

26
00:02:21,500 --> 00:02:26,000
and now this will check for you if this is not a number and if that returns true, we make it into this

27
00:02:26,010 --> 00:02:28,330
if block and therefore would throw this alert,

28
00:02:28,330 --> 00:02:31,570
so now submitting an empty value also is invalid.

29
00:02:31,630 --> 00:02:32,600
So that's important,

30
00:02:32,680 --> 00:02:37,080
use is not a number instead of that equality check.

31
00:02:37,090 --> 00:02:41,030
So now we're checking for this, valid values are still allowed

32
00:02:41,110 --> 00:02:46,990
and with that, let's work on this confirmation presentation so that we can soon also enter the next stage

33
00:02:46,990 --> 00:02:47,890
and start a game.