1
00:00:02,340 --> 00:00:08,370
Now that we get these basics out of the way and before we dive way deeper into React Native and also

2
00:00:08,370 --> 00:00:13,920
how we can style our apps in a little bit of a more beautiful way because obviously our styling here

3
00:00:13,950 --> 00:00:18,260
definitely still has some upside potential to put it like this,

4
00:00:18,420 --> 00:00:23,790
before we dive all of that, let me show you another exciting component that's built into React Native

5
00:00:23,790 --> 00:00:29,970
and that also shows how easily you can add cool features to React Native apps

6
00:00:30,150 --> 00:00:32,010
and that's the modal component.

7
00:00:32,010 --> 00:00:38,310
You find it of course in the official docs in that components and APIs guide here and there, you will

8
00:00:38,310 --> 00:00:42,650
find a modal down there.

9
00:00:43,420 --> 00:00:50,470
Now it's under others and here, this modal is a nice component that allows you to add such a nice

10
00:00:50,740 --> 00:00:55,780
overlay, full screen overlay with a little effort.

11
00:00:55,900 --> 00:01:00,490
Now let's add a modal for actually hosting our goal input,

12
00:01:00,490 --> 00:01:04,020
right now the goal input is here at the top and that's all right

13
00:01:04,540 --> 00:01:10,480
but I actually want to move that into a modal so that we have it on a full screen overlay in the end

14
00:01:10,660 --> 00:01:12,790
and we only have a button here at the top,

15
00:01:12,790 --> 00:01:16,480
so in place of goal input which opens that modal.

16
00:01:16,630 --> 00:01:19,000
So let's go to goal input and there,

17
00:01:19,000 --> 00:01:19,780
I want to

18
00:01:19,810 --> 00:01:25,000
wrap this into a modal. So I'll import modal from React Native because it's a component shipping with

19
00:01:25,000 --> 00:01:27,600
React Native and there,

20
00:01:27,640 --> 00:01:34,020
I want to use that modal around my view here,

21
00:01:34,040 --> 00:01:38,080
so just like this for now and now let's save that and

22
00:01:38,180 --> 00:01:41,150
let's see if that already changes something a bit

23
00:01:41,180 --> 00:01:42,740
yes, our styling is off,

24
00:01:42,740 --> 00:01:46,420
we're losing that padding which we set up originally,

25
00:01:46,420 --> 00:01:46,700
right?

26
00:01:46,710 --> 00:01:52,370
In app.js, we have that general padding on our screen view which is that outer view,

27
00:01:52,370 --> 00:01:58,430
it's certainly not getting applied on the two platforms anymore, on the two devices because our

28
00:01:58,430 --> 00:02:03,800
content is way outside of this screen, so that modal is already doing something and

29
00:02:03,800 --> 00:02:08,480
of course we're not really seeing that much. Now for modal,

30
00:02:09,020 --> 00:02:14,030
so for this modal component, you can set a visible key that defines whether this is currently

31
00:02:14,030 --> 00:02:19,730
visible or not and that takes a boolean if we set this to false for example and thereafter if we have a

32
00:02:19,730 --> 00:02:21,020
look at our applications,

33
00:02:21,080 --> 00:02:25,880
we of course seen empty screen. By the way, in case Android shouldn't update for you after setting this to

34
00:02:25,900 --> 00:02:32,660
false, simply close the app here with the help of the app drawer and thereafter in your process down

35
00:02:32,660 --> 00:02:37,080
there, the npm start process, press a again to restart this on Android.

36
00:02:37,100 --> 00:02:39,650
So now we have an empty screen when this is set to false,

37
00:02:39,650 --> 00:02:42,410
now we obviously hardcoding this is not the solution.

38
00:02:42,410 --> 00:02:47,990
Instead in app.js, I now want to have a button which allows us to open that modal and then we will close

39
00:02:47,990 --> 00:02:49,340
the modal from inside the modal

40
00:02:49,350 --> 00:02:55,760
when we press the add button there. Now we're already importing button here into app.js and now

41
00:02:55,760 --> 00:03:00,530
that I see this, we can of course also get rid of these imports which we're not using here right

42
00:03:00,560 --> 00:03:01,480
now,

43
00:03:01,550 --> 00:03:06,400
so just leave the button import here along with the other imports we are using

44
00:03:06,490 --> 00:03:12,260
and now here at the very top, we can add the button, that's a self closing tag though and set the

45
00:03:12,260 --> 00:03:22,160
title to add new goal maybe, something like that. If we do that, we of course should see that button here

46
00:03:22,160 --> 00:03:22,750
at the top

47
00:03:22,750 --> 00:03:24,040
and here it is

48
00:03:24,140 --> 00:03:31,000
and now when we press that button, we want to show that modal, right? Now for that, we need to manage more

49
00:03:31,000 --> 00:03:31,920
state.

50
00:03:31,990 --> 00:03:38,350
So in here besides managing the course goals, I will now also manage whether we're currently in course

51
00:03:38,410 --> 00:03:41,220
add mode or if we're not.

52
00:03:41,260 --> 00:03:48,220
So initially, we're not so the initial state I'm setting is false and I'll name my state here and of

53
00:03:48,220 --> 00:03:50,100
course that is totally up to you,

54
00:03:50,140 --> 00:03:55,460
I'll name it isAddMode and setIsAddMode.

55
00:03:55,660 --> 00:03:56,860
Again these names are up to you,

56
00:03:56,860 --> 00:04:03,220
I'm just having a convention here which you also find in the official React docs where here we try

57
00:04:03,220 --> 00:04:08,110
to give the state we're controlling a fitting name and then we basically take that name and add set

58
00:04:08,110 --> 00:04:12,430
in front of it to make it clear that this is the function to change that state.

59
00:04:12,430 --> 00:04:17,230
So setIsAddMode is what we in the end need to call when this button is pressed

60
00:04:17,230 --> 00:04:22,750
and here we can use an inline function or use a named function and just add the handler here, whatever

61
00:04:22,750 --> 00:04:23,700
you want.

62
00:04:24,130 --> 00:04:28,450
I'll go with the inline function and call set isAddMode and set this to true here

63
00:04:28,480 --> 00:04:35,800
when this button is called so that we open the modal. Now we can take that isAddMode state we're

64
00:04:35,800 --> 00:04:43,760
changing and pass this to goal input to then change the visibility of the modal in there. So here,

65
00:04:43,760 --> 00:04:50,120
we could add a visible prop but that prop name is up to you because it's on our own component and I

66
00:04:50,120 --> 00:04:51,680
pass the isAddMode,

67
00:04:51,680 --> 00:04:54,800
so that's the state we're controlling, to visible mode,

68
00:04:54,800 --> 00:04:59,660
so the value stored in isAddMode is passed as a value to the visible prop.

69
00:04:59,660 --> 00:05:03,710
Now in goal input, we can therefore now use that visible prop,

70
00:05:03,710 --> 00:05:06,670
so here we can use props visible,

71
00:05:06,740 --> 00:05:12,080
now referring to the visible prop we got on the goal input which we then forward to the visible prop

72
00:05:12,230 --> 00:05:17,170
of the modal. If we now save that and we have a look at our app,

73
00:05:17,310 --> 00:05:22,440
if I press add new goal here, indeed you see that modal content up here again.

74
00:05:22,590 --> 00:05:25,020
Now obviously, it's not looking that beautiful here,

75
00:05:25,020 --> 00:05:26,590
so we should change this

76
00:05:26,700 --> 00:05:33,450
and one other thing I want to change is that an animation would be nice here for opening the modal, right?

77
00:05:33,450 --> 00:05:40,740
So here let's add animation type which is a nice property we can set here and you can set this to a string

78
00:05:40,740 --> 00:05:45,210
and there you got three options - none is the default but you can set this to slide

79
00:05:45,420 --> 00:05:48,450
and now the modal should actually appear by sliding up.

80
00:05:48,490 --> 00:05:51,760
So if you press add new goal, now this slides up,

81
00:05:51,760 --> 00:05:53,430
also on Android.

82
00:05:53,430 --> 00:05:59,130
So that's a way better user experience I'd say, the next step is that we ensure that our content in the

83
00:05:59,130 --> 00:06:04,410
modal is presented in a nicer way, maybe centered here in the middle of the modal.