Welcome back to our social media app project.
Now, I'm really excited to introduce you to how to create the icons.
Icons are very crucial for conveying information quickly and intuitively,
and they help to create consistent visual language across the app.
Now, we're going to take a look
at the Figma design and see what icons we might need for our project.
The icons that are given in our designs
may look great, but they may not scale well for different devices.
This can result in loss of quality and make our app look less professional.
We need a solution that can offer us
high-quality icons that look great on any device.
That's where Fund Awesome comes in.
Font Awesome is a comprehensive library
of icons that are scalable, customizable, and easy to use.
It offers a wide range of icons
in different categories, and we really would use its advantages.
Firstly, it's a tried and tested solution that many developers already use and love.
Secondly, it's easy to customize and add new icons to the library.
Thirdly, it's cross-platform compatible
and works on both iOS
and Android platforms.
Now that we've introduced you
to Found Awesome, we're going to install
it in our project and show you how to use
it to create beautiful and professional
icons that look great on any device.
Let's get started.
Let's go to fontawesome.com
and find an icon similar to this.
We're going to navigate to icons.
We're going to search message.
Here are all of the icons available to us.
I think we could use this icon here.
For the message purpose or we could use the envelope if we really want to.
We can search envelope.
Let's use the envelope.
If we want to use the Font Awesome icons, we're going to have to install it.
That's what we're going to do right now.
For that, we're going to need this page
which tells us how to install Font Awesome in our application.
The link to this page is inside the resources folder.
You can just click on that and you're going to come exactly on this page.
Then we're going to have to just follow the instructions given here.
We have the how to install instructions here.
Just open up your terminal.
Actually, we're not going to need
the Metro Bundler, and that's what opened up right now.
Make sure to close your Metro Bundler.
We're going to need to do this anyways
later, so just close it right now if you have it open.
I'm going to create a new terminal and I'm going to go to our project.
What I'm going to do is
copy this command and paste it here and wait for this to complete.
Now, the next step is installing the pods,
which is something that Windows users don't do because you cannot install pods.
If in any of these videos you see me going to iOS folder and installing the pods
and you have Windows operating system, just don't do this.
Otherwise, if you're on macOS,
copy this comment, paste it here, click on Enter, and run this.
It's going to install one pod.
It might not be visible in my terminal right now because it is already installed.
That's totally fine.
Right now, what we're going to do is install some additional styles.
We're going to go with the free branding.
Just copy this command again, paste it here.
This is something that any user should do whether you're on Windows or not.
Just do this and click on Enter.
It's going to install.
Right now, we are able to launch our
application and start using the font awesome icon.
Great, let's do that.
I'm going to use
npx react-native run-ios
windows users just going to use Android.
That's totally fine.
It will work the same way on both of the emulators.
That's totally okay.
Now let's wait for this to build.
Once your build is completed, just come back to the video so that we can
continue building our social media application.
Great. My Metro Bundler is running already
and everything's ready for us to continue down our path of creating the icon.
We have the design here.
I have my editor right here.
I do want the simulator to be visible, so I'm going to have to take care of that.
Let's do it like this.
Now we are going to have to use the envelope icon.
But we do see here that there are some
more things to be taken care of, such as, let's explore is
at a very left most side here, which is something that we don't need.
We actually need some margins around these items.
On the left side, we need 26 as it is visible here.
On the right side, we are going to need 17.
Actually, there is a top margin here as well, which is 30.
Let's make sure to do that.
Now, let's think about this.
How do we want to approach this?
We see that these items are in a row,
which means that we have to place both of these items in the same container.
We have the title and we're going to add the icon right now.
But there's a bunch more things coming here and we don't want the container
to just be the safe area view because that defines the whole page.
Here we're going to need a view container.
Let's use the view container and wrap this title inside here.
Let's make sure that we import the view container and save this.
Then what we're going to do is style this view container.
Let's give it a style.
Let's say that we want the margin left to be 27 and margin right to be...
How much was it?
It was 17.
Okay, so it should be 17 here.
We don't see the margin right here because
there's so much space, but we're going to see it later once we add the icon.
I missed out on adding margin top.
Let's make sure it's right here as well.
I'm going to align this in a way where you see how I style the components.
Great.
Then what we need to do is make sure that we add the icon.
Let's add the icon.
It would be Font Awesome icon.
Once I click, you're going to see the Font Awesome icon imported here.
This is the path.
Then we're going to need the envelope icon.
My editor has auto suggestions on, so I think yours is going to have as well.
If I type in envelope here, you're going to see the string envelope.
I don't want to use the string, actually, I'm going to use the variable name here.
If I click here, I can choose the free solid SVG icon to be imported.
It's going to be added here for you as well if you want, just copy this.
Let's use the FA envelope right here.
Let's close this component so that we have no errors.
Save this.
Here you see the envelope icon pop up.
But what's the problem here?
This is in a column.
We see these two items in a column, but we want it to be in the row.
What do you use when you see this behavior?
You can use flex direction and just say that you want these items to be in a row.
Great.
Now we see that we need some centering, vertical centering.
Let's think about this.
We have a flex direction row, meaning that our main axis lies horizontally.
It goes like this, it's horizontal.
What we need is something that will help us center it vertically.
Anytime you are referencing a cross axis
and not the main axis, you're going to use align items.
We're going to say that we want these items to be centered vertically and we see
that envelope was centered vertically, great.
Now we want to make sure that there's some space in between these items horizontally.
We're going to reference the main axis and therefore we're going to use
Justify Content and say that we want some space in between these items.
Great.
Now, something weird might happen here where your.
We can see that this icon is too close
to the right side compared to our given design.
No worries about this.
The thing is that this icon actually has padding.
It has a padding inside the component,
meaning that it gives the space inside the component itself.
What we're going to have to do to achieve
the same result is make sure that we wrap this component into something.
The message icon is most probably going to be pressable.
We can use either pressable component here
or I could introduce something new and fun and introduce you to touchable opacity.
This is also a component that is something that allows you to set up on press events.
It's practically a button.
It was imported right here.
It is a component offered by React Native.
Let's make this fun and introduce this a new component.
If you press on it,
it's going to have opacity, and that's why it's called touchable opacity.
A button that you can touch and it's going
to turn into a little transparent button, on press.
Now I'm pressing down on this icon and that's why it has the opacity.
If I release, it's going to turn into its original color.
I think it's something cool and already good user experience.
It's ready-made, so let's just use that. Why not?
Here we're also going to need some styles.
Mainly, what we're going to be concerned
here about is that we assign some padding to this.
The padding around this icon is around 14 or 12.
There's a bunch of different numbers, but let's choose just one and stick with it.
I'm just going to say that padding is 14, let's say here.
Here you're going to see that this icon
was moved a little bit to the left, which is what we wanted.
Now we're going to make sure that it has the same color as given here.
Because you see here that it is very light gray.
Let's just grab this color right
directly from here and we're going to say that background color is equal to this.
We need the hash sign here.
In right now you see that it has this rectangular shape.
Therefore, we need the border radius as well.
Border radius is also given right here.
It's 100.
We can just set border radius to 100.
I think it's a little bit too much and too
excess because you can achieve the same result without 100.
But it doesn't really matter.
Even if I turn this to thousand, it will still be circular.
That's great.
Now we want to change the color of this icon itself.
I'm just going to click here.
Here's the color of the icon.
I just copied this and I'm going to say, Hey, I want to pass a color to this
Fantasom icon and I'm going to just pass it to it.
That's why Fantasom icons are so cool because you can modify them so easily.
Great. Now we have this icon.
It's similar to this icon given here.
It's not totally exactly like that icon, but it will do so far.
Now what we want to do is make sure
that we clean up this file and not leave these inline styles right inside this app.js
file because we're not striving to become a mediocre developer.
We want to be developers who are excellent
and make sure that code is formatted the right way.
This is something very important
that a lot of companies pay significant attention to.
Just let's do the same and make sure
that right from the start, we adhere to the best practices.
For this, what we're going to need to do is
create a new folder inside our assets folder, and let's call it styles.
Let's create a new JavaScript file, and let's just call it Globalstyle.js
great.
Here I'm going to import the style sheet,
and then I am going to define global style.
I'm going to use this style sheet to create a new style.
I am going to make sure that this is
exportable as well so that we can use it here.
Let's import global style here and let's
cut this out and say that we're going to use Global style.header.
Now, we need to make sure that this is defined inside the global style.
Let's move in here, create the header,
paste this code inside of here, and click on Save.
We're going to see that our setup looks exactly the same way as it looked before
and that's exactly what we were striving for.
Now we're going to do the same with this and let's just call this message icon.
Let's save this.
Go here,
create message icon, paste this here, and great, everything is looking awesome.
Now, I don't want to make this video too
big, but I do want to make sure that this looks exactly like that.
I do see here that there's a number given
here about how many messages are inside our inbox.
Let's just design that very quickly here.
For this, we're going to have to create a new view component.
Let's just do this.
Inside this view component, we're going to place a text.
Now let's make sure that the text component is imported right here.
Let's just write two inside of here.
We see this two appear here in such a weird way.
We want this to be next to the envelope correctly.
First of all, what we need to make sure of is that we
have the envelope size correctly set, and it seems like its height is 20.
Let's just set one more property here and say that the size is 20.
This became a little bit larger, which is totally fine.
Now what we want to do is make sure
that this two has the appropriate background color.
Let's grab this background color from here and say that we're creating a new style
and it's going to be called global style message number container.
Let's go here, create message number container,
and let's create a background color that is going to be of this color.
Here we see a square, and inside the square we see two.
First of all, we want to make sure that this is centered.
Let's do Justify Content Center,
and then let's make sure that flex direction is set to row.
Now this is center,
and we also want to make sure that the color here is of the white color.
Let's create another style here and call this message number.
Go to globalstyles, create message number
and make sure the color is set to white.
Now that we have that, let's make sure the font size is correct.
Here the font size is given at six.
Let's make sure that font size is six.
It became so much smaller here.
Then what we also want to do is set
the font weight to 600 and make sure that font family is inter.
What do we do for that?
We say that we want to set font family
and we're going to get the font family from our previously set up function.
We're going to say that our base font is inter and our font weight is 600.
Great. Now this became a little bolder.
I don't know if you saw that or not.
I hope that you did.
Then we want to make this a circular item.
We have to make sure that the width and the height is the same.
Let's do that.
We're going to set width to 10 and height to 10.
Then we're going to make sure
that the border radius is also 10 so that this becomes circular.
Now, I don't know if you can see or not,
but this is obviously not really centered vertically.
Let's do Align Items Center here as well, and this will be fixed.
Now our biggest problem, guys,
we have a problem that this container is not correctly aligned.
What do we do in this case?
This is a very specific alignment.
Therefore, we're going to have to use
position absolute to totally govern exactly where this is going to be visible.
For that, we're going to say that message
number container itself is position absolute.
This is where it goes.
It goes to the top left-most corner.
We want to make sure that this can be on the right side.
Let's say that on the right side, we want
zero at first, and we're going to see this appear here.
Now we do see that heading for the message icon is 14.
Let's try setting the right side to 14.
We're going to say that we want this 14 points away from the right side.
This is a bit too much.
Why don't we try 12?
It seems a little more correct.
Now we want to align this a little bit with some margin from the top.
We're going to say that top is going to be around 14.
Again, let's say that this is again too much.
What about 12?
This looks way better.
I think we need a little bit less on the right side, so what if we do 10?
I think that that is perfect actually.
Let's leave it like this.
Now it seems like
we're done with our header of the application and we can move
on to so much more interesting things in the next video.
Stay tuned and I'll see you there.