1 00:00:02,310 --> 00:00:08,400 It's of course up to you how you want to style this confirm text here or actually should not just be 2 00:00:08,400 --> 00:00:15,630 text, it should be a view with the text in there which outputs our number and then a button to start 3 00:00:15,630 --> 00:00:21,780 the game and you can definitely pause the video at this point and come up with your own styling there, 4 00:00:21,780 --> 00:00:23,050 your own layout. 5 00:00:23,100 --> 00:00:27,510 I have a certain layout in mind which certainly will differ from yours but there is no wrong or right 6 00:00:27,510 --> 00:00:32,430 decision here, so definitely take this as another chance to come up with your own layout for this and 7 00:00:32,430 --> 00:00:36,990 a button that right now doesn't do anything but that is there which would allow the user to start the 8 00:00:36,990 --> 00:00:42,520 game and after a short pause which you can use to pause the video, I'll implement my solution together 9 00:00:42,520 --> 00:00:45,370 with you. 10 00:00:45,420 --> 00:00:49,020 So here's how I think that this would look nice. 11 00:00:49,050 --> 00:00:55,640 I want to have a view so that I can set up a general container around that or actually maybe not a view 12 00:00:55,650 --> 00:00:57,720 but why don't we use our card here, 13 00:00:57,720 --> 00:00:59,680 that sounds like a good idea. 14 00:00:59,730 --> 00:01:04,980 Now that card, if we have a look at it, doesn't have a margin and I want to have some spacing between 15 00:01:04,980 --> 00:01:07,950 that card at the top and my summary card. 16 00:01:08,070 --> 00:01:15,540 So therefore here, I'll give this a separate style here in my stylesheet, in the start game screen, 17 00:01:15,540 --> 00:01:21,570 I'll name this summary container, name as always is up to you and I want to have a margin to the top 18 00:01:21,570 --> 00:01:35,400 of let's say 20, some nice spacing here and add this via the style prop to the card here and in 19 00:01:35,400 --> 00:01:44,710 there, I want to say you selected and then in a new line output the number in a nicely presented 20 00:01:44,710 --> 00:01:51,160 way, maybe the number in kind of a box with a separate border with rounded corners so that it's 21 00:01:51,310 --> 00:01:56,740 clearly visible or also bigger than the other text and therefore here, I'll add a view with a text 22 00:01:56,740 --> 00:02:04,070 in there and in that text, I'll have the selected number but now that view and the text should get 23 00:02:04,620 --> 00:02:11,030 a special styling and since I plan on reusing that, I'll actually grab it and outsource it into a new 24 00:02:11,030 --> 00:02:12,690 component and I'll name it 25 00:02:12,800 --> 00:02:24,080 number container. In this component, I'll import React from React and import view and text from React Native 26 00:02:25,300 --> 00:02:33,850 and then have the number container component here, export default number container and of course we'll 27 00:02:34,090 --> 00:02:41,880 also need a stylesheet here, so let's set up a stylesheet as well with Stylesheet.create down there 28 00:02:42,360 --> 00:02:49,320 and then in this component, I'll return this view thing here with the selected number which now however 29 00:02:49,530 --> 00:02:55,140 has to be passed in and I expect it to get it between the opening and closing tags of my own component 30 00:02:55,320 --> 00:02:57,800 with the help of props children. 31 00:02:57,870 --> 00:03:02,270 Now this container of course is something you can freely configure, 32 00:03:02,370 --> 00:03:11,590 I'll add just a container style, container name here where I think a border width of two might look good, 33 00:03:11,650 --> 00:03:20,650 so a little bit of a broader, wider border. A border color where I actually want to use my primary color 34 00:03:20,680 --> 00:03:23,670 or my accent color, we'll see which one looks better. 35 00:03:23,770 --> 00:03:33,400 So let's import colors from constants/Colors and for the border color, then use colors accent for 36 00:03:33,400 --> 00:03:39,670 now and see how that looks like. Some padding so that the number is not directly on the edges of that 37 00:03:39,670 --> 00:03:42,070 surrounding box, 38 00:03:42,080 --> 00:03:49,630 doesn't sit directly next to the border, a border radius of 10 to have some rounded borders, some 39 00:03:49,630 --> 00:03:50,440 rounded corners 40 00:03:50,440 --> 00:03:56,940 excuse me, by the way if you would want to target individual corners, you could do so with border 41 00:03:57,120 --> 00:04:06,780 top left radius, top right radius, top end and top start also takes the user's settings regarding if 42 00:04:06,780 --> 00:04:13,980 it's a left to right or right to left language into account so you can target all single corners as well or 43 00:04:13,980 --> 00:04:22,820 set a radius for all corners with border radius and also add a little margin here, margin vertical of 44 00:04:23,340 --> 00:04:32,120 of 10 maybe to have some spacing to the top and bottom around of this container here and also important, 45 00:04:32,300 --> 00:04:40,340 center the text in there with align item center and justifyContent center taking advantage of that flex 46 00:04:40,340 --> 00:04:48,740 box behavior. And with that, I also want to give the number itself, so the text a certain style and that 47 00:04:48,740 --> 00:04:57,230 style is that I give the text also that accent color and I want to use a font size of 48 00:04:57,230 --> 00:05:04,280 22 to have to really stand out and later, we'll also use a custom font. And then this view here gets 49 00:05:04,280 --> 00:05:13,830 the container style and the text here of course receives the number style. With that set up, we can use the number 50 00:05:13,830 --> 00:05:19,740 container in the start game screen, so there we simply add that import and what we're doing here is 51 00:05:19,740 --> 00:05:25,000 pretty normal, that you have multiple components of which you compose your application. 52 00:05:25,160 --> 00:05:31,560 So now we can use the number container in the start game screen component, add it here below this text 53 00:05:32,010 --> 00:05:38,160 and in the number container, we get the content here with props children, we output it with props children, 54 00:05:38,220 --> 00:05:41,190 that means we have to pass it between the opening and closing tags, 55 00:05:41,250 --> 00:05:44,370 so here, we forward the selected number. 56 00:05:44,580 --> 00:05:48,710 Now that's just my suggestion for how we could style this but I like the style 57 00:05:48,900 --> 00:05:54,630 and then for the moment, I'll add a button here which is a self closing tag though, the built-in button 58 00:05:55,080 --> 00:06:02,890 with a title of start game, all caps to make it really stand out and save this 59 00:06:02,940 --> 00:06:08,820 and now if we choose a number here, this is what we get and it doesn't look too ugly I'd say. Still, there 60 00:06:08,820 --> 00:06:15,060 are two things which I want to change, this text here should be centered and this box with the number 61 00:06:15,330 --> 00:06:22,120 should not be as wide as the surrounding box but be only as wide as the number needs it to be. 62 00:06:22,860 --> 00:06:30,260 Now to make both work, I'll go to my card which holds all the content here and with that, I mean I go 63 00:06:30,260 --> 00:06:33,900 to the style in the start game screen which I also use on that card, 64 00:06:34,040 --> 00:06:35,480 that's my summary container 65 00:06:35,750 --> 00:06:45,400 and there we can align the items in there to be centered, instead of using the default which would 66 00:06:45,400 --> 00:06:52,280 be stretch and now this is automatically centered and the box is only as wide as the number requires 67 00:06:52,280 --> 00:06:54,610 it to be. 68 00:06:54,700 --> 00:06:57,360 Now that doesn't look too shabby, 69 00:06:57,370 --> 00:07:03,160 one last thing which I just noticed is also that when we confirm an input, I also want to use the keyboard 70 00:07:03,190 --> 00:07:09,940 API to dismiss the keyboard so that as soon as we press confirm here, we also close the keyboard 71 00:07:10,180 --> 00:07:12,220 and now we have a nice output here. 72 00:07:12,220 --> 00:07:16,180 Now with that, we have a solid base look I'd say, we can pick a number, 73 00:07:16,180 --> 00:07:22,210 we're doing some rough validation to make sure that we have a valid number and the next step is that 74 00:07:22,210 --> 00:07:28,540 we make this start game button work and we swap what we see on the screen here for our the game is 75 00:07:28,540 --> 00:07:34,540 running screen where the computer is now making guesses and we then make sure we give the user a chance 76 00:07:34,540 --> 00:07:37,850 of telling if the numbers should be greater or lower 77 00:07:37,990 --> 00:07:41,770 and we then at some point are finished and show a game over screen.