1
00:00:00,770 --> 00:00:03,460
In this video we're going to work on our next example the state.

2
00:00:03,470 --> 00:00:05,940
So let's talk about what we're going to build.

3
00:00:05,960 --> 00:00:06,680
All right.

4
00:00:06,680 --> 00:00:10,610
So from a UI perspective this is going to look kind of similar to the counter application we just put

5
00:00:10,610 --> 00:00:16,010
together at the very top we're going to show a simple button that says add color whenever user taps

6
00:00:16,010 --> 00:00:16,630
on this.

7
00:00:16,640 --> 00:00:21,440
We're then going to generate a random color and show it in a very little box underneath that button.

8
00:00:21,950 --> 00:00:27,110
So maybe the first color we generate randomly would be red and we could show that right underneath then

9
00:00:27,110 --> 00:00:32,720
if a user taps on that button again I want to generate a new color at random maybe the next one is like

10
00:00:32,720 --> 00:00:33,420
yellow.

11
00:00:33,620 --> 00:00:39,300
And then every time the user taps on that button we're going to show another randomly colored box like

12
00:00:39,320 --> 00:00:43,910
so the first thing I want to tell you about handling colors inside of React Native.

13
00:00:43,910 --> 00:00:46,240
Because we haven't really discussed this just yet.

14
00:00:46,250 --> 00:00:51,690
We can designate a color inside of React Native application by using an R G.B. value.

15
00:00:51,740 --> 00:00:57,440
So in other words if we want to indicate a color red right here we can create a view element assign

16
00:00:57,440 --> 00:01:01,830
it a height in width and then also give it a background color property.

17
00:01:01,940 --> 00:01:07,510
And that would have a value of like our G.B. and then a value of red which would be maybe like you know

18
00:01:07,550 --> 00:01:07,760
what.

19
00:01:07,760 --> 00:01:08,570
Well whatever.

20
00:01:08,600 --> 00:01:11,050
And then green and then blue.

21
00:01:11,160 --> 00:01:15,450
That's how we would generate a color with React Native or I should say assign a color.

22
00:01:15,590 --> 00:01:18,740
So we would have one our G.B. value for that box.

23
00:01:18,750 --> 00:01:22,100
Another one for that box and so on.

24
00:01:22,100 --> 00:01:27,170
And each of these different RG things would probably be a string so at that mind.

25
00:01:27,310 --> 00:01:31,660
Let's take a look at those three questions so we went over previously and tried to answer them for this

26
00:01:31,690 --> 00:01:32,980
application.

27
00:01:33,010 --> 00:01:35,810
So first off what piece of data is changing inside of our app.

28
00:01:36,410 --> 00:01:42,010
Well I think there's going to be like maybe an array of colors of sorts where maybe the array is going

29
00:01:42,010 --> 00:01:45,370
to have all these different RG be strings inside of it.

30
00:01:46,330 --> 00:01:50,860
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

31
00:01:50,860 --> 00:01:56,080
colors it's a list of colors so we want to show you might be thinking that they're actually maybe two

32
00:01:56,080 --> 00:02:01,180
pieces of data here maybe one would be like the number of times the user has to have that button.

33
00:02:01,180 --> 00:02:05,650
And so that would be like the number of squares that we need to show here and then a second piece that

34
00:02:05,650 --> 00:02:07,020
would be the different colors.

35
00:02:07,090 --> 00:02:12,920
But in reality we can condense that down to just this one single value just an array of string colors.

36
00:02:12,940 --> 00:02:14,220
That's it.

37
00:02:14,230 --> 00:02:15,640
So what type of data is it.

38
00:02:15,640 --> 00:02:21,630
Well I'd say it's an array of strings and by default when our application first starts up we probably

39
00:02:21,630 --> 00:02:23,640
don't want to show any boxes at all.

40
00:02:23,640 --> 00:02:28,350
So that's starting value for this piece of state would be an empty array OK.

41
00:02:28,380 --> 00:02:29,540
So it's all that mind.

42
00:02:29,550 --> 00:02:34,170
Let's now flip back over to our Ed we're going to once again put together some boilerplate for a react

43
00:02:34,170 --> 00:02:38,000
component and then show it inside of our app.

44
00:02:38,050 --> 00:02:38,320
OK.

45
00:02:38,350 --> 00:02:46,230
So back over here inside my screen directory I'll make a new file called color screen dot J.S. and then

46
00:02:46,260 --> 00:02:49,080
as usual let's put some boiler plate inside of here.

47
00:02:49,230 --> 00:02:53,040
So import react and react.

48
00:02:53,220 --> 00:02:56,030
I'll get view style sheet.

49
00:02:56,370 --> 00:02:58,440
And I don't think we need text but we definite need.

50
00:02:58,440 --> 00:03:06,250
Button React Native or then create my color screen component and you know what.

51
00:03:06,250 --> 00:03:10,450
Well actually we don't need a text one by saying here let's just return a View.

52
00:03:10,570 --> 00:03:13,710
I was gonna say we need some text to just get some temporary stuff inside of here.

53
00:03:13,730 --> 00:03:17,770
Let's just put the button in because we've done that enough so I'll put a button inside of your with

54
00:03:17,770 --> 00:03:20,310
a title of add a color.

55
00:03:20,680 --> 00:03:27,300
And then right now I'm not going to add in an on press callback we'll add that in a little bit later.

56
00:03:27,440 --> 00:03:29,330
Then after that I'll put in my style sheet

57
00:03:33,580 --> 00:03:35,460
as I mentioned on the last screen we put together.

58
00:03:35,470 --> 00:03:40,090
We have not really been using the style sheet but usually by convention we like to just throw this line

59
00:03:40,090 --> 00:03:45,070
inside of here so we can easily come back to a component and add in some styles right away and then

60
00:03:45,070 --> 00:03:50,140
I'll throw my export default color screen at the bottom all right.

61
00:03:50,160 --> 00:03:52,710
So there's our boiler plate now as usual.

62
00:03:52,710 --> 00:03:57,030
We're going to make sure that we wire this thing up to our stack navigator and then add a new button

63
00:03:57,120 --> 00:03:59,040
to our home screen component.

64
00:03:59,250 --> 00:04:00,470
So back inside of APT.

65
00:04:00,490 --> 00:04:12,950
J.S. I'm going to import color screen from source screens color screen I'll add in a new option for

66
00:04:12,950 --> 00:04:19,940
my routing object right here of color and that's going to take us to color screen.

67
00:04:20,090 --> 00:04:27,870
And then finally inside of my home screen inside the screens directory Here's my home screen and I'm

68
00:04:27,870 --> 00:04:34,850
going to duplicate one these button elements at the bottom I'll update the title to go to color demo

69
00:04:35,800 --> 00:04:40,510
and then I'll update the navigate call once again so I'll navigate to simply color.

70
00:04:40,750 --> 00:04:45,060
OK let's save all these files that we've edited and we'll do a quick test.

71
00:04:45,160 --> 00:04:50,290
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

72
00:04:50,350 --> 00:04:53,710
on Android really quickly as well and there's the button.

73
00:04:53,740 --> 00:04:54,820
Very good.

74
00:04:54,960 --> 00:04:55,230
OK.

75
00:04:55,270 --> 00:04:57,740
Let's take a quick pause right here when we come back the next section.

76
00:04:57,740 --> 00:05:02,080
We're going to add in our state variable and make sure that we modify that state variable over time

77
00:05:02,320 --> 00:05:06,170
every time we tap on that button so quick pause and I'll see you in just a minute.