So with that, let's get started with our application here and there are various ways of getting started
of course,
I want to get started by first of all dropping this container style here in my starting screen and instead,
I want to get rid of the text and everything here and I want to start by adding my own header,
so this bar at the top of the screen.
Now we can build such a bar on our own here, let me get rid of that import which we don't need
and I will build it not inside of this app component but in a separate component file, in a separate
custom component because and that's already one super important thing to take away, just like in React for
web apps,
it is a good practice to split your app into multiple components which you then compose together because
that leads to more manageable and reusable code.
So I'll add a new folder, components, the name is up to you though, you can name that folder whatever you want
and in there I want to have a header.js file to hold the header component.
There, we need to import React from React so that we can use React in there and write
jsx code and then we'll also need some components from React Native because you must never forget
that these are the only core components you can use in the end.
You can't use any web HTML elements or anything like that,
you need these core primitives React Native gives you.
So we'll definitely need a view in here and also a text component and also a stylesheet component
and now with that, we can get started building our header.
So for this, I'll add a header constant which holds my functional component because I'll work with functional
components only in this course, we'll use hooks in places where we need to manage state or side effects
and here, we will of course export this component in the end and also set up a styles object with style
sheet create so that we can style this in the end.
Now let's create our component here,
let's return something here
and what I want to return is in the end a view with the text inside of it and the text should be
our title.
So therefore between the opening and closing tag here, I will output props title so that our own
component can receive the title prop and output this here. And the view surrounding the text will be
used for positioning the text and for giving this some styling, so for styling our header because text
elements on their own are also styleable but not to the same extent like views are, views really
are a bit more flexible regarding the styles you can assign and regarding how they behave and therefore,
you always want to use a view for such a surrounding container and for this overall styling your component
might have or parts of your component might have.
So here, I'll add the style prop and assign a style for my styles object, a style we haven't created there
yet but I'll name it header and I'll also give the text a style prop though and point at styles header
title or whatever you want to name it because as I said, you can style text too and here I want to
have some text specific styles later to also make sure that the text looks good. So now here in the
stylesheet, we can start styling our header and I'll start with the header itself, by adding a header
prop and then this object will hold these style definitions for the header, so for this view component
here and there of course, you are free to experiment with whatever you want. I'll go with a width of 100%
so that it takes the full device width we can get or the full width of the parent component
to be precise but I'll add it such that the parent component takes the full device width and therefore,
this will also take the full device width in the end. Assign a height and there, you can experiment with different
values, I found 90 to look quite decent and therefore I'll go with that.
Side note, for now I will optimize for these screens which I have here, in the next course module, we'll
dive into how you can adjust your views and your code for different devices, both regarding
their size as well as regarding the platform your code is running on. For now, we'll not have any differentiation
there, we'll adjust too in our app to look good on these two emulators but again, I'll pick up on this later.
So height of 90, a padding to top of 36 to have some spacing to the top and I need to
add this to basically cope or things like the status bar here or this notch here, so therefore I add
this padding top and I also want to add a background color here
and now you are of course totally free to pick any color you want,
I prepared a nice color, a hex code of a color which I personally like and that is #f7287b
which is quite a nice color in my opinion as you will see in a second.
Now I also want to center the title and therefore, I'll use align items and justifyContent because
every view by default uses flexbox and therefore with align items and justifyContent, we can control
how the child elements of the view are positioned inside of the view and with center for align items
and justifyContent
also set to center, we center all children or child element inside of the view in the center, both
horizontally and vertically.
Now for the header title,
I also want to set up some styles for this.
So the header title here, that should get a color of black because that will fit this color here and
so that we can read the text and I want to set the font size to 18
let's say, so that we have this fixed, a bit bigger font size here. With that,
let's try using this header and let's use it in the app.js file here. There,
we have this view and this view has no style attached.
I will change this and set up a screen view here and give this a flex of one attribute.
Now we can assign this here and flex one will ensure that this view takes all the space it can get
and since it's the root view of our application, that means it will take all the width and height it
can get, it will occupy the full screen and therefore since my header takes width 100%, since
I'll add it directly inside of this view which is now configured to take the full width and height, this
header will also take the full width.
So now we just need to add the header here of course,
so import header from ./components/header,
you can omit the file extension and then simply add header as a self closing tag here but don't forget
to set a title prop because remember that we're outputting the title prop here between the text tags,
so we can add a title here and I'll name it guess a number because that's what our game is about.
Now if we save this, it should automatically rebuild and you should see a header that looks like this
on the iPhone and like this here on Android and I'd say that's okay for both devices. Again, we'll later
explore ways of how you can fine tune the look to the specific device your app is running on.