In this video we're going to make sure that our color screen component has a state variable it can also
generate a color randomly.
Before we do that let's just make sure that we understand how we can make a view or some kind of element
that's going to display like a plain box underneath it with some given color.
OK.
So to get started I'm going to come to my color screen underneath my button.
I'm going to add in a view element and to the thing I'm going to hard code a style I'm to put in a manual
object inside of here.
Now why are we adding in a style directly to this view rather than creating it inside of our style sheets.
We're adding it indirectly because we want to generate this style object on the fly.
We don't know exactly what style we want to apply just yet because we're going to be randomly generating
the color so inside the style object I'm going to first give this view a height I'll give it a fixed
height of 100 a fixed width of one hundred and I'll give it a background color.
And that's where our color is going to come from so I'll give this thing an hour G.B. value.
Once again we're going to designate a 0 0 0 or whatever color values we want for our G.B..
So in this case I'll do like zero to fifty five and 0 so I'll save that and then back over here I'll
go to my color demo and now I can see a bright green box.
So in this case I said essentially that two fifty five means give me a lot of green and don't give me
any red or any blue at all so that's how we're going to show one of these different boxes.
And as you can see the only thing that we really need to generate on the fly is that string right there
before worrying about state too much.
Let's try to create a little helper function inside this file that's going to allow us to generate a
random string like that or I should say a string with that with some random colors inside of it.
So underneath my component definition I'm going to create a new helper function called Random r G.B.
than inside of you're going to generate a random value for red or green and blue so I'll say const red
will be math dot random.
So that's going to give us a random number between 0 and 1 0 multiplied by 256 normally RG values scale
from 0 to 255 but we'll watch what we do here we're going to multiply by 256 that will give us a value
all the way between 0 and 256 and I'll do a math dot floor like so so in the end we should end up between
0 and 255.
Technically we could end up with a 256 year if we got essentially a exact one out of math dot random
but we're essentially not gonna worry about that.
Now I'm going to do this three times one for red one for green and one for blue.
Then after that I want to return a template string a template string is formed with back ticks.
So that's not a single quote right there that's a back to character and then inside there I'll say G.B.
and then I want to essentially inject or interpolate these variables red green and blue to do so I'll
put in a dollar sign.
Curly braces.
And then inside there I'll put red then a comma another set of curly braces with a dollar sign and Green
another comma and then one more set in blue.
Like so now finally we can make use of this random RG function by calling it from random color right
here or see me in background color so instead of the hardcoded RG b value I'll still I'll instead call
random R B okay.
Let's save this once again.
And now if I go back to my color demo I should see a random color on here.
If I refresh my application if you're on the simulator you can hit command R or if you're on Android
you can do simply are going to do that right now.
If you're on a physical device you can shake the device and there will be an option that appears that
says refresh or restart application.
So once we do that we can then click on go to color demo again and we'll now see a very different color
up here on here.
OK.
So now we clearly have the ability to generate some random colors.
It's another classic we need to do is make sure that we initialize our piece of state inside of our
color screen function.
We're going to make sure that we add a new random color to that piece of states every time a user taps
on that button.
Let's take care of that in the next video.