So now that we got a header,
we can continue and continue with the part where users can enter a number which the computer should
guess thereafter. And for this here in the app.js file, below the header,
I of course want to have the input area of the user. Now just as before, I'll handle this in
a separate component and not here in app.js to keep all components relatively lean and we could create
this component here in the components folder, that would not be wrong but since I now will work on a
component that essentially is responsible for everything we see on the screen besides the header, I treat
this component as kind of a special component, I'll name it a screen and I'll store it in a screens
folder because the finished game will essentially have three different screens - one for configuring and
starting the game, one when the game is running and one when the game is over and I want to have these
special components which technically are totally normal components but which fulfill a special purpose,
I want to have them stored in a separate folder and that's just my personal design decision here, you
don't need to store them. Technically there is no reason to do it or not to do it, React Native
simply doesn't care.
So here I'll store it in there and I'll name this StartGameScreen.js to also make it really
clear in the name that this is a special component to me but as I said, technically it's a normal component
and therefore we import React from React and we'll also import some things from React Native of course
and we can already tell that we'll certainly need a view because you probably can't build any
component, well you can but not that many components which you can build without views.
So we'll import the view here and we'll definitely also need a stylesheet for some styling and we'll
see what else we need, we'll certainly also need a text I guess so we can already add that. Now with this,
I'll create a new constant here, start game screen which is a functional component looking like this, where
we'll have a styles object with Stylesheet.create, like this and where I then export start game screen
like that and you could save this as kind of a template for any new component you add because 90%
of custom components you build in React Native look like this basically, you import React, you import
some stuff from React Native, you define your component, the name differs of course, you have your styles
object and you export it,
that's pretty much always the same so you could kind of save this as a template if you wanted to. I don't
want to here though, so I'll just continue with working on the component itself and the question now
is, what do we render in this start game screen? How is should it look like? In the end in there, I'll have
a wrapping view surrounding my entire screen because I think that kind of makes sense, allows us to set
up some general styling. I'll again add a screen property here to this stylesheet object which I can do, it
will not clash with the one in app.js, we could have also chosen different names,
these two are simply not related because these are independent Javascript objects in the end managed
in independent files. So we can repeat names here or choose different names, I'll go for a similar name
here, name this screen and set up some general styling for this surrounding view here. The general styling
is that I said this to flex one so that it takes all the space it can get which means that since I will
add it below the header, it will take all the space below the header, both vertically and horizontally
and besides this, I also want to add some padding here of 10 so that the content doesn't sits directly
on the edges of this screen but there is some spacing to the left, right, top and bottom and I'll add
align items center.
Keep in mind that every view by default uses flexbox and by default uses flex direction column, align
items it positions items along the cross axis,
so since the default direction is column, the cross axis is left to right,
so it's a horizontal axis,
so this will align items in the center horizontally but not vertically.
There we use the default of justifyContent flex start but since I use the default, I don't need to
set it. So we'll just leave it as it is here and now assign this style here to this view and autoformatting
closed my tag here which I of course don't want to do, so
let me revert this
and now we have that view for our game screen. Now to see whether it works,
I'll just output some text here,
the game screen, just some dummy placeholder. Reformat that and now in app.js, let's use that screen
by importing start games screen from the screens folder and there, start
game screen and then simply add it
here, like this. If we save this, we see the game screen here and also on Android,
so this works.
We're using this second separate component which we'll now use as a full screen component basically or
almost full screen,
the part below the header in the end.