So we spent loads of time on this first screen but obviously for a good reason,
this course is about learning React Native after all and you learned a lot about layouting, styling,
connecting components, using multiple components and configuring built-in components already
and that is a core part of React Native and what allows you to build real apps in the end. Nonetheless, it's
now time to continue working on this app and
before we dive deeper into other things we could style which I'll do later,
I want to make sure that this start game button works because right now we're always stuck on this
start game screen but now, I'll add a second component to the screens folder, the game screen itself, so
the screen, the content I want to show on the screen when the game is running and that is the screen
that is responsible for showing the guess of the computer and allowing the user to tell the computer
whether that's right or wrong, if the value should be lower or greater,
so that's the goal here.
Now as I mentioned before, it's a regular component nonetheless,
so we need to import React for sure and we'll also import some stuff from React Native,
most importantly of course the view and the text, you can never go wrong with these, also the stylesheet
of course, you typically always need these.
Then here, we can add our game screen functional component, create the styles object here by
using Stylesheet.create like that and in the end, export our game screen here as the default and get
rid of that plus here at the top.
So now we have that game screen component defined here and
now let's briefly pause and think about what needs to happen here.
Now in the end what needs to happen is that the computer needs to make a guess and it needs to make
a guess
initially when this screen first loads but then also whenever the user basically presses the this is
too low or
this is too high button,
so whenever the user gives a hint regarding whether that guess is, in which direction of the real number
this guess is so to say, whenever that happens we want to generate a new guess.
Now the guess itself should be a random number and therefore, I'll start by creating a new function outside
of my functional component
now because it will not use any data from in there, so it shouldn't be recreated on every re-rendering of
the components simply to save some performance,
if you don't rely on props or state, you can also simply have a function that resides outside of your
component and I'll name this generate
random between
because that's what this function will do.
It's a function, it will generate a random number between a minimum and a maximum and which also allows
us to exclude certain numbers,
for example the first number we generate should exclude the solution so that the device, the app can never
guess the user's choice on the first try.
Now in here, minimum will be normalized to Math.ceil minimum,
so to basically have an integer number here if a non-integer is entered and round it up and max will be
floored to do the same but rounded down. Then I'll have my random number which I generate with Math.random
and Math.random gives us a random number between 0 and 1,
so to have a number between min and max, we have to multiply this with max - min and then also
in the end, add min here here but also make sure that you call Math.floor on the result of this entire
operation here and this will give you a random number between this minimum and maximum.
Now with that generated,
I want to check if the random number is equal to the number we want to exclude, which would of course
be a very rare coincidence but it can happen, in which case I will return the result of
another generate random between call where I simply forward min, max and exclude which we got,
so I will simply repeat generate random between and return the value of that repeated run if we there
get the excluded value again, we'll repeat it one more time so ultimately we'll get there
and if we don't have the excluded number which should be the case in most cases, then I'll just return that
random number right away.
So this is now a function which generates us a random number.
Now here in the game screen, I want to manage some state, so I'll import the useState hook from React
and initialize some state here with the random number because the state I want to manage here is the
guess of the computer, the current guess
and that also needs a set current guess function so that we can change this whenever the user gives
a new hint.
So here, we can call generate random between to generate an initial state which will be saved and this
will then only be considered as an initial state,
so when this component rebuilds and therefore use state is called again, we'll generate another random
number again but this will then not override that state because once the state is set initially, it
will not be overridden again by adding value derived here.
This will only be considered by React if we have no initial state yet, thereafter this initial or updated
state will be managed detached from the component and will not be overridden again by this call here.
Initially however we need to make this call, we want to get a random number between 1 and 100, 100
is excluded with the logic we wrote up there,
so it will be a number between 1 and 99, 99 included
and I want to exclude the choice of the user.
I expect to get this on my props here,
so user choice could be a prop name we use here and that's the value I want to execute because that's
the solution
in the end and we won't be able to guess the solution right away,
that would be a bit unfair.