WEBVTT

00:00:00.160 --> 00:00:01.980
Hi, and welcome to this video.

00:00:02.010 --> 00:00:04.220
Now that our custom fonts are installed,

00:00:04.250 --> 00:00:07.490
we're ready to get started
with implementing our project.

00:00:07.520 --> 00:00:10.920
Let's take a look at our
design just one more time.

00:00:10.950 --> 00:00:17.640
Here you see my Figma design opened
and we see the header title that we are

00:00:17.670 --> 00:00:22.660
about to design using the custom
fonts that we just installed.

00:00:22.690 --> 00:00:28.600
What I want to say is that every time you
click into the element like a text

00:00:28.630 --> 00:00:32.460
element, you're able to see
the properties of it.

00:00:32.490 --> 00:00:36.820
Figma was recently updated,
so if you'd like to see all the details,

00:00:36.850 --> 00:00:40.200
you can just click on this
code dev mode right here.

00:00:40.230 --> 00:00:43.520
You might be asked a couple of questions
at the first time,

00:00:43.550 --> 00:00:47.860
so just select that would you
like to see the CSS code for it.

00:00:47.890 --> 00:00:53.440
Now that we are focusing on this text
component, we can see what its font

00:00:53.470 --> 00:00:57.040
families, what its font size is,
what its font weight is.

00:00:57.070 --> 00:01:02.660
We're going to use this information
when creating our title.

00:01:02.680 --> 00:01:03.740
That's great.

00:01:03.770 --> 00:01:10.460
Now for the title, we are actually
going to create a separate component.

00:01:10.490 --> 00:01:16.160
To do that, we're going to create
a new components folder here.

00:01:17.960 --> 00:01:19.440
Inside this component,

00:01:19.470 --> 00:01:23.570
we're going to create another folder
and we're going to call it title.

00:01:23.600 --> 00:01:26.210
This title is going to have

00:01:26.240 --> 00:01:30.700
a JS file where we're going
to set up our component.

00:01:30.730 --> 00:01:33.290
It's also going to have style.

00:01:33.320 --> 00:01:38.780
Js file where we're going to set up
the styling needed for this title.

00:01:38.800 --> 00:01:39.290
Great.

00:01:39.320 --> 00:01:44.020
Now that we've created this file,
the initial step to get started with this

00:01:44.050 --> 00:01:47.840
is to make sure that we
define the title component.

00:01:47.870 --> 00:01:53.740
Let's import react from react and
then we're going to import a text

00:01:53.770 --> 00:01:57.080
component because we're
definitely going to need it.

00:01:58.080 --> 00:02:06.060
What we're going to do after that is
import the styles from style.js file.

00:02:06.090 --> 00:02:09.600
We should make sure that we
define this style here.

00:02:09.630 --> 00:02:12.240
Let's create a constant called style.

00:02:12.270 --> 00:02:17.200
We're going to need to use stylesheet
from react Native, it will be automatically

00:02:17.230 --> 00:02:22.100
imported for me in my editor, so make
sure that you import yours as well.

00:02:22.130 --> 00:02:25.980
We can just call a style title.

00:02:26.010 --> 00:02:28.020
We're not going to write anything inside

00:02:28.050 --> 00:02:31.860
this yet, but we are going
to come back to this.

00:02:31.890 --> 00:02:37.450
Here, let's define a functional
component called title.

00:02:37.480 --> 00:02:44.610
Let's return null so far, and then let's
make sure that we export this title.

00:02:44.640 --> 00:02:49.120
Now, let's think of
the reusability of this component.

00:02:49.150 --> 00:02:52.220
If we want to reuse this title,

00:02:52.250 --> 00:02:56.160
just placing the text here that is going
to say, Let's explore,

00:02:56.190 --> 00:02:59.520
as given on this design,
is not going to be a good idea, right?

00:02:59.550 --> 00:03:03.920
Because if we do that,
then the only time we can use this

00:03:03.950 --> 00:03:08.420
component is when we're going to be
using the Let's explore text.

00:03:08.450 --> 00:03:10.480
We're definitely going to need a prop

00:03:10.510 --> 00:03:14.900
for this,
and therefore, we're going to need the

00:03:14.930 --> 00:03:19.500
props given here to be
able to access the title.

00:03:19.520 --> 00:03:19.880
Great.

00:03:19.910 --> 00:03:24.380
Now that we are
decided on using the props,

00:03:24.410 --> 00:03:29.960
we got to make sure that we type-check our
props and know that we should only use

00:03:29.990 --> 00:03:34.540
this property if the user
passes in a string.

00:03:34.570 --> 00:03:39.380
In order to do that, we're going
to need the library called Prop Types.

00:03:39.410 --> 00:03:41.260
Let's install that.

00:03:41.290 --> 00:03:43.420
Go to your terminal

00:03:43.450 --> 00:03:51.820
inside the social media directory and then
do npm install, Prop Types, Save.

00:03:51.850 --> 00:03:54.400
Let's click on Enter.

00:03:54.640 --> 00:03:57.760
Now that that's installed,
we got to make sure that we install

00:03:57.790 --> 00:04:01.610
the pods if there are any
pods to be installed.

00:04:01.640 --> 00:04:04.460
This is something that's
only done on macOS.

00:04:04.490 --> 00:04:06.720
Windows users, you don't need to do this.

00:04:06.720 --> 00:04:09.400
You can skip this tab,
but let's just do this together.

00:04:09.430 --> 00:04:15.260
Let's go into the IOS folder,
do pod install, and then get out of here.

00:04:15.290 --> 00:04:18.180
Let's see if there's any pods
that need to be installed.

00:04:18.210 --> 00:04:21.220
Great, it seems like we didn't
need to install the pods.

00:04:21.250 --> 00:04:22.840
We're done with the Prop Types

00:04:22.860 --> 00:04:26.180
installation and we can
just start using it.

00:04:26.210 --> 00:04:27.880
Now to use the Prop Types,

00:04:27.910 --> 00:04:33.860
we're going to have to use import
prop types from Prop Types.

00:04:33.890 --> 00:04:38.980
Then here we're going to say title.propTypes.

00:04:39.010 --> 00:04:44.420
Let's see what type of prop
are we expecting here.

00:04:44.450 --> 00:04:48.180
Let's call it a title and say that we want

00:04:48.210 --> 00:04:51.980
this to be a string and it is
something that's going to be required.

00:04:52.010 --> 00:04:55.580
If we don't pass in a string,
we're going to get an error in our

00:04:55.600 --> 00:04:59.820
simulator and we're going to know that we
missed out on passing the property.

00:04:59.840 --> 00:05:04.080
Great.
Now we have to display the text.

00:05:04.100 --> 00:05:11.540
Let's use the text component
and say that we're going to use props.

00:05:11.570 --> 00:05:12.400
Title here.

00:05:12.420 --> 00:05:16.020
Now let's check whether this
is working at all or not.

00:05:16.040 --> 00:05:19.680
In order to do that,
we got to go back to the app.js

00:05:19.680 --> 00:05:20.035
file.

00:05:20.235 --> 00:05:22.520
Let's say that instead of this text

00:05:22.540 --> 00:05:28.140
component, we are actually going
to be using the title component.

00:05:28.170 --> 00:05:33.060
Let's use the title here and let's
make sure that we import this.

00:05:33.090 --> 00:05:37.500
We're not going to need these here
anymore, so we can just get rid of it.

00:05:37.530 --> 00:05:39.360
Let's save it.

00:05:40.280 --> 00:05:41.100
Great.

00:05:41.130 --> 00:05:44.700
Right now, nothing is displayed,
which is expected.

00:05:44.730 --> 00:05:47.540
Here we see a warning, failed prop type.

00:05:47.570 --> 00:05:53.700
The prop type is marked as required,
but its value is undefined.

00:05:53.730 --> 00:05:56.740
Let's make sure that we
do pass in the value.

00:05:56.770 --> 00:05:58.780
Let's set up title.

00:05:58.800 --> 00:06:07.180
Here we can just go here, copy this text
and make sure that we pass it here.

00:06:07.210 --> 00:06:12.100
Let's save this and here we
see the text, Let's explore.

00:06:12.130 --> 00:06:14.960
Now, we are going to need styling for this

00:06:14.980 --> 00:06:21.140
because we want to make sure that this is
similar to what's given on the design.

00:06:21.170 --> 00:06:24.200
Since we already know what is required

00:06:24.230 --> 00:06:29.160
here, let's just make sure that we create
a style here exactly according to that.

00:06:29.190 --> 00:06:34.080
Let me move this window
slightly to the right side.

00:06:34.160 --> 00:06:39.020
What we're going to do here
is set up the styles here.

00:06:39.040 --> 00:06:41.580
First of all, we're going to need a color,

00:06:41.600 --> 00:06:46.740
and let's just copy this color from here
and paste it here.

00:06:46.760 --> 00:06:47.820
Great.

00:06:47.850 --> 00:06:51.740
Then we are going to need
the font Family setup.

00:06:51.770 --> 00:06:55.920
Remember that here we can use
our Get font Family function.

00:06:55.950 --> 00:06:56.980
Let's do that.

00:06:57.010 --> 00:06:58.880
It was automatically imported for me.

00:06:58.910 --> 00:07:00.780
Make sure it is for you as well.

00:07:00.800 --> 00:07:03.660
Base font is going to be inter as given

00:07:03.690 --> 00:07:07.260
here and the font weight
is going to be 600.

00:07:07.290 --> 00:07:11.380
Make sure to pass in 600
and make it a string.

00:07:11.400 --> 00:07:12.260
Great.

00:07:12.290 --> 00:07:17.100
Now what we want to do is also make
sure that we have the font size set.

00:07:17.130 --> 00:07:21.740
Let's set the font size to 24
as given here.

00:07:21.770 --> 00:07:23.100
Save this.

00:07:23.130 --> 00:07:31.020
Let's export default style so that we can
use this style inside our title here.

00:07:31.040 --> 00:07:38.085
Let's assign this style right here
and say that we're going to use style.title.

00:07:38.285 --> 00:07:38.620
Great.

00:07:38.650 --> 00:07:39.600
Let's save this.

00:07:39.630 --> 00:07:44.020
Now let's take a look at
how this looks for us.

00:07:44.040 --> 00:07:46.720
Here you go.
You have the Let's explore text here.

00:07:46.750 --> 00:07:50.740
It is very similar
to the design given here.

00:07:50.770 --> 00:07:53.980
This is how easy it was to set up a custom

00:07:54.010 --> 00:07:56.660
title that we're going
to use in this application.

00:07:56.680 --> 00:07:59.320
In the next video,
we're going to make sure that we can come

00:07:59.350 --> 00:08:02.260
up with a way of showing
the icon here as well.

00:08:02.280 --> 00:08:03.680
Thank you so much for watching.

00:08:03.680 --> 00:08:05.760
Stay tuned and I'll meet
you in the next video.