So let's focus on the meal detail screen for now,
so
the part here where we view the details of the selected recipe.
Right now, we just have the dummy content there, of the meal detail screen and that's of course not
the content I really want to have there,
instead what should be in there?
Well, if we have a look at our meal model, it probably makes sense to have the image there,
please keep in mind that the title already is shown in our header, so it makes sense to have the image
here at the top maybe and below that, maybe just again repeat duration, affordability and complexity just
as we're doing it here below our recipe
and then also below that, list all the ingredients and the steps it takes to make that dish. So that's
in the end what I want to have on this page here on the MealDetailScreen and therefore,
I think it makes sense to first of all add a scroll view because we'll certainly have a lot of content
on there that will most likely not fit onto one screen and certainly not on all possible device sizes.
So I will add a scroll view here and wrap that around my content here.
Now we'll have a couple of different sections here,
for example at the very top, I want to have my image and for this,
I will also import the image component from React Native here so that we can render an image
here, not a background image but a normal image
and I want to add this, let's say here right at the top, something like that.
Now after the image, I want to have a view with the duration, affordability and complexity as I mentioned,
so basically the same setup we have in the meal item, this here you could say and therefore I'll actually
copy the view from there and then we can adjust it as we need it here in the MealDetailScreen,
so I'll just replace this view with the copy view.
Of course that requires us to import default text component here,
so let's add this,
let's import default text from components
default text. So that's the next row
and thereafter, I want to have my ingredients and the steps you need to execute.
So we can add some text here where we say ingredients and there, I want to also apply a style, like styles
text, title, something like this or just title
because I want to have some bold header here, maybe increase the font size. Below that, have my list of
ingredients, so list of ingredients and that's of course not the final content, instead we will render
a list here and below that, I'll repeat this here because then I want to have a title where I say steps
and then a list of steps below that and now I'll get rid of this old content down there and that's what
I want to work with.
Now of course, all the styles are missing and also props duration and so on, that doesn't yield anything,
instead we have to work with the selected meal here, selected meal duration, selected meal complexity, selected
meal affordability and for the image for example, I want to add a source here, source since it's a network
image, is an object with a URI property which points at selectedMeal.imageUrl to load
this and we also need to apply a style there, to set a width and a height,
so here I want to point at styles image let's say and all these styles are missing as I said so let's add
that. Here for this style, I also want to say styles.details maybe because we're displaying the details
of this recipe and let's go down to the stylesheet therefore, remove the screen which we don't need
anymore,
innstead let's add image and details. Now for details, we need to set the flex direction to row because
that should be all the details in a row.
We can add a little bit of padding in all directions maybe of 15 and also add a justify content of space
around to nicely distribute our detail items here, that should be good.
In addition to that, on the image here, we also need to add a style, there
the width should be 100% let's say, to take the full available width and for height,
I'll go with 200,
though of course you could dynamically calculate this with the dimensions API for example to always
take a certain fraction of the available height or simply play around with different values here.
I'll go with that and have a look here and
that doesn't look too shabby,
that's not too bad.
Now you could definitely also try some bonus work here, some bonus tasks and for example color
these details - simple, affordable and the duration depending on whether it's rather short or depending
on the different values you have for simple, for the complexity and the affordability.
It's not something I will do here but you can have a look at the meal data of course to see which values
we have there to derive what's short, what's a medium duration what's a long duration and to see which
values are getting used for complexity and so on and then you could actually add some if checks to apply
different styling to the different values we're outputting here in meal detail screen for these
details so that you color the text differently depending on whether it's long or not. It's not something
I'll do here because it's just some extra work that doesn't really add much to the navigation which
is the focus of this module.
So instead, I'll focus on ingredients and steps and there, a first step is to make sure that title here
is styled properly.
So let's add title to the stylesheet and in there, I'll add font family and set this to open sans bold,
set the font size to 22 maybe and set the text align to center to center the text in the middle
and with that if we check this, this looks quite nice.
Now I also want to output my ingredients in my steps of course and for that, it's important to understand
that in the dummy data, these are arrays,
these are my ingredients for example,
these are my steps and you see there's just text in these arrays. So I just want to output my text here
as a list and I'll not use a FlatList because you could do that, you could have scrollable containers
in there so to say but I will simply render the ingredients and the steps on top of each other.
So here, we can use a good old approach we know from Vanilla React or React for web to which I also
showed earlier in the course. We can use our selected meal and there, the ingredients which is an array
of strings and map this into an array of components,
that's how you can output a list of data in React and also React Native
and often, you use FlatList but here we don't need to because it's not an infinite amount
so we don't need these optimizations and we have a wrapping scroll view around the entire screen
so we will be able to also scroll if we're outputting more than fits on the screen, so we're absolutely
fine using this approach
and therefore here, I will have my single ingredient in this map function and map is a method built into
JavaScript as you know
and here we need to return a jsx element now
and what I want return is a text component where I simply output ingredient because ingredients
is an array of strings,
so ingredient is just a string
and then here we also need to supply a key, that's a requirement by React
and we can use ingredient as a key because we'll always have each ingredient only once.
So that is guaranteed to be unique,
that's how our meals are set up
and with that if we save this and we have a look at a recipe here, we see our ingredients. Now for the
styling, we can certainly do something there
and I will do so in a second but before I do that, let me repeat this for the steps here,
replace this text with selectedMeal.steps and then output each step here which is also just a string and
which is also unique in a text and with that added, we should also see the steps for our meal, indeed we do.
Now again, styling can be improved a little bit and we'll do just that
and I think it makes sense to create a separate component or render function for this and I will
create a separate component, we'll store it in the same file though because we really only use it in that
file
but you could also create a new file, totally up to you. There
I'll have my list item which receives props where I return
and now here I want to use a view which I'm importing as a wrapper so that I can style this container
and in there, have my text where I output props children and now that view here will get a style from
styles.ListItem maybe so that we can style this nicely
and here of course, I don't want to use text but actually default text,
also here of course
so that we take advantage of our own custom text.
Now for the list item style here, let's go down to the stylesheet and add list item and each list item
should have some margin, a vertical margin of let's say 10 and a horizontal margin of let's say 20,
so more spacing to left and right and let's also maybe add a border color of a light grayish color
here with #ccc and a border width of 1,
we'll see how that looks like and then also add a little bit of padding in there, 10 in all directions
and we'll see how that looks like.
Now we just need to make sure we use our list item component and we use it by returning that instead
of text here when outputting the ingredients, we still pass ingredient between the opening and closing
tags of our own custom component because there, we're using props children that does use the content
which we pass between opening and closing tags
and we do the same for our steps. With that,
let's have a look at this, yes
doesn't look too bad. We get our steps here, got our ingredients, of course you can refine this styling, fine
tune to your requirements, to the way you want it to look but I'm actually quite happy with that and with
that, we got a basic detail screen and of course, this detail screen also works for our favorites
because we're using one and the same screen there.
So that looks quite nice, the filter screen is what's now missing.