So far I have set up my stack navigator.
I have two screens on
the stack and I've also figured out how to
navigate between the screens
and how to go back to the previous screen.
In this video, you are going to
learn how to configure the header bar.
Specifically, you will style the header bar
in the Little Lemon app and add an image on it.
Keep in mind that I already
have a header bar that comes with
react navigation as soon
as I have set up the stack navigator.
In fact, I also gave my header bar
a unique light pink background color within
the screen options of the navigator
under the header style.
I now want to add more styling and clean
up the header bar to look aesthetically more pleasing.
In the screen options,
I changed the background color to
a darker color by changing the hexadecimal value.
I also give the header text tint a color.
Now, keep in mind that the tint of the header must be
a lighter color because
the background color is going to be darker,
and you need some contrast for easy reading.
I add the header tint style.
This is the style for the text
that shows up on the header bar.
I set the font-weight to bold.
I can also give font size and
font family within the header tint style.
That is it for the header style.
I've styled to the screen options.
I've given a background color for the header style,
I've given a tint color for the text,
and I've set the tint style to bold font weight.
Now, all of these are placed within
the screen options of the navigator,
which means it's applicable to
both the Welcome Screen and
the Menu Screen and
any other screens that are added within the stack.
It is important to note that if I want
unique styling per screen for the header bar,
then I will have to add all of these options
as options within the stack screen instead.
To summarize, there are two ways to set styling.
If you want the same style for all the screens,
add the style to the screen options.
If you want different styling for each screen,
you have to add the style
within the options of the stack screen.
How does the header style display on the emulator?
On the iOS emulator,
I now have a header bar that displays
differently from what had previously displayed.
The header bar has a darker gray color
and the tint color is white with a bold font.
By clicking on the "View Menu",
I navigate to the next screen,
which is the Menu screen.
On the new screen, the header bar displays
the same new settings I have allocated to the style.
This is because I've given it as
a screen option within the navigator.
In this manner, you can customize
your header bar look and feel based on your requirements.
Adrian wants me to add a logo to your header bar.
Let me show you how to do that.
Let's say I want to plug in a little image of
the Little Lemon logo within
my header bar instead of the Welcome text.
The first step is to import
the image component because that's
how I'm going to import the logo.
Next, I create a new component called logo title,
where the Little Lemon logo will be rendered.
Within the return statement,
I have an image and the source for this image,
which is the image folder.
I'm going to add./image/littlelemonsmalllogo.png,
and then I close the image tag.
I now add some styling to the image as I
don't want to display the raw image as it is.
In the style, I add a height of
40 pixels and a width of 300 pixels.
To the resize mode,
I give it the value of contain.
Finally, I align this image to the center.
The image component for the logo is
ready and all it does is render this image.
What I want to do next is to
render the logo title instead of
Welcome as a title for the header bar. How do I do that?
The first step would be to go to
the Stack screen for the Welcome screen.
Inside the options, I have given the title as Home.
In the options, I'm going to define
another property called the header title.
This can be used to render
a certain component instead of the text for the header.
Within the header title,
it can take in as many props as needed.
Here I render the logo title and
also pass in the props if there are any props.
That's it. All I did was plug in the header title prop.
I add a return function that is going
to return the logo title component.
What this mean is when
the Welcome screen displays on top of
the header bar within the header bar,
the Little Lemon logo will display instead of any text.
Now, the same thing can
be done for the other screens as well.
This will not impact the other screens because this
is an option that I've given
specifically for this screen.
How does this now display on the emulator?
The Little Lemon logo now
displays on the Welcome page in the header bar.
In other words, the logo displays instead
of the name of this page which was Welcome.
When I click on the "View Menu",
I navigate to the next page.
On this page, the header bar still
displays menu and no logo appears.
That is exactly what I expected because I
only designed the logo to display on the Welcome page.
If I go back to the Welcome Page,
the Little Lemon logo is still there.
This is the way you can configure
your header bar to display whatever you like.
It could be an icon image
and it could be some image and text.
That is your decision.
In this video, you have
learned how to configure a header bar.