WEBVTT

1
00:00:00.400 --> 00:00:02.420
Hi and welcome to this tutorial.

2
00:00:02.450 --> 00:00:08.580
Today we're going to be building a single
donation item shown here so that we are

3
00:00:08.610 --> 00:00:13.940
able to use these components whenever
we want to list our donation items.

4
00:00:13.960 --> 00:00:15.620
So for that we're going to have to create

5
00:00:15.650 --> 00:00:21.280
a new component and we're going
to call it single donation item.

6
00:00:21.560 --> 00:00:29.880
And inside this directory we are going
to need a file called single donation item JS.

7
00:00:30.480 --> 00:00:32.940
And we're also going to need a style JS

8
00:00:32.960 --> 00:00:37.380
inside which we're going to import style
sheet from React native,

9
00:00:37.410 --> 00:00:42.780
create a constant for style and make sure
that we have our style sheet created.

10
00:00:42.810 --> 00:00:44.900
And we're going to export

11
00:00:44.930 --> 00:00:49.300
this style from here so that we
are able to import it here.

12
00:00:49.330 --> 00:00:53.060
So first things first,
we're going to need to import React

13
00:00:53.090 --> 00:00:58.660
and then let's import our style
and then let's create

14
00:00:58.680 --> 00:01:04.180
a constant for our single donation item
that is definitely going to need props.

15
00:01:04.210 --> 00:01:08.290
So that we have all of these
information passed so far.

16
00:01:08.320 --> 00:01:13.770
We're going to be returning null
and we're going to export single donation

17
00:01:13.800 --> 00:01:19.340
item that we are able to see
it as we're building it.

18
00:01:19.360 --> 00:01:20.930
So since we're going to need props,

19
00:01:20.960 --> 00:01:26.320
let's get our type checker for prop types

20
00:01:27.800 --> 00:01:31.700
and let's create single donation item

21
00:01:31.730 --> 00:01:36.460
prop types and let's discuss
what we're going to need here.

22
00:01:36.490 --> 00:01:39.360
So we're not going to be downloading this

23
00:01:39.360 --> 00:01:41.850
image, we're actually going
to be displaying real images.

24
00:01:41.880 --> 00:01:44.700
So we're going to need a Uri for the image

25
00:01:44.730 --> 00:01:49.740
that is going to have to be a string
and it's going to be required.

26
00:01:49.770 --> 00:01:51.930
We're going to need the badge title so

27
00:01:51.960 --> 00:01:56.140
that we show it to the user and that is
going to be a string as well.

28
00:01:56.170 --> 00:01:58.100
And it's going to be required.

29
00:01:58.130 --> 00:02:01.290
We're going to need a donation title

30
00:02:01.320 --> 00:02:05.460
so that's also going to be a string
and is going to be required.

31
00:02:05.490 --> 00:02:07.490
And we're going to need the price

32
00:02:07.520 --> 00:02:15.140
for donation that is going to be
a number and it's going to be required.

33
00:02:15.160 --> 00:02:18.170
Let's discuss what components
we're going to need to build this.

34
00:02:18.200 --> 00:02:19.400
So we're going to need an image,

35
00:02:19.400 --> 00:02:22.450
we're going to need a badge,
we're going to need a header component.

36
00:02:22.480 --> 00:02:25.380
So let's import all
of these components here.

37
00:02:25.410 --> 00:02:28.300
Let's say that we need an image and we're

38
00:02:28.330 --> 00:02:32.300
also going to need a view
container to put all of this here.

39
00:02:32.330 --> 00:02:34.340
Let's import this from React native

40
00:02:34.370 --> 00:02:42.700
and let's import our badge component
and let's import our header component.

41
00:02:42.730 --> 00:02:43.730
Great.

42
00:02:43.760 --> 00:02:46.580
Now let's start using the single donation

43
00:02:46.610 --> 00:02:53.300
item from our home page
so that we're able to see the changes.

44
00:02:53.330 --> 00:02:58.300
And right off the bat it's asking me for
the required prop types that I created.

45
00:02:58.330 --> 00:03:02.140
So because of this title here that was

46
00:03:02.170 --> 00:03:08.900
given in the design, I'm just going
to grab a random cactus image, right?

47
00:03:08.930 --> 00:03:13.900
I'm going to save this and I want
you to see props that we make here.

48
00:03:13.930 --> 00:03:18.460
So the badge title is
going to be environment.

49
00:03:18.490 --> 00:03:21.540
The donation title is going to be three

50
00:03:21.570 --> 00:03:29.100
cactus and then price is going to be $44.

51
00:03:29.130 --> 00:03:30.460
Save this.

52
00:03:30.490 --> 00:03:35.980
And now we have no errors because we
have all the prop types passed here.

53
00:03:36.010 --> 00:03:39.100
And let's create a view container.

54
00:03:39.130 --> 00:03:41.700
I'm going to put it inside the parentheses

55
00:03:41.730 --> 00:03:44.580
because I'm going to put
some more items here.

56
00:03:44.600 --> 00:03:46.500
And we're going to need a new container

57
00:03:46.530 --> 00:03:55.780
for the image that will have a source
of uri with the props that we passed.

58
00:03:55.810 --> 00:03:58.780
And this is going to need some styling.

59
00:03:58.810 --> 00:04:02.700
So I'll just create style so
that this image is visible.

60
00:04:02.730 --> 00:04:05.500
And I'll call it Style image.

61
00:04:05.530 --> 00:04:10.700
Actually, I don't need
two sets of braces here.

62
00:04:10.730 --> 00:04:13.460
And then we're going to need a badge here

63
00:04:13.490 --> 00:04:19.260
with a title that's
passed through the props.

64
00:04:19.280 --> 00:04:28.040
And then we're going to need a header
with the title of donation title.

65
00:04:29.480 --> 00:04:32.980
And then we need a price.

66
00:04:33.010 --> 00:04:38.700
So let's check out this price.

67
00:04:38.720 --> 00:04:44.700
So if you're going to see this you will
understand that the font size and line

68
00:04:44.720 --> 00:04:51.300
height and all the font styling setup is
actually very similar to our type three

69
00:04:51.330 --> 00:04:55.820
header that we're supposed to use
here that I forgot to say here.

70
00:04:55.840 --> 00:05:02.620
So it would be a great idea to pass
a color that we want to use for the title

71
00:05:02.650 --> 00:05:07.820
so that our header can be reused
for the price as well so let's do that.

72
00:05:07.840 --> 00:05:09.540
So for that, we're going to need to go

73
00:05:09.570 --> 00:05:13.940
to the header and we're going to say
that we have one more prop type that is

74
00:05:13.970 --> 00:05:17.260
going to be a string and it's
not going to be required.

75
00:05:17.280 --> 00:05:23.140
And let's say that by default,
the color is black.

76
00:05:23.160 --> 00:05:28.700
But if a user passes a color,
we want to apply that to our text styles.

77
00:05:28.730 --> 00:05:32.580
So let's say that props color.

78
00:05:32.600 --> 00:05:36.460
If this is available,
then we want to add a color.

79
00:05:36.480 --> 00:05:40.380
With the color that was passed here.

80
00:05:40.410 --> 00:05:42.740
And now we can just save this.

81
00:05:42.770 --> 00:05:45.100
And then here we're going to say

82
00:05:45.130 --> 00:05:48.940
that for the title, we're actually
using a different color than black.

83
00:05:48.970 --> 00:05:52.700
So let's test that color here

84
00:05:52.730 --> 00:05:56.900
and then we're going to use
this for the price as well.

85
00:05:56.920 --> 00:06:01.720
And here we're going
to need this blue color.

86
00:06:03.840 --> 00:06:12.780
And right in front of our number, we're
going to need the dollar sign and what.

87
00:06:12.800 --> 00:06:19.580
We also want to do is
if the number is not like 44 point

88
00:06:19.600 --> 00:06:25.700
and we want to show it as that what we
could do is use the JavaScript function

89
00:06:25.730 --> 00:06:32.200
to fixed two and now we're
able to see all of our set.

90
00:06:32.230 --> 00:06:35.620
Up here.
Let's get rid of the home

91
00:06:35.650 --> 00:06:39.540
search box so that we're exactly
seeing what we have set up here.

92
00:06:39.570 --> 00:06:45.540
And the only thing missing is the image,
because we didn't give it any dimensions.

93
00:06:45.570 --> 00:06:46.740
So let's do that.

94
00:06:46.770 --> 00:06:53.100
Let's go to our styles and say
that image should be how big.

95
00:06:53.130 --> 00:06:56.560
Its width should be 155 and height should

96
00:06:56.590 --> 00:07:01.420
be 170 so let's do that and here we're
going to say that we need a width

97
00:07:01.450 --> 00:07:09.500
of horizontal styling 155
and a height of vertical scale 170.

98
00:07:09.530 --> 00:07:13.460
Let's import both of these
styling font here.

99
00:07:13.480 --> 00:07:14.900
Let's see.
We see

100
00:07:14.920 --> 00:07:19.440
that the image is looking great here.

101
00:07:19.480 --> 00:07:22.460
So we're going to need to be styling these

102
00:07:22.480 --> 00:07:25.420
items so that it becomes
exactly like this.

103
00:07:25.440 --> 00:07:26.500
And we're going to be doing

104
00:07:26.530 --> 00:07:30.660
that in the next video because I don't
want this video to become too big.

105
00:07:30.690 --> 00:07:34.120
So I'll see you in the next video
and thank you so much for watching.