All right my friends in this video we're gonna start to work on our results detail component and make
sure that it looks a little bit closer to this thing right here.
So we're gonna pull off a couple of properties off this result prop and just show them inside of it.
The first thing we want to do is show our image.
Remember at the very top we imported image from React Native so we can use this primitive element right
here to show the image that's included with our result object as a quick reminder if we take a look
at the Jason that we get back describing this business it has a image underscore your l property.
So that's the U R L of the image that we want to show to the user.
So inside this view element I'm going to add in a image element and to assign a U R L to this we're
gonna pass in a source property.
Notice that this is the full word source.
It's not as RC as you would normally see inside the browser.
So full word source.
We're then going to pass this thing an object.
So as usual put in those two sets of curly braces.
Remember the outer red one on my screen means we're about to refer to a javascript expression and then
the inner one is forming the actual object that we want to pass.
To this then inside this object we're gonna specify the image or where to get this image from with the.
You are a prop so your eye is gonna be aware React Native tries to get this image from.
So for us we want it to come from result dot image underscore you are El.
Let's save this and make sure we can see our list of the images appear so I'll put back over and sure
enough we get absolutely nothing.
So here's the issue when we show an image element by default.
Usually we're not going to see anything on the screen because very much like a view element a image
is going to try to collapse itself unless we set some kind of fixed height or with to it so we need
to add in an additional style to our style sheet down here and apply it to that image element.
So inside of my style sheets I'm going to add in a new section called image I can get the thing a width
of 250.
I'm also going to add in right away a border radius to it as well.
Remember a border radius can be used to kind of round off the corners of an element.
And even though the original mockup over here has kind of straight edge corners adding in a border radius
is gonna make our final product just look a little bit nicer.
So I'm gonna put in a width of 250 and a border radius of 4 and then I'll apply that style to my image
so do styles or see me style is styles dot image get save that and well now we've got some space for
the image but it's still not actually being displayed so it turns out that just assigning a whip to
an image is not enough.
Remember by default an image wants to collapse itself.
So a very easy way we can fix this is either to assign a fixed height to it or alternatively we could
figure out some other way to adjust the height.
In this case we'll just assign a height and I'm gonna show you a different way to handle this in just
a moment.
So in this case I'm gonna put a height in of like 1 to 1 year so that at least get us started.
So I'll save it and now we've got some images appearing.
Very good.
So we've got our images on the screen.
That's great but we still have a lot of additional styling to do.
So the next thing I think we should handle is a little bit of additional styling on the name of the
restaurant itself back inside of our mockup.
We want that text to be maybe slightly larger than usual but definitely bolded so back inside my style's
object I'm going to add in a style section called name so this will be for the name of the restaurant
and we're gonna apply it to that text element right there.
I'll give the thing a font weight of bold like so remember the default font size with React Native is
14.
So if you want this to be a little bit larger we could put in a font size like 15 or maybe even 16 would
be appropriate here.
Then we can apply that style to our text element.
So these style is styles dot name.
Let's say this once again and yeah I'd say that looks reasonable.
Now maybe the font size is a little bit too low.
Large here because it's kind of hard to see the actual heading of each of these different sections.
So I'm going to just revert back to the default font size of 14 by removing the font size property and
yeah I think that looks a little bit closer to our mockup OK.
Now the last thing we want to put on here before we do some last round of styling is the number of stars
and the number of reviews.
So if we take another look at that Jason object on the yelp API documentation we'll see that this thing
has a rating property and it also has a review underscore count property as well.
So that's where we're going to get our number of stars from and the number of reviews so back over here
inside of results detail.
I'm going to place another text element and inside of it I'll print out result dot and then we want
to get the current rating.
So we'll do result rating stars and in a coma and then result dot review underscore count reviews
get let's save one more time and there we go.
So we've now got three point five stars one to one reviews and same thing for say Noodles Company and
so on throughout this list Well we've now got all the information we want to display but we definitely
still need to work on some styling.
So let's take another quick pause and finish up some styling on our results detail in the next video.