Now that we've got some information about our particular restaurant that we're looking for we can start
to show some information about it on the screen.
So to get started I'm going to remove that console log.
Now I want you recall when our application or when this component is first displayed results is going
to have a value of No.
So if we tried to refer to some different properties on it like this restaurant's name or images or
something like that we'll get an error message.
So to handle that before we return our J.S. X down here I'm going to add in a little check.
I'm going to say if there is no result yet.
So if result is nil then we're just going to return null from our component altogether.
That essentially means do not show anything on the screen whatsoever until we actually get some kind
of result we can eventually add in some error handling to maybe show an error message instead of just
null right here.
But we'll take care of that later on.
Now if we get past this if statement then we are guaranteed to have an actual result like the object
we really care about.
So to get started rather than showing a text element right here with just results show and replace it
with a text of result dot name.
Let's save this and test once again I'll tap and there's my results.
Very good OK.
So now that we can show some information coming back from our results we can now start to iterate over
that list of images that we fetched.
Remember it's stored inside of that property of photos and we can essentially display a list of all
these different photos to the user anytime we're building a list.
Well usually we're going to want to reach for the flat list element and this is going to be another
perfect use of flat lists.
So I'm going to import flat list of the top
there's flat list and now underneath our text element I'll place my flat list and then inside of here
we'll pass in our data which is going to be a result dot photos that's going to be an array of strings
will then define our key extractor.
Remember this is gonna be a function that gets called with our Not really.
Maybe the item is a great term in this case we'll call it photo so our photo variable right here is
going to be a string.
It's going to be the actual euro that we need to fetch to get our image because that is a unique inconsistent
string.
We can actually use the oil itself as our key so I'll put that in as the return.
Just turn photo like so then finally we can define our render item function so remember once again this
thing is going to be called with a first argument that has a couple of different props inside of it.
The only property we really care about is the item property which is going to be the actual photo string
or the actual U.R.L. of the photo we're trying to show.
So now we need to somehow show an image to the user to do so.
I'm gonna make sure that I import Image from react native at the top
and I'll go back down inside of render item I will return image I'll define it source as you are I item
like so and remember we want to have two sets of curly braces here one set is to designate that we're
going to place a javascript expression the second one is saying here's an actual object.
Now remember by default an image doesn't really want to display itself it's going to have zero height
zero width.
So we probably need to add in a style to this thing so loud in style coming from styles dot image and
then downside my style sheet we'll put in our image property in for now.
Once again just give the thing a fixed height and width so I'll do a height of maybe I don't know 200
units and a width of 300 OK.
So looks pretty good.
Let's see this once again and see how we're doing.
So I'll put back over all tap on when the restaurant's and there's my images.
Awesome.
Well that's pretty much it.
That's our whole application.
There's definitely a couple of extra things we can do here to kind of spice it up a little bit more.
So let's take a quick pause and maybe tackle a couple more things inside the next video.