1
00:00:02,200 --> 00:00:04,720
There are a couple of things where we could continue

2
00:00:04,740 --> 00:00:08,950
but I want to continue with the input container, which is the container around these inputs,

3
00:00:08,980 --> 00:00:15,340
so around the select a number text, around the text input here and around the buttons and this container

4
00:00:15,340 --> 00:00:18,970
has a width and it aligns the items but as I described earlier,

5
00:00:18,970 --> 00:00:21,820
it would be nice to have that card to look there and for that,

6
00:00:21,820 --> 00:00:27,410
we need some more exotic styles which sounds really fancy but simply some style rules

7
00:00:27,410 --> 00:00:30,450
we haven't used before.

8
00:00:30,470 --> 00:00:34,080
For example, I want to add a shadow, a slight drop shadow and

9
00:00:34,110 --> 00:00:43,310
you do this with four core properties which you can use. A color, an offset, an opacity and a radius.

10
00:00:43,310 --> 00:00:46,760
Now a shadow color should be clear, it's the color of your shadow.

11
00:00:46,760 --> 00:00:50,210
Shadow offset is how much it's offset from your container

12
00:00:50,210 --> 00:00:54,290
and that actually takes the object which then in turn takes a width and a height,

13
00:00:54,290 --> 00:00:59,390
so you could say I want to offset the shadow by two pixels regarding the width and by two pixels regarding

14
00:00:59,390 --> 00:01:07,220
the height, that influences the three dimensional effect you're creating. Opacity describes how transparent

15
00:01:07,280 --> 00:01:08,990
this shadow is,

16
00:01:08,990 --> 00:01:15,950
if you set opacity to 1, then you have a totally in transparent, so a very visible strong shadow

17
00:01:15,950 --> 00:01:21,800
and if you increase that or decrease that I should say, if you set it to 0.1 for example,

18
00:01:21,950 --> 00:01:28,910
you have a shadow which you can barely see. Shadow radius then basically describes how sharp that shadow

19
00:01:28,910 --> 00:01:29,280
is,

20
00:01:29,300 --> 00:01:35,290
if it has rough edges or if it's a bit more blurry, softer, things like that.

21
00:01:35,330 --> 00:01:40,610
So here, I'll go with a shadow color of black, by the way you can also use hex codes here if you want

22
00:01:40,610 --> 00:01:47,720
to and you can also use RGBA codes if you prefer this, either normal RGB codes actually

23
00:01:47,870 --> 00:01:53,270
or also with an alpha channel to describe transparency here. Though the transparency here won't have

24
00:01:53,270 --> 00:01:59,030
a direct influence, for shadow you will have to set this with shadow opacity. For other colours, it would

25
00:01:59,030 --> 00:02:04,100
have an influence but that's just a side note. Attached, you'll find a link with more details about how

26
00:02:04,100 --> 00:02:09,260
you can configure colours and which colour values React Native accepts because obviously, that's way

27
00:02:09,260 --> 00:02:14,030
more exhaustive than what I can show here, I will just go with the name because I want a black

28
00:02:14,030 --> 00:02:20,420
colour, so why not go with that shortcut? Now besides the colour, the shadow here will also receive an offset

29
00:02:20,510 --> 00:02:23,990
and as I said, offset here takes an object.

30
00:02:23,990 --> 00:02:31,040
Now in case you wonder how I know this, for one my IDE tells me, if I start typing shadow offset here,

31
00:02:31,040 --> 00:02:36,530
you see that hint I get on the right, you should normally be getting this as well but in case you don't

32
00:02:36,530 --> 00:02:42,830
get this, the official docs are of course the place to go and there, always under guides, components

33
00:02:42,830 --> 00:02:49,100
and APIs, you can click on the view component there or simply click on the API docs here in the top

34
00:02:49,100 --> 00:02:57,800
right corner and then choose your view there and there, you'll find some style prop and then you can

35
00:02:57,860 --> 00:03:03,890
find a list of all the view styles that are supported and of course also how you configure those and there

36
00:03:03,890 --> 00:03:10,040
for example, you learned that shadow offset is an object with a number and a height. For the colour, you

37
00:03:10,040 --> 00:03:14,630
learned that this takes a colour and that's exactly the link you find attached here, where it described

38
00:03:14,630 --> 00:03:16,740
which kind of colours you can use.

39
00:03:17,030 --> 00:03:24,020
So that's just a little side note, here I'll use a shadow offset with a width of zero but a height of

40
00:03:24,020 --> 00:03:32,030
2 so that my shadow is offset a little bit to the bottom so to say, not so much to the right, so not at

41
00:03:32,030 --> 00:03:40,310
all to the right actually and I'll then also add a shadow radius which is a number of let's give six

42
00:03:40,310 --> 00:03:41,870
a try and see what that does

43
00:03:42,650 --> 00:03:49,970
and last but not least, a shadow opacity of 0.26 which is relatively transparent but which I think looks

44
00:03:49,970 --> 00:03:51,610
quite nice.

45
00:03:51,850 --> 00:03:58,480
In addition, I'll give my input container a background colour of white to make sure that it's always

46
00:03:58,480 --> 00:04:03,370
white and not transparent which is otherwise the default so that if we would have another background

47
00:04:03,370 --> 00:04:08,890
color behind the container, let's say as the base color of the entire screen, the container here would

48
00:04:08,920 --> 00:04:11,100
always have a white background.

49
00:04:11,140 --> 00:04:16,180
Now with that, if you save this, you should see a shadow that looks something like this on iOS but you

50
00:04:16,180 --> 00:04:20,190
see no shadow at all on Android and that's not a bug,

51
00:04:20,410 --> 00:04:28,120
instead the shadow properties here only work on iOS and that leaves one important question, how can

52
00:04:28,120 --> 00:04:32,820
you set a shadow on Android then? Is that not possible?

53
00:04:33,070 --> 00:04:39,610
It is but there you have a special style prop, the elevation prop. This only works on Android as the tooltip

54
00:04:39,610 --> 00:04:48,280
also shows here, platform Android whereas the shadow properties only work on iOS. Now elevation simply

55
00:04:48,280 --> 00:04:55,090
takes a number of let's say 5 and then uses the default Android material design elevation, so you have

56
00:04:55,090 --> 00:05:00,130
less control there but on the other hand, you get the default material design looks which your users

57
00:05:00,130 --> 00:05:06,070
might be used to anyways, so that's the good thing about this and now we also have a shadow here on Android

58
00:05:06,340 --> 00:05:13,590
and on iOS. On iOS, you will also notice that the shadow is visible on the left and right of the box

59
00:05:13,590 --> 00:05:19,840
as well even though I gave this a shadow offset of 0 for the width, that can be controlled with the

60
00:05:19,840 --> 00:05:25,480
shadow radius though, if you set shadow radius to zero, then you see you only have the shadow

61
00:05:25,480 --> 00:05:30,970
where you defined its offset here, so you can make sure that the shadow really is only there where you

62
00:05:30,970 --> 00:05:37,060
want it. If you do set a shadow radius though and by default, there also is a default shadow radius, you

63
00:05:37,060 --> 00:05:41,350
get this spill effect which is a more natural shadow after all,

64
00:05:41,350 --> 00:05:47,860
so here it's actually the effect I want. Now with that, I added a shadow both on Android using the default

65
00:05:47,920 --> 00:05:53,500
Android shadow and on iOS. By the way on Android, you can of course change the elevation level to play

66
00:05:53,500 --> 00:05:59,950
around with different levels of elevation until you have the look you want for your application, you have

67
00:05:59,950 --> 00:06:05,530
enough shadow basically. Now besides having the shadow here however, I think it would be nice to have

68
00:06:05,530 --> 00:06:11,680
some padding in this box now because the items sit way too close to the edges, they sit directly on

69
00:06:11,680 --> 00:06:20,350
the edges after all. So to change this, I'll also add a little bit of padding here and that will be

70
00:06:20,350 --> 00:06:26,440
of padding of 20 and again, that's a value you can experiment with, find the padding that you personally

71
00:06:26,440 --> 00:06:33,910
prefer and you think that looks good and if we try that, now this looks way better.

72
00:06:33,970 --> 00:06:36,700
In addition, rounded corners would be a nice thing,

73
00:06:37,120 --> 00:06:45,870
so I'll add a border radius here of let's say 10 to have slightly rounded borders.

74
00:06:45,870 --> 00:06:52,940
If we now save that, this looks pretty sweet to me on both platforms, on both devices.

75
00:06:52,940 --> 00:06:54,740
So this is now the input container,

76
00:06:54,770 --> 00:06:58,570
we can't see the input and the buttons probably should have the same size as well

77
00:06:58,820 --> 00:07:00,950
but at least, the container is now looking good.