1 00:00:02,220 --> 00:00:04,630 So now that we got a header, 2 00:00:04,650 --> 00:00:10,950 we can continue and continue with the part where users can enter a number which the computer should 3 00:00:10,950 --> 00:00:15,920 guess thereafter. And for this here in the app.js file, below the header, 4 00:00:15,920 --> 00:00:22,790 I of course want to have the input area of the user. Now just as before, I'll handle this in 5 00:00:22,790 --> 00:00:29,780 a separate component and not here in app.js to keep all components relatively lean and we could create 6 00:00:29,780 --> 00:00:34,850 this component here in the components folder, that would not be wrong but since I now will work on a 7 00:00:34,850 --> 00:00:42,110 component that essentially is responsible for everything we see on the screen besides the header, I treat 8 00:00:42,140 --> 00:00:47,600 this component as kind of a special component, I'll name it a screen and I'll store it in a screens 9 00:00:47,600 --> 00:00:53,000 folder because the finished game will essentially have three different screens - one for configuring and 10 00:00:53,000 --> 00:00:58,040 starting the game, one when the game is running and one when the game is over and I want to have these 11 00:00:58,100 --> 00:01:04,520 special components which technically are totally normal components but which fulfill a special purpose, 12 00:01:04,730 --> 00:01:10,790 I want to have them stored in a separate folder and that's just my personal design decision here, you 13 00:01:10,790 --> 00:01:16,790 don't need to store them. Technically there is no reason to do it or not to do it, React Native 14 00:01:16,790 --> 00:01:18,750 simply doesn't care. 15 00:01:18,770 --> 00:01:24,200 So here I'll store it in there and I'll name this StartGameScreen.js to also make it really 16 00:01:24,200 --> 00:01:30,740 clear in the name that this is a special component to me but as I said, technically it's a normal component 17 00:01:30,770 --> 00:01:37,580 and therefore we import React from React and we'll also import some things from React Native of course 18 00:01:37,880 --> 00:01:44,210 and we can already tell that we'll certainly need a view because you probably can't build any 19 00:01:44,210 --> 00:01:49,060 component, well you can but not that many components which you can build without views. 20 00:01:49,160 --> 00:01:54,620 So we'll import the view here and we'll definitely also need a stylesheet for some styling and we'll 21 00:01:54,620 --> 00:02:02,870 see what else we need, we'll certainly also need a text I guess so we can already add that. Now with this, 22 00:02:03,500 --> 00:02:10,130 I'll create a new constant here, start game screen which is a functional component looking like this, where 23 00:02:10,130 --> 00:02:19,330 we'll have a styles object with Stylesheet.create, like this and where I then export start game screen 24 00:02:19,450 --> 00:02:27,430 like that and you could save this as kind of a template for any new component you add because 90% 25 00:02:27,430 --> 00:02:32,890 of custom components you build in React Native look like this basically, you import React, you import 26 00:02:32,890 --> 00:02:39,280 some stuff from React Native, you define your component, the name differs of course, you have your styles 27 00:02:39,310 --> 00:02:40,740 object and you export it, 28 00:02:40,780 --> 00:02:46,740 that's pretty much always the same so you could kind of save this as a template if you wanted to. I don't 29 00:02:46,740 --> 00:02:52,800 want to here though, so I'll just continue with working on the component itself and the question now 30 00:02:52,800 --> 00:02:59,760 is, what do we render in this start game screen? How is should it look like? In the end in there, I'll have 31 00:02:59,760 --> 00:03:06,960 a wrapping view surrounding my entire screen because I think that kind of makes sense, allows us to set 32 00:03:06,960 --> 00:03:14,040 up some general styling. I'll again add a screen property here to this stylesheet object which I can do, it 33 00:03:14,040 --> 00:03:18,420 will not clash with the one in app.js, we could have also chosen different names, 34 00:03:18,420 --> 00:03:23,760 these two are simply not related because these are independent Javascript objects in the end managed 35 00:03:23,760 --> 00:03:29,790 in independent files. So we can repeat names here or choose different names, I'll go for a similar name 36 00:03:29,790 --> 00:03:36,390 here, name this screen and set up some general styling for this surrounding view here. The general styling 37 00:03:36,390 --> 00:03:42,810 is that I said this to flex one so that it takes all the space it can get which means that since I will 38 00:03:42,810 --> 00:03:47,760 add it below the header, it will take all the space below the header, both vertically and horizontally 39 00:03:48,780 --> 00:03:55,350 and besides this, I also want to add some padding here of 10 so that the content doesn't sits directly 40 00:03:55,350 --> 00:04:01,470 on the edges of this screen but there is some spacing to the left, right, top and bottom and I'll add 41 00:04:01,470 --> 00:04:03,860 align items center. 42 00:04:03,930 --> 00:04:09,900 Keep in mind that every view by default uses flexbox and by default uses flex direction column, align 43 00:04:09,930 --> 00:04:13,960 items it positions items along the cross axis, 44 00:04:13,980 --> 00:04:18,240 so since the default direction is column, the cross axis is left to right, 45 00:04:18,240 --> 00:04:20,000 so it's a horizontal axis, 46 00:04:20,070 --> 00:04:25,380 so this will align items in the center horizontally but not vertically. 47 00:04:25,380 --> 00:04:31,200 There we use the default of justifyContent flex start but since I use the default, I don't need to 48 00:04:31,200 --> 00:04:39,210 set it. So we'll just leave it as it is here and now assign this style here to this view and autoformatting 49 00:04:39,210 --> 00:04:41,600 closed my tag here which I of course don't want to do, so 50 00:04:41,760 --> 00:04:42,830 let me revert this 51 00:04:43,140 --> 00:04:47,070 and now we have that view for our game screen. Now to see whether it works, 52 00:04:47,070 --> 00:04:49,220 I'll just output some text here, 53 00:04:49,320 --> 00:04:56,110 the game screen, just some dummy placeholder. Reformat that and now in app.js, let's use that screen 54 00:04:56,530 --> 00:05:05,880 by importing start games screen from the screens folder and there, start 55 00:05:05,880 --> 00:05:09,820 game screen and then simply add it 56 00:05:09,890 --> 00:05:19,580 here, like this. If we save this, we see the game screen here and also on Android, 57 00:05:19,650 --> 00:05:20,250 so this works. 58 00:05:20,250 --> 00:05:27,270 We're using this second separate component which we'll now use as a full screen component basically or 59 00:05:27,360 --> 00:05:28,420 almost full screen, 60 00:05:28,430 --> 00:05:30,420 the part below the header in the end.