1 00:00:01,180 --> 00:00:05,350 Now that we've got some information about our particular restaurant that we're looking for we can start 2 00:00:05,350 --> 00:00:07,540 to show some information about it on the screen. 3 00:00:07,780 --> 00:00:10,690 So to get started I'm going to remove that console log. 4 00:00:10,720 --> 00:00:15,430 Now I want you recall when our application or when this component is first displayed results is going 5 00:00:15,430 --> 00:00:17,170 to have a value of No. 6 00:00:17,170 --> 00:00:22,270 So if we tried to refer to some different properties on it like this restaurant's name or images or 7 00:00:22,270 --> 00:00:24,920 something like that we'll get an error message. 8 00:00:24,970 --> 00:00:30,270 So to handle that before we return our J.S. X down here I'm going to add in a little check. 9 00:00:30,490 --> 00:00:33,730 I'm going to say if there is no result yet. 10 00:00:33,730 --> 00:00:39,220 So if result is nil then we're just going to return null from our component altogether. 11 00:00:39,250 --> 00:00:43,810 That essentially means do not show anything on the screen whatsoever until we actually get some kind 12 00:00:43,810 --> 00:00:49,570 of result we can eventually add in some error handling to maybe show an error message instead of just 13 00:00:49,570 --> 00:00:50,360 null right here. 14 00:00:50,470 --> 00:00:52,730 But we'll take care of that later on. 15 00:00:52,780 --> 00:00:57,610 Now if we get past this if statement then we are guaranteed to have an actual result like the object 16 00:00:57,640 --> 00:00:59,180 we really care about. 17 00:00:59,350 --> 00:01:04,990 So to get started rather than showing a text element right here with just results show and replace it 18 00:01:04,990 --> 00:01:09,340 with a text of result dot name. 19 00:01:09,340 --> 00:01:14,990 Let's save this and test once again I'll tap and there's my results. 20 00:01:15,020 --> 00:01:16,660 Very good OK. 21 00:01:16,700 --> 00:01:21,230 So now that we can show some information coming back from our results we can now start to iterate over 22 00:01:21,230 --> 00:01:23,090 that list of images that we fetched. 23 00:01:23,090 --> 00:01:28,970 Remember it's stored inside of that property of photos and we can essentially display a list of all 24 00:01:28,970 --> 00:01:32,910 these different photos to the user anytime we're building a list. 25 00:01:32,910 --> 00:01:37,680 Well usually we're going to want to reach for the flat list element and this is going to be another 26 00:01:37,680 --> 00:01:39,240 perfect use of flat lists. 27 00:01:39,900 --> 00:01:41,880 So I'm going to import flat list of the top 28 00:01:44,690 --> 00:01:52,920 there's flat list and now underneath our text element I'll place my flat list and then inside of here 29 00:01:52,980 --> 00:01:59,930 we'll pass in our data which is going to be a result dot photos that's going to be an array of strings 30 00:02:01,240 --> 00:02:06,480 will then define our key extractor. 31 00:02:06,510 --> 00:02:09,630 Remember this is gonna be a function that gets called with our Not really. 32 00:02:09,630 --> 00:02:15,590 Maybe the item is a great term in this case we'll call it photo so our photo variable right here is 33 00:02:15,590 --> 00:02:16,570 going to be a string. 34 00:02:16,580 --> 00:02:21,860 It's going to be the actual euro that we need to fetch to get our image because that is a unique inconsistent 35 00:02:21,860 --> 00:02:22,380 string. 36 00:02:22,430 --> 00:02:26,950 We can actually use the oil itself as our key so I'll put that in as the return. 37 00:02:27,120 --> 00:02:35,230 Just turn photo like so then finally we can define our render item function so remember once again this 38 00:02:35,230 --> 00:02:39,450 thing is going to be called with a first argument that has a couple of different props inside of it. 39 00:02:39,610 --> 00:02:45,280 The only property we really care about is the item property which is going to be the actual photo string 40 00:02:45,340 --> 00:02:48,870 or the actual U.R.L. of the photo we're trying to show. 41 00:02:48,880 --> 00:02:52,230 So now we need to somehow show an image to the user to do so. 42 00:02:52,240 --> 00:02:55,120 I'm gonna make sure that I import Image from react native at the top 43 00:02:59,140 --> 00:03:09,450 and I'll go back down inside of render item I will return image I'll define it source as you are I item 44 00:03:09,450 --> 00:03:14,700 like so and remember we want to have two sets of curly braces here one set is to designate that we're 45 00:03:14,700 --> 00:03:20,160 going to place a javascript expression the second one is saying here's an actual object. 46 00:03:20,200 --> 00:03:24,810 Now remember by default an image doesn't really want to display itself it's going to have zero height 47 00:03:24,810 --> 00:03:25,950 zero width. 48 00:03:25,950 --> 00:03:33,960 So we probably need to add in a style to this thing so loud in style coming from styles dot image and 49 00:03:33,960 --> 00:03:38,560 then downside my style sheet we'll put in our image property in for now. 50 00:03:38,580 --> 00:03:44,780 Once again just give the thing a fixed height and width so I'll do a height of maybe I don't know 200 51 00:03:44,820 --> 00:03:49,630 units and a width of 300 OK. 52 00:03:49,660 --> 00:03:50,510 So looks pretty good. 53 00:03:50,510 --> 00:03:53,210 Let's see this once again and see how we're doing. 54 00:03:53,210 --> 00:03:58,900 So I'll put back over all tap on when the restaurant's and there's my images. 55 00:03:58,900 --> 00:04:00,420 Awesome. 56 00:04:00,460 --> 00:04:01,350 Well that's pretty much it. 57 00:04:01,360 --> 00:04:03,100 That's our whole application. 58 00:04:03,220 --> 00:04:07,480 There's definitely a couple of extra things we can do here to kind of spice it up a little bit more. 59 00:04:07,630 --> 00:04:11,320 So let's take a quick pause and maybe tackle a couple more things inside the next video.