In this video we're going to work on our next example the state.
So let's talk about what we're going to build.
All right.
So from a UI perspective this is going to look kind of similar to the counter application we just put
together at the very top we're going to show a simple button that says add color whenever user taps
on this.
We're then going to generate a random color and show it in a very little box underneath that button.
So maybe the first color we generate randomly would be red and we could show that right underneath then
if a user taps on that button again I want to generate a new color at random maybe the next one is like
yellow.
And then every time the user taps on that button we're going to show another randomly colored box like
so the first thing I want to tell you about handling colors inside of React Native.
Because we haven't really discussed this just yet.
We can designate a color inside of React Native application by using an R G.B. value.
So in other words if we want to indicate a color red right here we can create a view element assign
it a height in width and then also give it a background color property.
And that would have a value of like our G.B. and then a value of red which would be maybe like you know
what.
Well whatever.
And then green and then blue.
That's how we would generate a color with React Native or I should say assign a color.
So we would have one our G.B. value for that box.
Another one for that box and so on.
And each of these different RG things would probably be a string so at that mind.
Let's take a look at those three questions so we went over previously and tried to answer them for this
application.
So first off what piece of data is changing inside of our app.
Well I think there's going to be like maybe an array of colors of sorts where maybe the array is going
to have all these different RG be strings inside of it.
So if I had to apply a name to that maybe I'd just say like the piece of data that's changing is like
colors it's a list of colors so we want to show you might be thinking that they're actually maybe two
pieces of data here maybe one would be like the number of times the user has to have that button.
And so that would be like the number of squares that we need to show here and then a second piece that
would be the different colors.
But in reality we can condense that down to just this one single value just an array of string colors.
That's it.
So what type of data is it.
Well I'd say it's an array of strings and by default when our application first starts up we probably
don't want to show any boxes at all.
So that's starting value for this piece of state would be an empty array OK.
So it's all that mind.
Let's now flip back over to our Ed we're going to once again put together some boilerplate for a react
component and then show it inside of our app.
OK.
So back over here inside my screen directory I'll make a new file called color screen dot J.S. and then
as usual let's put some boiler plate inside of here.
So import react and react.
I'll get view style sheet.
And I don't think we need text but we definite need.
Button React Native or then create my color screen component and you know what.
Well actually we don't need a text one by saying here let's just return a View.
I was gonna say we need some text to just get some temporary stuff inside of here.
Let's just put the button in because we've done that enough so I'll put a button inside of your with
a title of add a color.
And then right now I'm not going to add in an on press callback we'll add that in a little bit later.
Then after that I'll put in my style sheet
as I mentioned on the last screen we put together.
We have not really been using the style sheet but usually by convention we like to just throw this line
inside of here so we can easily come back to a component and add in some styles right away and then
I'll throw my export default color screen at the bottom all right.
So there's our boiler plate now as usual.
We're going to make sure that we wire this thing up to our stack navigator and then add a new button
to our home screen component.
So back inside of APT.
J.S. I'm going to import color screen from source screens color screen I'll add in a new option for
my routing object right here of color and that's going to take us to color screen.
And then finally inside of my home screen inside the screens directory Here's my home screen and I'm
going to duplicate one these button elements at the bottom I'll update the title to go to color demo
and then I'll update the navigate call once again so I'll navigate to simply color.
OK let's save all these files that we've edited and we'll do a quick test.
So there's the new button I'll click on go to color demo and there's our button and I'll test this out
on Android really quickly as well and there's the button.
Very good.
OK.
Let's take a quick pause right here when we come back the next section.
We're going to add in our state variable and make sure that we modify that state variable over time
every time we tap on that button so quick pause and I'll see you in just a minute.