1
00:00:01,290 --> 00:00:05,310
All right my friends in this video we're gonna start to work on our results detail component and make

2
00:00:05,310 --> 00:00:08,230
sure that it looks a little bit closer to this thing right here.

3
00:00:08,310 --> 00:00:12,870
So we're gonna pull off a couple of properties off this result prop and just show them inside of it.

4
00:00:12,870 --> 00:00:15,100
The first thing we want to do is show our image.

5
00:00:15,270 --> 00:00:19,950
Remember at the very top we imported image from React Native so we can use this primitive element right

6
00:00:19,950 --> 00:00:26,070
here to show the image that's included with our result object as a quick reminder if we take a look

7
00:00:26,070 --> 00:00:33,210
at the Jason that we get back describing this business it has a image underscore your l property.

8
00:00:33,210 --> 00:00:37,930
So that's the U R L of the image that we want to show to the user.

9
00:00:37,970 --> 00:00:43,910
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

10
00:00:43,910 --> 00:00:46,340
gonna pass in a source property.

11
00:00:46,340 --> 00:00:48,230
Notice that this is the full word source.

12
00:00:48,230 --> 00:00:51,780
It's not as RC as you would normally see inside the browser.

13
00:00:51,830 --> 00:00:54,950
So full word source.

14
00:00:54,950 --> 00:00:57,380
We're then going to pass this thing an object.

15
00:00:57,470 --> 00:01:00,500
So as usual put in those two sets of curly braces.

16
00:01:00,600 --> 00:01:05,720
Remember the outer red one on my screen means we're about to refer to a javascript expression and then

17
00:01:05,720 --> 00:01:08,360
the inner one is forming the actual object that we want to pass.

18
00:01:08,360 --> 00:01:14,330
To this then inside this object we're gonna specify the image or where to get this image from with the.

19
00:01:14,330 --> 00:01:20,230
You are a prop so your eye is gonna be aware React Native tries to get this image from.

20
00:01:20,300 --> 00:01:28,370
So for us we want it to come from result dot image underscore you are El.

21
00:01:28,410 --> 00:01:34,390
Let's save this and make sure we can see our list of the images appear so I'll put back over and sure

22
00:01:34,390 --> 00:01:36,500
enough we get absolutely nothing.

23
00:01:36,520 --> 00:01:39,790
So here's the issue when we show an image element by default.

24
00:01:39,790 --> 00:01:44,710
Usually we're not going to see anything on the screen because very much like a view element a image

25
00:01:44,710 --> 00:01:50,790
is going to try to collapse itself unless we set some kind of fixed height or with to it so we need

26
00:01:50,790 --> 00:01:55,710
to add in an additional style to our style sheet down here and apply it to that image element.

27
00:01:55,810 --> 00:02:02,660
So inside of my style sheets I'm going to add in a new section called image I can get the thing a width

28
00:02:02,930 --> 00:02:05,140
of 250.

29
00:02:05,220 --> 00:02:08,700
I'm also going to add in right away a border radius to it as well.

30
00:02:08,760 --> 00:02:12,460
Remember a border radius can be used to kind of round off the corners of an element.

31
00:02:12,600 --> 00:02:17,250
And even though the original mockup over here has kind of straight edge corners adding in a border radius

32
00:02:17,250 --> 00:02:21,730
is gonna make our final product just look a little bit nicer.

33
00:02:21,930 --> 00:02:28,540
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

34
00:02:29,300 --> 00:02:41,180
so do styles or see me style is styles dot image get save that and well now we've got some space for

35
00:02:41,180 --> 00:02:45,680
the image but it's still not actually being displayed so it turns out that just assigning a whip to

36
00:02:45,680 --> 00:02:47,040
an image is not enough.

37
00:02:47,090 --> 00:02:50,330
Remember by default an image wants to collapse itself.

38
00:02:50,330 --> 00:02:56,270
So a very easy way we can fix this is either to assign a fixed height to it or alternatively we could

39
00:02:56,510 --> 00:02:58,910
figure out some other way to adjust the height.

40
00:02:59,030 --> 00:03:03,140
In this case we'll just assign a height and I'm gonna show you a different way to handle this in just

41
00:03:03,140 --> 00:03:04,220
a moment.

42
00:03:04,220 --> 00:03:08,650
So in this case I'm gonna put a height in of like 1 to 1 year so that at least get us started.

43
00:03:09,420 --> 00:03:13,910
So I'll save it and now we've got some images appearing.

44
00:03:14,070 --> 00:03:18,110
Very good.

45
00:03:18,270 --> 00:03:19,720
So we've got our images on the screen.

46
00:03:19,800 --> 00:03:23,270
That's great but we still have a lot of additional styling to do.

47
00:03:23,360 --> 00:03:27,030
So the next thing I think we should handle is a little bit of additional styling on the name of the

48
00:03:27,030 --> 00:03:29,990
restaurant itself back inside of our mockup.

49
00:03:30,000 --> 00:03:36,840
We want that text to be maybe slightly larger than usual but definitely bolded so back inside my style's

50
00:03:36,840 --> 00:03:43,360
object I'm going to add in a style section called name so this will be for the name of the restaurant

51
00:03:43,390 --> 00:03:46,480
and we're gonna apply it to that text element right there.

52
00:03:46,480 --> 00:03:54,790
I'll give the thing a font weight of bold like so remember the default font size with React Native is

53
00:03:54,790 --> 00:03:55,600
14.

54
00:03:55,600 --> 00:03:59,980
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

55
00:03:59,980 --> 00:04:01,810
be appropriate here.

56
00:04:01,940 --> 00:04:04,220
Then we can apply that style to our text element.

57
00:04:04,220 --> 00:04:07,310
So these style is styles dot name.

58
00:04:07,310 --> 00:04:12,020
Let's say this once again and yeah I'd say that looks reasonable.

59
00:04:12,220 --> 00:04:14,690
Now maybe the font size is a little bit too low.

60
00:04:14,830 --> 00:04:19,630
Large here because it's kind of hard to see the actual heading of each of these different sections.

61
00:04:19,630 --> 00:04:25,900
So I'm going to just revert back to the default font size of 14 by removing the font size property and

62
00:04:25,900 --> 00:04:29,720
yeah I think that looks a little bit closer to our mockup OK.

63
00:04:29,730 --> 00:04:35,340
Now the last thing we want to put on here before we do some last round of styling is the number of stars

64
00:04:35,430 --> 00:04:37,250
and the number of reviews.

65
00:04:37,350 --> 00:04:42,480
So if we take another look at that Jason object on the yelp API documentation we'll see that this thing

66
00:04:42,480 --> 00:04:48,490
has a rating property and it also has a review underscore count property as well.

67
00:04:48,570 --> 00:04:54,820
So that's where we're going to get our number of stars from and the number of reviews so back over here

68
00:04:54,940 --> 00:04:56,890
inside of results detail.

69
00:04:56,890 --> 00:05:05,320
I'm going to place another text element and inside of it I'll print out result dot and then we want

70
00:05:05,320 --> 00:05:07,010
to get the current rating.

71
00:05:07,030 --> 00:05:18,100
So we'll do result rating stars and in a coma and then result dot review underscore count reviews

72
00:05:21,270 --> 00:05:25,460
get let's save one more time and there we go.

73
00:05:25,550 --> 00:05:30,530
So we've now got three point five stars one to one reviews and same thing for say Noodles Company and

74
00:05:30,530 --> 00:05:35,640
so on throughout this list Well we've now got all the information we want to display but we definitely

75
00:05:35,640 --> 00:05:37,650
still need to work on some styling.

76
00:05:37,770 --> 00:05:41,970
So let's take another quick pause and finish up some styling on our results detail in the next video.