1
00:00:02,390 --> 00:00:08,060
So let's move over to the filters screen and there right now, I just have my dummy content, the

2
00:00:08,060 --> 00:00:11,420
filter screen and that's of course not what I want there,

3
00:00:11,510 --> 00:00:20,060
instead there I want to have some text at the top actually where I say available filters /

4
00:00:20,060 --> 00:00:25,910
restrictions or something like this where I want to point at a certain style object with styles, let's

5
00:00:25,910 --> 00:00:33,560
name it title maybe because it will be our main title here and below that, I want to have my different

6
00:00:33,560 --> 00:00:34,250
filters.

7
00:00:34,250 --> 00:00:41,180
Now how does a filter look like? We need some switch, some checkbox, something like this that allows

8
00:00:41,180 --> 00:00:45,210
us to turn a filter on and off and a label for that.

9
00:00:45,230 --> 00:00:50,840
Now that means that probably a view makes sense to group label and that switch together and position

10
00:00:50,840 --> 00:00:52,970
them side by side probably

11
00:00:52,970 --> 00:01:04,560
and I'll give the view a style of filter container, something like that and in there, as I said, I want to

12
00:01:04,560 --> 00:01:09,300
have a text with a label, for example say glutenFree there

13
00:01:10,050 --> 00:01:16,080
and next to that, a switch and thankfully React Native has a built-in switch, it's named switch. The switch

14
00:01:16,080 --> 00:01:19,140
component renders a nice switch which we can use,

15
00:01:19,140 --> 00:01:28,180
so here we can just use switch like this and render this onto the screen. We'll need to configure this

16
00:01:28,210 --> 00:01:36,520
but to get started, we can use it like this. Now for some basic styling, for the title and the filter container

17
00:01:36,520 --> 00:01:37,780
here,

18
00:01:37,780 --> 00:01:39,490
let's go down here,

19
00:01:39,490 --> 00:01:48,040
let's add filter container and title here and the title is pretty straightforward. There,

20
00:01:48,120 --> 00:01:58,410
I want to what use font family open sans bold and a font size of 22, a margin in all directions of

21
00:01:58,550 --> 00:02:08,580
20 and also set text align to center to center this. The overall screen by the way should not center

22
00:02:08,610 --> 00:02:11,530
items on the main axis anymore,

23
00:02:11,700 --> 00:02:14,330
so vertical centering should no longer happen

24
00:02:14,460 --> 00:02:21,610
and for that, we can simply get rid of justify content center and filter container on the other hand

25
00:02:21,640 --> 00:02:24,970
should position the switch and the text next to each other in a row.

26
00:02:24,970 --> 00:02:34,060
So here we can set flex direction to row, justify the content maybe by adding space around and align items

27
00:02:34,060 --> 00:02:40,080
on the cross axis is in the center, so that it's centered vertically. Now let's have a look at that, if we

28
00:02:40,080 --> 00:02:46,290
save this and we go to the filter screen, this is what we got. Here we got a switch and as you see right now

29
00:02:46,290 --> 00:02:47,460
it's always jumping back,

30
00:02:47,460 --> 00:02:53,130
that's something we'll take to take care about in a second but generally, we see it and here on filters

31
00:02:53,130 --> 00:02:58,380
for Android, we got an Android switch which also jumps back but which conveniently is already prestyled

32
00:02:58,380 --> 00:02:58,920
for Android,

33
00:02:58,920 --> 00:03:05,300
so that's actually another component built into React Native which has a default look for Android. So

34
00:03:05,300 --> 00:03:07,240
that's not too bad.

35
00:03:07,250 --> 00:03:13,070
One thing I want to change is for the filter container, I want to assign a fixed width of let's say 80%

36
00:03:13,070 --> 00:03:19,430
and actually change this here to space between, not space around because I think that looks a

37
00:03:19,430 --> 00:03:20,480
bit nicer now,

38
00:03:20,480 --> 00:03:32,030
yes definitely, also on Android and now, we can make sure that this switch actually works and that it

39
00:03:32,030 --> 00:03:39,440
doesn't jump back when we trigger it. For that, you need to know that for switches, you manually need to

40
00:03:39,440 --> 00:03:46,130
manage their state and that's actually not new, in React it's often the case that for these input components,

41
00:03:46,670 --> 00:03:53,120
you need to store what the user enters and feed that back into the component to reflect that in the

42
00:03:53,210 --> 00:03:54,790
updated UI

43
00:03:55,130 --> 00:03:57,080
and we do this with state management.

44
00:03:57,100 --> 00:04:03,040
So we import to use state hook from React so that we can manage state here in this functional component

45
00:04:03,290 --> 00:04:13,770
and that here, I'll have my gluten state and I'll name this isGlutenFree and set isGlutenFree

46
00:04:14,660 --> 00:04:16,930
use state, initially that's false

47
00:04:17,150 --> 00:04:18,800
and now on that switch here,

48
00:04:22,330 --> 00:04:29,320
you have a value property, that's a property built into the built-in switch where I feed in 

49
00:04:29,320 --> 00:04:29,650
isGlutenFree,

50
00:04:29,650 --> 00:04:36,640
so this takes a boolean which indicates whether that switch is rendered as active or not active, so if

51
00:04:36,640 --> 00:04:42,550
it's marked as checked or not checked I should say and you have an onValueChange property which takes

52
00:04:42,550 --> 00:04:45,160
a function that fires whenever the user clicks

53
00:04:45,160 --> 00:04:49,520
that switch. This function here gets the new value,

54
00:04:49,610 --> 00:04:56,480
so if the switch was in the false mode, in the uncheck mode, the new value will be true and the other

55
00:04:56,480 --> 00:05:02,750
way round of course and we can use that to update our state and set isGlutenFree to the new value

56
00:05:03,110 --> 00:05:09,050
and since we also feed this state back in, now our switch should be changeable and should stay in that

57
00:05:09,290 --> 00:05:10,800
updated mode.

58
00:05:10,820 --> 00:05:17,430
So now if we have a look at this, now we can really toggle that switch and that's an improvement.

59
00:05:17,450 --> 00:05:21,800
The styling of the switch is not what I want however, it uses some default color,

60
00:05:21,800 --> 00:05:26,010
of course I would want to use my colors that I use in the app all the time

61
00:05:26,180 --> 00:05:30,020
and for that, we can import our colors constant of course,

62
00:05:30,020 --> 00:05:39,140
so import colors from constants/Colors and the switch has another property that helps us with styling here,

63
00:05:39,710 --> 00:05:45,130
we can add track color which allows us to customize the colors for that switch,

64
00:05:45,140 --> 00:05:52,910
so the background color and so on and track color takes an object as a value, hence we have an object which

65
00:05:52,910 --> 00:05:59,030
we pass here to this dynamic binding where you can set a background color for the false state,

66
00:05:59,030 --> 00:06:04,490
so if it's inactive, if it's unchecked and there I'm fine with the default actually, this looks good

67
00:06:04,490 --> 00:06:05,270
to me

68
00:06:05,660 --> 00:06:09,570
but you can also set one for the true case which is the case that it is checked

69
00:06:09,740 --> 00:06:15,680
and there I want to use colors, primary color and of course you can take any color you wish.

70
00:06:15,680 --> 00:06:22,580
And if we do that and I go back to filters, now we use our own color here which of course is more in line

71
00:06:22,580 --> 00:06:24,740
with the rest of this application

72
00:06:24,740 --> 00:06:33,340
and obviously, this will also work here on Android. We can also set the thumb color which is the

73
00:06:33,340 --> 00:06:41,290
color of this thumb here which is green here on Android and this just takes a string, a color string,

74
00:06:42,410 --> 00:06:49,530
so a hex code for example, there we can also point at colors primary color and if we do that, on

75
00:06:49,530 --> 00:06:49,800
iOS,

76
00:06:49,800 --> 00:06:51,270
now it has this color

77
00:06:55,710 --> 00:06:56,820
and the same on Android.

78
00:06:59,660 --> 00:07:03,420
Now of course on iOS, this doesn't really look that good, there

79
00:07:03,420 --> 00:07:07,480
I would like to keep the default and the solution is pretty simple,

80
00:07:07,500 --> 00:07:13,620
we can again use the good old platform API, import this and then here when assigning a thumb color, I check

81
00:07:13,620 --> 00:07:21,000
for platform.os equal to Android, in which case I want to use the primary color for my thumb,

82
00:07:21,480 --> 00:07:26,410
otherwise I'll set this to an empty string which means it will use the default which is white on iOS.

83
00:07:26,510 --> 00:07:31,650
And with that, here we have the same look as before which I like on iOS but of course, you can also

84
00:07:31,650 --> 00:07:33,300
fine tune this to your requirements

85
00:07:33,300 --> 00:07:40,140
and on Android, we will still have the look we saw before, if I go to the filter screen here which looks good

86
00:07:40,140 --> 00:07:45,650
there as well. So that's the switch and how we can add it,

87
00:07:45,950 --> 00:07:50,060
now we just need to repeat this for all our other switches as well,

88
00:07:50,120 --> 00:07:55,700
so all the other filters I mean. So I can copy that view and add it again for lactose free or

89
00:07:55,700 --> 00:07:56,430
for vegan

90
00:07:56,990 --> 00:08:01,960
but if you find yourself copy and pasting over and over again as we're trying to do it here,

91
00:08:02,090 --> 00:08:08,900
that's always a good case for creating a separate component or a function that renders this reusable

92
00:08:08,900 --> 00:08:10,680
code.

93
00:08:10,730 --> 00:08:15,590
And here, again I will create a separate component in that same file because I really only use it in

94
00:08:15,590 --> 00:08:16,040
there,

95
00:08:16,040 --> 00:08:19,150
again you could also go for a separate file if you wanted to.

96
00:08:19,390 --> 00:08:23,720
I'll name it filter switch and this gets some props

97
00:08:23,720 --> 00:08:30,820
and in this component, in the end I return this code, we set up a for with the view and the text and

98
00:08:30,820 --> 00:08:31,410
so on

99
00:08:31,610 --> 00:08:37,100
and of course now the text needs to be dynamic. There we could set this to props label and it's totally

100
00:08:37,100 --> 00:08:41,810
up to you what you choose here because you will be the one passing in the props values later anyways

101
00:08:43,050 --> 00:08:48,930
and of course here, what happens onValueChange and what we pass to value also differs.

102
00:08:48,930 --> 00:08:57,230
So here, this should be props state for example or props value or whatever you want to use

103
00:08:57,310 --> 00:09:03,490
and here for onValueChange, I'll simply point at props.onChange for example

104
00:09:03,490 --> 00:09:08,140
but again all these props names of course are totally up to you because you'll be the one using that

105
00:09:08,140 --> 00:09:16,870
component and we will actually use it now here, like this, so self closing component, where we now can

106
00:09:16,870 --> 00:09:20,730
set a label because I'm expecting a label prop here,

107
00:09:20,800 --> 00:09:22,990
if you named it differently, you need to name it differently

108
00:09:22,990 --> 00:09:29,230
here of course and the label of course isGlutenFree because I'm about to replace this switch here.

109
00:09:29,380 --> 00:09:35,830
Then we need to pass in a state because I added a state prop here to manage my value, if you named it

110
00:09:35,830 --> 00:09:39,610
differently, you need to name it differently down there as well

111
00:09:39,620 --> 00:09:42,970
and here I will point at isGlutenFree, at my state

112
00:09:42,970 --> 00:09:45,120
and onChange needs to be provided

113
00:09:45,130 --> 00:09:49,840
because here I'm using the onChange prop to bind it to onValueChange.

114
00:09:49,840 --> 00:09:55,990
So this should point at a function and of course here, I will simply keep this function here and since

115
00:09:55,990 --> 00:10:03,550
I just use onChange here to forward it to onValueChange, we get the new value argument here as well.

116
00:10:04,870 --> 00:10:10,480
Now we can get rid of this view down there and just use our filter switch component and now simply repeat

117
00:10:10,510 --> 00:10:13,270
that which is of course way easier.

118
00:10:13,270 --> 00:10:23,450
So now here we can also have lactoseFree, vegan and vegetarian and we need to add three new states now,

119
00:10:24,490 --> 00:10:34,740
so here let me replicate this, we have isLactoseFree and set isLactoseFree,

120
00:10:34,740 --> 00:10:39,210
here we have isVegan and set isVegan

121
00:10:39,270 --> 00:10:42,720
and here we have isVegetarian and

122
00:10:48,010 --> 00:10:51,000
and set isVegetarian.

123
00:10:51,020 --> 00:10:57,740
Now we just need to make sure we use the states in the right places,

124
00:10:57,760 --> 00:11:02,220
so for the second filter switch where we have the lactoseFree filter, I forward

125
00:11:02,250 --> 00:11:09,100
the isLactoseFree state and I update set isLactoseFree of course. For the vegan switch, I forward

126
00:11:09,160 --> 00:11:17,980
isVegan and we update it with set isVegan and for vegetarian, we forward isVegetarian and we update

127
00:11:17,980 --> 00:11:22,060
set isVegetarian, like this.

128
00:11:25,410 --> 00:11:25,880
OK,

129
00:11:25,970 --> 00:11:31,790
that should be it, if we now save this, we should have a filter screen with our different filters which

130
00:11:31,790 --> 00:11:36,770
we can set independently because we're having independent states. I think would it be nice to have some

131
00:11:36,770 --> 00:11:43,610
spacing between these rows, so let's implement this. On our filter container here, we can simply add a

132
00:11:43,610 --> 00:11:50,570
margin vertical of let's say 10 or 50 maybe, a bit more and this should make sure that

133
00:11:50,570 --> 00:11:51,970
we have some spacing there,

134
00:11:52,130 --> 00:11:54,550
yes and this looks quite nice.