So let's move over to the filters screen and there right now, I just have my dummy content, the
filter screen and that's of course not what I want there,
instead there I want to have some text at the top actually where I say available filters /
restrictions or something like this where I want to point at a certain style object with styles, let's
name it title maybe because it will be our main title here and below that, I want to have my different
filters.
Now how does a filter look like? We need some switch, some checkbox, something like this that allows
us to turn a filter on and off and a label for that.
Now that means that probably a view makes sense to group label and that switch together and position
them side by side probably
and I'll give the view a style of filter container, something like that and in there, as I said, I want to
have a text with a label, for example say glutenFree there
and next to that, a switch and thankfully React Native has a built-in switch, it's named switch. The switch
component renders a nice switch which we can use,
so here we can just use switch like this and render this onto the screen. We'll need to configure this
but to get started, we can use it like this. Now for some basic styling, for the title and the filter container
here,
let's go down here,
let's add filter container and title here and the title is pretty straightforward. There,
I want to what use font family open sans bold and a font size of 22, a margin in all directions of
20 and also set text align to center to center this. The overall screen by the way should not center
items on the main axis anymore,
so vertical centering should no longer happen
and for that, we can simply get rid of justify content center and filter container on the other hand
should position the switch and the text next to each other in a row.
So here we can set flex direction to row, justify the content maybe by adding space around and align items
on the cross axis is in the center, so that it's centered vertically. Now let's have a look at that, if we
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
it's always jumping back,
that's something we'll take to take care about in a second but generally, we see it and here on filters
for Android, we got an Android switch which also jumps back but which conveniently is already prestyled
for Android,
so that's actually another component built into React Native which has a default look for Android. So
that's not too bad.
One thing I want to change is for the filter container, I want to assign a fixed width of let's say 80%
and actually change this here to space between, not space around because I think that looks a
bit nicer now,
yes definitely, also on Android and now, we can make sure that this switch actually works and that it
doesn't jump back when we trigger it. For that, you need to know that for switches, you manually need to
manage their state and that's actually not new, in React it's often the case that for these input components,
you need to store what the user enters and feed that back into the component to reflect that in the
updated UI
and we do this with state management.
So we import to use state hook from React so that we can manage state here in this functional component
and that here, I'll have my gluten state and I'll name this isGlutenFree and set isGlutenFree
use state, initially that's false
and now on that switch here,
you have a value property, that's a property built into the built-in switch where I feed in
isGlutenFree,
so this takes a boolean which indicates whether that switch is rendered as active or not active, so if
it's marked as checked or not checked I should say and you have an onValueChange property which takes
a function that fires whenever the user clicks
that switch. This function here gets the new value,
so if the switch was in the false mode, in the uncheck mode, the new value will be true and the other
way round of course and we can use that to update our state and set isGlutenFree to the new value
and since we also feed this state back in, now our switch should be changeable and should stay in that
updated mode.
So now if we have a look at this, now we can really toggle that switch and that's an improvement.
The styling of the switch is not what I want however, it uses some default color,
of course I would want to use my colors that I use in the app all the time
and for that, we can import our colors constant of course,
so import colors from constants/Colors and the switch has another property that helps us with styling here,
we can add track color which allows us to customize the colors for that switch,
so the background color and so on and track color takes an object as a value, hence we have an object which
we pass here to this dynamic binding where you can set a background color for the false state,
so if it's inactive, if it's unchecked and there I'm fine with the default actually, this looks good
to me
but you can also set one for the true case which is the case that it is checked
and there I want to use colors, primary color and of course you can take any color you wish.
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
with the rest of this application
and obviously, this will also work here on Android. We can also set the thumb color which is the
color of this thumb here which is green here on Android and this just takes a string, a color string,
so a hex code for example, there we can also point at colors primary color and if we do that, on
iOS,
now it has this color
and the same on Android.
Now of course on iOS, this doesn't really look that good, there
I would like to keep the default and the solution is pretty simple,
we can again use the good old platform API, import this and then here when assigning a thumb color, I check
for platform.os equal to Android, in which case I want to use the primary color for my thumb,
otherwise I'll set this to an empty string which means it will use the default which is white on iOS.
And with that, here we have the same look as before which I like on iOS but of course, you can also
fine tune this to your requirements
and on Android, we will still have the look we saw before, if I go to the filter screen here which looks good
there as well. So that's the switch and how we can add it,
now we just need to repeat this for all our other switches as well,
so all the other filters I mean. So I can copy that view and add it again for lactose free or
for vegan
but if you find yourself copy and pasting over and over again as we're trying to do it here,
that's always a good case for creating a separate component or a function that renders this reusable
code.
And here, again I will create a separate component in that same file because I really only use it in
there,
again you could also go for a separate file if you wanted to.
I'll name it filter switch and this gets some props
and in this component, in the end I return this code, we set up a for with the view and the text and
so on
and of course now the text needs to be dynamic. There we could set this to props label and it's totally
up to you what you choose here because you will be the one passing in the props values later anyways
and of course here, what happens onValueChange and what we pass to value also differs.
So here, this should be props state for example or props value or whatever you want to use
and here for onValueChange, I'll simply point at props.onChange for example
but again all these props names of course are totally up to you because you'll be the one using that
component and we will actually use it now here, like this, so self closing component, where we now can
set a label because I'm expecting a label prop here,
if you named it differently, you need to name it differently
here of course and the label of course isGlutenFree because I'm about to replace this switch here.
Then we need to pass in a state because I added a state prop here to manage my value, if you named it
differently, you need to name it differently down there as well
and here I will point at isGlutenFree, at my state
and onChange needs to be provided
because here I'm using the onChange prop to bind it to onValueChange.
So this should point at a function and of course here, I will simply keep this function here and since
I just use onChange here to forward it to onValueChange, we get the new value argument here as well.
Now we can get rid of this view down there and just use our filter switch component and now simply repeat
that which is of course way easier.
So now here we can also have lactoseFree, vegan and vegetarian and we need to add three new states now,
so here let me replicate this, we have isLactoseFree and set isLactoseFree,
here we have isVegan and set isVegan
and here we have isVegetarian and
and set isVegetarian.
Now we just need to make sure we use the states in the right places,
so for the second filter switch where we have the lactoseFree filter, I forward
the isLactoseFree state and I update set isLactoseFree of course. For the vegan switch, I forward
isVegan and we update it with set isVegan and for vegetarian, we forward isVegetarian and we update
set isVegetarian, like this.
OK,
that should be it, if we now save this, we should have a filter screen with our different filters which
we can set independently because we're having independent states. I think would it be nice to have some
spacing between these rows, so let's implement this. On our filter container here, we can simply add a
margin vertical of let's say 10 or 50 maybe, a bit more and this should make sure that
we have some spacing there,
yes and this looks quite nice.